docs: select highlight demo and tutorial

VisActor · Jun 5, 2024 · fc33d77 · fc33d77
1 parent e9a9341
commit fc33d77
Show file tree

Hide file tree

Showing 12 changed files with 600 additions and 202 deletions.
diff --git a/docs/assets/demo/en/interaction/select-highlight.md b/docs/assets/demo/en/interaction/select-highlight.md
@@ -0,0 +1,116 @@
+---
+category: examples
+group: Interaction
+title: Select Highlight Effect
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/select-highlight.png
+link: '../guide/interaction/select'
+option: ListTable#select
+---
+
+# Select the cell row to highlight the effect
+
+Click on the cell, the entire row or column will be highlighted when the cell is selected. If more than one cell is selected, the highlight effect will disappear.
+
+The highlighted style can be configured in the style. Global configuration: `theme.selectionStyle`, or it can be configured separately for the header and body. For specific configuration methods, please refer to the tutorial.
+
+## Key Configurations
+
+- `select: {
+  highlightMode: 'cross'
+}`
+
+## Code demo
+
+```javascript livedemo template=vtable
+let tableInstance;
+fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
+  .then(res => res.json())
+  .then(data => {
+    const columns = [
+      {
+        field: 'Order ID',
+        title: 'Order ID',
+        width: 'auto'
+      },
+      {
+        field: 'Customer ID',
+        title: 'Customer ID',
+        width: 'auto'
+      },
+      {
+        field: 'Product Name',
+        title: 'Product Name',
+        width: 'auto'
+      },
+      {
+        field: 'Category',
+        title: 'Category',
+        width: 'auto'
+      },
+      {
+        field: 'Sub-Category',
+        title: 'Sub-Category',
+        width: 'auto'
+      },
+      {
+        field: 'Region',
+        title: 'Region',
+        width: 'auto'
+      },
+      {
+        field: 'City',
+        title: 'City',
+        width: 'auto'
+      },
+      {
+        field: 'Order Date',
+        title: 'Order Date',
+        width: 'auto'
+      },
+      {
+        field: 'Quantity',
+        title: 'Quantity',
+        width: 'auto'
+      },
+      {
+        field: 'Sales',
+        title: 'Sales',
+        width: 'auto'
+      },
+      {
+        field: 'Profit',
+        title: 'Profit',
+        width: 'auto'
+      }
+    ];
+
+    const option = {
+      records: data,
+      columns,
+      widthMode: 'standard',
+      keyboardOptions: {
+        selectAllOnCtrlA: true,
+        copySelected: true
+      },
+      select: {
+        highlightMode: 'cross'
+      },
+      theme: VTable.themes.ARCO.extends({
+        selectionStyle: {
+          cellBgColor: 'rgba(130, 178, 245, 0.2)',
+          cellBorderLineWidth: 2,
+          inlineRowBgColor: 'rgb(160,207,245)',
+          inlineColumnBgColor: 'rgb(160,207,245)'
+        },
+        headerStyle: {
+          select: {
+            inlineRowBgColor: 'rgb(0,207,245)',
+            inlineColumnBgColor: 'rgb(0,207,245)'
+          }
+        }
+      })
+    };
+    tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+    window['tableInstance'] = tableInstance;
+  });
+```
diff --git a/docs/assets/demo/en/interaction/select.md b/docs/assets/demo/en/interaction/select.md
@@ -3,9 +3,8 @@ category: examples
 group: Interaction
 title: Select cell
 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/select.png
-order: 4-1
 link: '../guide/interaction/select'
-option: keyboardOptions.selectAllOnCtrlA
+option: ListTable#keyboardOptions
 ---
 
 # Select cell
@@ -20,96 +19,94 @@ Clicking on the header cell will select the entire row or column by default. If
 
 ## Key Configurations
 
-*   `keyboardOptions: {
-        selectAllOnCtrlA: true,
-        copySelected: true
-    }`
-    Enable the ctrl + A optional function and shortcut to copy the selected content.
+- `keyboardOptions: {
+    selectAllOnCtrlA: true,
+    copySelected: true
+}`
+  Enable the ctrl + A optional function and shortcut to copy the selected content.
 
 ## Code demo
 
 ```javascript livedemo template=vtable
-
-let  tableInstance;
-  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
-    .then((res) => res.json())
-    .then((data) => {
-
-const columns =[
-    {
-        "field": "Order ID",
-        "title": "Order ID",
-        "width": "auto"
-    },
-    {
-        "field": "Customer ID",
-        "title": "Customer ID",
-        "width": "auto"
-    },
-    {
-        "field": "Product Name",
-        "title": "Product Name",
-        "width": "auto"
-    },
-    {
-        "field": "Category",
-        "title": "Category",
-        "width": "auto"
-    },
-    {
-        "field": "Sub-Category",
-        "title": "Sub-Category",
-        "width": "auto"
-    },
-    {
-        "field": "Region",
-        "title": "Region",
-        "width": "auto"
-    },
-    {
-        "field": "City",
-        "title": "City",
-        "width": "auto"
-    },
-    {
-        "field": "Order Date",
-        "title": "Order Date",
-        "width": "auto"
-    },
-    {
-        "field": "Quantity",
-        "title": "Quantity",
-        "width": "auto"
-    },
-    {
-        "field": "Sales",
-        "title": "Sales",
-        "width": "auto"
-    },
-    {
-        "field": "Profit",
-        "title": "Profit",
-        "width": "auto"
-    }
-];
-
-const option = {
-  records:data,
-  columns,
-  widthMode:'standard',
-  keyboardOptions: {
-      selectAllOnCtrlA: true,
-      copySelected: true
-  },
-  theme:VTable.themes.ARCO.extends({
-      selectionStyle:{
-        cellBorderLineWidth: 2,
-        cellBorderColor: '#9900ff',
-        cellBgColor: 'rgba(153,0,255,0.2)',
+let tableInstance;
+fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
+  .then(res => res.json())
+  .then(data => {
+    const columns = [
+      {
+        field: 'Order ID',
+        title: 'Order ID',
+        width: 'auto'
+      },
+      {
+        field: 'Customer ID',
+        title: 'Customer ID',
+        width: 'auto'
+      },
+      {
+        field: 'Product Name',
+        title: 'Product Name',
+        width: 'auto'
+      },
+      {
+        field: 'Category',
+        title: 'Category',
+        width: 'auto'
+      },
+      {
+        field: 'Sub-Category',
+        title: 'Sub-Category',
+        width: 'auto'
+      },
+      {
+        field: 'Region',
+        title: 'Region',
+        width: 'auto'
+      },
+      {
+        field: 'City',
+        title: 'City',
+        width: 'auto'
+      },
+      {
+        field: 'Order Date',
+        title: 'Order Date',
+        width: 'auto'
+      },
+      {
+        field: 'Quantity',
+        title: 'Quantity',
+        width: 'auto'
+      },
+      {
+        field: 'Sales',
+        title: 'Sales',
+        width: 'auto'
+      },
+      {
+        field: 'Profit',
+        title: 'Profit',
+        width: 'auto'
       }
-  })
-};
-tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
-window['tableInstance'] = tableInstance;
-    })
+    ];
+
+    const option = {
+      records: data,
+      columns,
+      widthMode: 'standard',
+      keyboardOptions: {
+        selectAllOnCtrlA: true,
+        copySelected: true
+      },
+      theme: VTable.themes.ARCO.extends({
+        selectionStyle: {
+          cellBorderLineWidth: 2,
+          cellBorderColor: '#9900ff',
+          cellBgColor: 'rgba(153,0,255,0.2)'
+        }
+      })
+    };
+    tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+    window['tableInstance'] = tableInstance;
+  });
 ```
diff --git a/docs/assets/demo/menu.json b/docs/assets/demo/menu.json
@@ -556,6 +556,13 @@
             "option": ""
           }
         },
+        {
+          "path": "select-highlight",
+          "title": {
+            "zh": "选中整行高亮",
+            "en": "Select Highlight"
+          }
+        },
         {
           "path": "hover-inline-cross",
           "title": {