Skip to content

Commit

Permalink
Update grid-list.mdx
Browse files Browse the repository at this point in the history
  • Loading branch information
@wenzhuo2022
wenzhuo2022 authored Nov 21, 2023
1 parent 1cab0ea commit 5b78a3e
Showing 1 changed file with 2 additions and 4 deletions.
6 changes: 2 additions & 4 deletions docs/grid-list.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ height: 0
| **Property name** | **Type** | **Description** | Use example |
| ------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- |
| selectedItem | Object | You can select an item in the Grid List and retrieve its data using the`selectedItem`property. When you select the nth item, the value of the`selectedItem`property will be the nth item in the data source array that you have set for the Grid List. For example, if your data source (referred to as dataSource) is as follows:`[{"name":"Andrew"},{"name":"Mike"},{"name":"Emma"}]`, and you select the third item, the`selectedItem`property will actually be`dataSource[2]`, which is`{"name":"Emma"}`. Therefore, you can further access the value corresponding to a specific key by using`gridList1.selectedItem.name`. | `{{gridList1.selectedItem.name}}`
|
| currentItem | Object | This property can**only be used in the component of Grid List in the configuration**and **does not need to be called via displayName** . When you add a Text component to the Grid List component, it is expected that this Text component will display the name of this segment in the Data source. To achieve this, you can set it as`{{currentItem.name}}`. | `{{currentItem.name}}` |

## Configurable properties
Expand All @@ -45,7 +44,6 @@ height: 0
| **Property name** | **Type** | **Description** | **Example** |
| ------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| Data source | Array of objects | This is used to set the data source for the Grid List component. The expected data format is` [{ "key": "value", "key": "value" }, { "key": "value", "key": "value" },... { "key": "value", "key": "value" }]`. You can query your data source using the Action, and the return value of the action will be used as the data source. Alternatively, you can directly input into the data source. When inputting, please make sure to use`{{}}`to enclose the array. | `{{mysql1.data}}`
|

### Interaction

Expand All @@ -66,8 +64,7 @@ height: 0

| **Property name** | **Type** | **Description** | Example |
| ------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| Column adaption | Selection
| We offer two modes: Fixed and Dynamic. In`Fixed`mode, the list is fixed. Resizing the browser window will only change the width of each column. In`Dynamic`mode, the list is not fixed, resizing the browser window will change both the width and the number of columns. Below this table, there are also illustrations of the two modes, which can provide a more visual understanding of the differences between the two modes. | -- |
| Column adaption | Selection|We offer two modes: Fixed and Dynamic. In`Fixed`mode, the list is fixed. Resizing the browser window will only change the width of each column. In`Dynamic`mode, the list is not fixed, resizing the browser window will change both the width and the number of columns. Below this table, there are also illustrations of the two modes, which can provide a more visual understanding of the differences between the two modes. | -- |
| Number of columns | Number | In Fixed mode, the configuration displays a fixed number of columns. | `{{3}}` |
| Min width of columns | Number | In the Dynamic mode, the configuration sets the minimum column width. We will use the component width/minimum column width to calculate the maximum number of columns that can be displayed currently. If it can not be evenly divided, the excess value will be distributed evenly to supplement each column width. | `{{300}}` |
| Item spacing | Number | Spacing between each column and row. | -- |
Expand All @@ -90,3 +87,4 @@ Event handler：https://docs.illacloud.com/event-handler
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Click item | When clicking on an item, trigger the corresponding event. For example, if one of the data in your data source is a URL, you can expect that clicking on the item will navigate to the URL associated with that item. In the event handler, you can select "go to URL" and set the value of the URL to`{{currentItem.url}}`. |
| Page change | During page switching, events are triggered. This is commonly used in the server-side pagination scenario. When the page changes, the action is executed again, immediately fetching the next or previous page of data. |

0 comments on commit 5b78a3e

Please sign in to comment.