docs: update example styles for website (#3310)

antvis · Feb 27, 2023 · 672f104 · 672f104
1 parent 2571cb4
commit 672f104
Show file tree

Hide file tree

Showing 92 changed files with 922 additions and 999 deletions.
diff --git a/sites/x6-sites/src/tutorial/basic/edge/connector/index.less b/sites/x6-sites/src/tutorial/basic/edge/connector/index.less
@@ -1,14 +1,14 @@
-.app {
+.connector-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/basic/edge/connector/index.tsx b/sites/x6-sites/src/tutorial/basic/edge/connector/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -92,8 +92,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="connector-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

diff --git a/sites/x6-sites/src/tutorial/basic/edge/custom-marker/index.less b/sites/x6-sites/src/tutorial/basic/edge/custom-marker/index.less
@@ -1,14 +1,14 @@
-.app {
+.custom-marker-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/basic/edge/custom-marker/index.tsx b/sites/x6-sites/src/tutorial/basic/edge/custom-marker/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -43,8 +43,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="custom-marker-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

diff --git a/sites/x6-sites/src/tutorial/basic/edge/labels/index.less b/sites/x6-sites/src/tutorial/basic/edge/labels/index.less
@@ -1,14 +1,14 @@
-.app {
+.labels-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/basic/edge/labels/index.tsx b/sites/x6-sites/src/tutorial/basic/edge/labels/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -106,8 +106,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="labels-app ">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

diff --git a/sites/x6-sites/src/tutorial/basic/edge/native-marker/index.less b/sites/x6-sites/src/tutorial/basic/edge/native-marker/index.less
@@ -1,14 +1,14 @@
-.app {
+.native-marker-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/basic/edge/native-marker/index.tsx b/sites/x6-sites/src/tutorial/basic/edge/native-marker/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 const markers = [
   'block',
@@ -47,8 +47,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="native-marker-app ">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

diff --git a/sites/x6-sites/src/tutorial/basic/edge/prop/index.less b/sites/x6-sites/src/tutorial/basic/edge/prop/index.less
@@ -1,21 +1,19 @@
-.app {
-  display: flex;
-  flex-direction: column;
+.prop-app {
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-btns {
-  bottom: 0;
-  padding: 0 8px;
-}
+  .app-btns {
+    bottom: 0;
+    margin: 0;
+    padding: 0 8px;
+  }
 
-.app-content {
-  height: 240px;
-  margin-top: 16px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 5px;
-  box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  .app-content {
+    width: 100%;
+    height: 240px;
+    margin: 0;
+    margin-top: 16px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/basic/edge/prop/index.tsx b/sites/x6-sites/src/tutorial/basic/edge/prop/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Graph, Color } from '@antv/x6'
 import { Button } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 const commands = [
   {
@@ -103,8 +103,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-btns']}>
+      <div className="prop-app">
+        <div className="app-btns">
           <Button.Group>
             {commands.map((item) => (
               <Button onClick={() => this.change(item.key)} key={item.key}>
@@ -113,7 +113,7 @@ export default class Example extends React.Component {
             ))}
           </Button.Group>
         </div>
-        <div className={styles['app-content']} ref={this.refContainer} />
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

diff --git a/sites/x6-sites/src/tutorial/basic/edge/registry/index.less b/sites/x6-sites/src/tutorial/basic/edge/registry/index.less
@@ -1,15 +1,15 @@
-.app {
+.registry-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 280px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 5px;
-  box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
-}
+  .app-content {
+    flex: 1;
+    height: 280px;
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
+}
diff --git a/sites/x6-sites/src/tutorial/basic/edge/registry/index.tsx b/sites/x6-sites/src/tutorial/basic/edge/registry/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerEdge('double-edge', {
   inherit: 'edge',
@@ -134,8 +134,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="registry-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

diff --git a/sites/x6-sites/src/tutorial/basic/edge/router/index.less b/sites/x6-sites/src/tutorial/basic/edge/router/index.less
@@ -1,14 +1,14 @@
-.app {
+.router-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/basic/edge/router/index.tsx b/sites/x6-sites/src/tutorial/basic/edge/router/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -91,8 +91,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="router-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

diff --git a/sites/x6-sites/src/tutorial/basic/edge/vertices/index.less b/sites/x6-sites/src/tutorial/basic/edge/vertices/index.less
@@ -1,14 +1,14 @@
-.app {
+.vertices-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/basic/edge/vertices/index.tsx b/sites/x6-sites/src/tutorial/basic/edge/vertices/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -90,8 +90,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="vertices-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

diff --git a/sites/x6-sites/src/tutorial/basic/event/custom-click/index.less b/sites/x6-sites/src/tutorial/basic/event/custom-click/index.less
@@ -1,14 +1,14 @@
-.app {
+.custom-click-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 200px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 200px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }