{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/show/list","result":{"data":{"current":{"frontmatter":{"title":"List","order":75,"brief":"Lists display a set of related contents","icon":"doc-list"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#template","title":"Template"},{"url":"#layout","title":"Layout"},{"url":"#grid","title":"Grid"},{"url":"#responsive-list","title":"Responsive List"},{"url":"#load-more","title":"Load More"},{"url":"#scroll-to-load","title":"Scroll to Load"},{"url":"#scroll-to-load-infinite-lists","title":"Scroll to Load Infinite Lists"},{"url":"#drag-sort","title":"Drag Sort"},{"url":"#with-pagination","title":"With Pagination"},{"url":"#with-filter","title":"With filter"},{"url":"#add-delete-item","title":"Add delete item"},{"url":"#single-or-multiple-selection","title":"Single or multiple selection"},{"url":"#keyboard-events","title":"Keyboard events"}]},{"url":"#api-reference","title":"API reference","items":[{"url":"#list","title":"List"},{"url":"#listgrid-props","title":"Listgrid props"},{"url":"#listitem","title":"List.Item"}]},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"localeCode\": \"en-US\",\n \"order\": 75,\n \"category\": \"Show\",\n \"title\": \"List\",\n \"subTitle\": \"List\",\n \"icon\": \"doc-list\",\n \"dir\": \"column\",\n \"brief\": \"Lists display a set of related contents\"\n};\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Demos\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"How to import\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"import\",\n \"import\": true\n }, \"import { List } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Basic Usage\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"size\"), \" to size list. Supported values include \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"large\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"default\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Small\"), \". Header and Footer customized.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React from 'react';\\nimport { List } from '@douyinfe/semi-ui';\\n\\nfunction SimpleList() {\\n const data = [\\n 'Do not go gentle into that good night,',\\n 'Old age should burn and rave at close of day;',\\n 'Rage, rage against the dying of the light.',\\n ];\\n\\n return (\\n
\\n
\\n

Default Size

\\n Header
}\\n footer={
Footer
}\\n bordered\\n dataSource={data}\\n renderItem={item => {item}}\\n />\\n
\\n
\\n
\\n

Small Size

\\n Header
}\\n footer={
Footer
}\\n bordered\\n dataSource={data}\\n renderItem={item => {item}}\\n />\\n \\n
\\n
\\n

Large Size

\\n Header
}\\n footer={
Footer
}\\n bordered\\n dataSource={data}\\n renderItem={item => {item}}\\n />\\n \\n \\n );\\n}\\n\\nrender(SimpleList);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Template\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"List.Item has a built-in template consisting of: \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"header\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"main\"), \", and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"extra\"), \". The alignment of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"header\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"main\"), \" set by \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"align\"), \" properties using one of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flex-start\"), \"(default), \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flex-end\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"center\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"baseline\"), \", and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"stretch\"), \" .\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React from 'react';\\nimport { List, ButtonGroup, Button, Avatar } from '@douyinfe/semi-ui';\\n\\nfunction ContentList() {\\n const data = [\\n // eslint-disable-next-line react/jsx-key\\n \\n {`Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is\\n heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}\\n

,\\n // eslint-disable-next-line react/jsx-key\\n

\\n Come what come may, time and the hour run through the roughest day.\\n

,\\n // eslint-disable-next-line react/jsx-key\\n

\\n {`Where shall we three meet again in thunder, lightning, or in rain? When the hurlyburly's done, when the\\n battle's lost and won`}\\n

,\\n ];\\n\\n return (\\n
\\n (\\n SE}\\n main={\\n
\\n Example\\n {item}\\n
\\n }\\n extra={\\n \\n \\n \\n \\n }\\n />\\n )}\\n />\\n
\\n );\\n}\\n\\nrender(ContentList);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Layout\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"layout\"), \" property to set list layout, one of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vertical\"), \"(default) or \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"horizontal\"), \".\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React from 'react';\\nimport { List, Avatar } from '@douyinfe/semi-ui';\\n\\nfunction LayoutList() {\\n const data = [\\n {\\n title: 'Title 1',\\n color: 'light-blue',\\n },\\n {\\n title: 'Title 2',\\n color: 'grey',\\n },\\n {\\n title: 'Title 3',\\n color: 'light-green',\\n },\\n ];\\n\\n return (\\n
\\n (\\n SE}\\n main={\\n
\\n {item.title}\\n

\\n {` Life's but a walking shadow, a poor player, that struts and frets his hour upon\\n the stage, and then is heard no more; it is a tale told by an idiot, full of\\n sound and fury, signifying nothing.`}\\n

\\n
\\n }\\n />\\n )}\\n />\\n
\\n );\\n}\\n\\nrender(LayoutList);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Grid\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"grid\"), \" property to set grid layout. Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"span\"), \" to set the number of occupying spaces for each item and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"gutter\"), \" for spacing between items.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React from 'react';\\nimport { List, Descriptions, Rating, ButtonGroup, Button } from '@douyinfe/semi-ui';\\n\\nfunction LayoutList() {\\n const data = [\\n {\\n title: 'Platform A',\\n rating: 4.5,\\n feedbacks: 124,\\n },\\n {\\n title: 'Platform B',\\n rating: 4,\\n feedbacks: 108,\\n },\\n {\\n title: 'Platform C',\\n rating: 4.5,\\n feedbacks: 244,\\n },\\n {\\n title: 'Platform D',\\n feedbacks: 189,\\n },\\n ];\\n\\n const style = {\\n border: '1px solid var(--semi-color-border)',\\n backgroundColor: 'var(--semi-color-bg-2)',\\n borderRadius: '3px',\\n paddingLeft: '20px',\\n };\\n\\n return (\\n
\\n (\\n \\n
\\n

{item.title}

\\n },\\n { key: 'Feedbacks', value: item.feedbacks },\\n ]}\\n />\\n
\\n \\n \\n \\n \\n
\\n
\\n \\n )}\\n />\\n
\\n );\\n}\\n\\nrender(LayoutList);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Responsive List\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Refer to \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/basic/grid\"\n }, \"Grid\"), \" for responsive dimensions.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React from 'react';\\nimport { List, Descriptions, Rating, ButtonGroup, Button } from '@douyinfe/semi-ui';\\n\\nfunction Responsive() {\\n const data = [\\n {\\n title: 'Platform A',\\n rating: 4.5,\\n feedbacks: 124,\\n },\\n {\\n title: 'Platform B',\\n rating: 4,\\n feedbacks: 108,\\n },\\n {\\n title: 'Platform C',\\n rating: 3.5,\\n feedbacks: 244,\\n },\\n {\\n title: 'Platform D',\\n feedbacks: 189,\\n },\\n {\\n title: 'Platform E',\\n rating: 3,\\n feedbacks: 128,\\n },\\n {\\n title: 'Platform D',\\n rating: 4,\\n feedbacks: 156,\\n },\\n ];\\n\\n const style = {\\n border: '1px solid var(--semi-color-border)',\\n backgroundColor: 'var(--semi-color-bg-2)',\\n borderRadius: '3px',\\n paddingLeft: '20px',\\n margin: '8px 2px',\\n };\\n\\n return (\\n
\\n (\\n \\n
\\n

{item.title}

\\n },\\n { key: 'Feedbacks', value: item.feedbacks },\\n ]}\\n />\\n
\\n \\n \\n \\n \\n
\\n
\\n \\n )}\\n />\\n
\\n );\\n}\\n\\nrender(Responsive);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Load More\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"loadMore\"), \" to achieve loading state for more incoming contents.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React, { useState, useEffect, useRef, useCallback } from 'react';\\nimport { List, Skeleton, Button, Avatar } from '@douyinfe/semi-ui';\\n\\nfunction LoadMoreList() {\\n const count = 3;\\n const data = [];\\n for (let i = 0; i < 40; i++) {\\n data.push({\\n color: 'grey',\\n title: `Semi Design Title ${i}`,\\n loading: false,\\n });\\n }\\n const dataRef = useRef(data);\\n const countRef = useRef(0);\\n\\n const [loading, setLoading] = useState(false);\\n const [dataSource, setDataSource] = useState([]);\\n const [list, setList] = useState([]);\\n const [noMore, setNoMore] = useState(false);\\n\\n const fetchData = useCallback(() => {\\n let placeholders = [0, 1, 2].map(key => ({ loading: true }));\\n setLoading(true);\\n setList(prevList => [...prevList, ...placeholders]);\\n return new Promise((res, rej) => {\\n setTimeout(() => {\\n let newDataSource = dataRef.current.slice(countRef.current * count, countRef.current * count + count);\\n res(newDataSource);\\n }, 1000);\\n }).then(newDataSource => {\\n setDataSource(prevData => {\\n let newData = [...prevData, ...newDataSource];\\n setLoading(false);\\n setList(newData);\\n setNoMore(!newDataSource.length);\\n return newData;\\n });\\n });\\n }, []);\\n\\n useEffect(() => {\\n fetchData();\\n }, [fetchData]);\\n\\n const onLoadMore = () => {\\n countRef.current++;\\n fetchData();\\n };\\n\\n const loadMore =\\n !loading && !noMore ? (\\n \\n \\n \\n ) : null;\\n\\n const placeholder = (\\n \\n \\n
\\n \\n \\n
\\n \\n );\\n return (\\n (\\n \\n SE}\\n main={\\n
\\n {item.title}\\n

\\n Create a consistent, good-looking, easy-to-use, and efficient user experience\\n with a user-centric, content-first, and human-friendly design system\\n

\\n
\\n }\\n />\\n \\n )}\\n />\\n );\\n}\\n\\nrender(LoadMoreList);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Scroll to Load\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can integrate \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/CassetteRocks/react-infinite-scroller\"\n }, \"react-infinite-scroller\"), \" to implement scrolling load list. Recommended interaction could be reveal a loadmore button after three scrolling loads.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true hideInDSM\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\",\n \"hideInDSM\": true\n }, \"import React, { useState, useEffect, useRef, useCallback } from 'react';\\nimport { List, Avatar, Spin, Button } from '@douyinfe/semi-ui';\\nimport InfiniteScroll from 'react-infinite-scroller';\\n\\nfunction ScrollLoad() {\\n const count = 5;\\n const dataList = [];\\n for (let i = 0; i < 100; i++) {\\n dataList.push({\\n color: 'grey',\\n title: `Semi Design Title ${i}`,\\n loading: false,\\n });\\n }\\n const dataRef = useRef(dataList);\\n const countRef = useRef(0);\\n\\n const [loading, setLoading] = useState(false);\\n const [dataSource, setDataSource] = useState([]);\\n const [hasMore, setHasMore] = useState(true);\\n\\n const fetchData = useCallback(() => {\\n setLoading(true);\\n return new Promise((res, rej) => {\\n setTimeout(() => {\\n let newDataSource = dataRef.current.slice(countRef.current * count, countRef.current * count + count);\\n res(newDataSource);\\n }, 1000);\\n }).then(newDataSource => {\\n setDataSource(prevData => {\\n let newData = [...prevData, ...newDataSource];\\n countRef.current++;\\n setLoading(false);\\n setHasMore(!!newDataSource.length);\\n return newData;\\n });\\n });\\n }, []);\\n\\n useEffect(() => {\\n fetchData();\\n }, [fetchData]);\\n\\n const showLoadMore = countRef.current % 4 === 0;\\n const loadMore =\\n !loading && hasMore && showLoadMore ? (\\n \\n \\n \\n ) : null;\\n\\n return (\\n \\n \\n (\\n SE}\\n main={\\n
\\n \\n {item.title}\\n \\n

\\n Create a consistent, good-looking, easy-to-use, and efficient user\\n experience with a user-centric, content-first, and human-friendly design\\n system\\n

\\n
\\n }\\n />\\n )}\\n />\\n {loading && hasMore && (\\n
\\n \\n
\\n )}\\n \\n \\n );\\n}\\n\\nrender(ScrollLoad);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Scroll to Load Infinite Lists\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can integrate \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/bvaughn/react-virtualized\"\n }, \"react-virtualized\"), \" to implement infinite scrolling lists with virtualization to improve the performance for large amounts of data.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true hideInDSM\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\",\n \"hideInDSM\": true\n }, \"import React, { useState, useRef, useCallback } from 'react';\\nimport { List, Avatar } from '@douyinfe/semi-ui';\\nimport { InfiniteLoader, AutoSizer } from 'react-virtualized';\\nimport VList from 'react-virtualized/dist/commonjs/List';\\n\\nfunction VirtualizedScroll() {\\n const dataList = [];\\n for (let i = 0; i < 50; i++) {\\n dataList.push({\\n color: 'grey',\\n title: `Semi Design Title ${i}`,\\n });\\n }\\n const dataRef = useRef(dataList);\\n\\n const [dataSource, setDataSource] = useState([]);\\n const [loadedRowsMap, setLoadedRowsMap] = useState({});\\n const [loadingRowCount, setLoadingRowCount] = useState(0);\\n\\n const statusLoading = 0;\\n const statusLoaded = 1;\\n const loadLimit = dataRef.current.length;\\n\\n const fetchData = useCallback((startIndex, stopIndex) => {\\n return new Promise((res, rej) => {\\n setTimeout(() => {\\n let newDataSource = dataRef.current.slice(startIndex, stopIndex + 1);\\n res(newDataSource);\\n }, 1000);\\n }).then(newDataSource => {\\n setDataSource(prevData => {\\n let newData = [...prevData, ...newDataSource];\\n const increment = stopIndex - startIndex + 1;\\n const newLoadedRowsMap = { ...loadedRowsMap };\\n for (let i = startIndex; i <= stopIndex; i++) {\\n newLoadedRowsMap[i] = statusLoaded;\\n }\\n setLoadedRowsMap(newLoadedRowsMap);\\n setLoadingRowCount(prev => prev - increment);\\n return newData;\\n });\\n });\\n }, [loadedRowsMap]);\\n\\n const handleInfiniteOnLoad = useCallback(({ startIndex, stopIndex }) => {\\n const increment = stopIndex - startIndex + 1;\\n if (stopIndex >= loadLimit || loadingRowCount > 0) {\\n return;\\n }\\n const newLoadedRowsMap = { ...loadedRowsMap };\\n for (let i = startIndex; i <= stopIndex; i++) {\\n newLoadedRowsMap[i] = statusLoading;\\n }\\n setLoadedRowsMap(newLoadedRowsMap);\\n setLoadingRowCount(prev => prev + increment);\\n return fetchData(startIndex, stopIndex);\\n }, [loadLimit, loadingRowCount, loadedRowsMap, fetchData]);\\n\\n const isRowLoaded = useCallback(({ index }) => {\\n return !!loadedRowsMap[index];\\n }, [loadedRowsMap]);\\n\\n const renderItem = useCallback(({ index, key, style }) => {\\n const item = dataSource[index];\\n\\n if (!item) {\\n return;\\n }\\n const content = (\\n SE}\\n main={\\n
\\n {item.title}\\n

\\n Create a consistent, good-looking, easy-to-use, and efficient user experience with a\\n user-centric, content-first, and human-friendly design system\\n

\\n
\\n }\\n />\\n );\\n return content;\\n }, [dataSource]);\\n\\n const height = 500;\\n return (\\n \\n \\n {({ onRowsRendered, registerChild }) => (\\n \\n {({ width }) => (\\n \\n )}\\n \\n )}\\n \\n \\n );\\n}\\n\\nrender(VirtualizedScroll);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Drag Sort\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can integrate \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/clauderic/dnd-kit/tree/master\"\n }, \"dnd-kit\"), \" to implement drag and drop sort.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"hideInDSM\": true\n }, \"import React, { useState } from 'react';\\nimport { List, Avatar } from '@douyinfe/semi-ui';\\nimport { DndContext, PointerSensor, MouseSensor, useSensors, useSensor } from '@dnd-kit/core';\\nimport { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';\\nimport { restrictToVerticalAxis } from '@dnd-kit/modifiers';\\nimport { CSS as cssDndKit } from '@dnd-kit/utilities';\\nimport classNames from 'classnames';\\n\\n() => {\\n const data = [\\n {\\n id: 1, // \\u6DFB\\u52A0\\u552F\\u4E00id\\n title: 'Semi Design Title 1',\\n color: 'red',\\n },\\n {\\n id: 2,\\n title: 'Semi Design Title 2',\\n color: 'grey',\\n },\\n {\\n id: 3,\\n title: 'Semi Design Title 3',\\n color: 'light-green',\\n },\\n {\\n id: 4,\\n title: 'Semi Design Title 4',\\n color: 'light-blue',\\n },\\n {\\n id: 5,\\n title: 'Semi Design Title 5',\\n color: 'pink',\\n },\\n ];\\n const [listItems, setListItems] = useState(data);\\n\\n const sensors = useSensors(\\n useSensor(MouseSensor, {\\n activationConstraint: { distance: 1 },\\n })\\n );\\n\\n const handleDragEnd = event => {\\n const { active, over } = event;\\n if (active.id !== over.id) {\\n setListItems((items) => {\\n const oldIndex = items.findIndex(item => item.id === active.id);\\n const newIndex = items.findIndex(item => item.id === over.id);\\n return arrayMove(items, oldIndex, newIndex);\\n });\\n }\\n };\\n\\n const ListItem = (props) => {\\n const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver } = useSortable({\\n id: props['id'],\\n });\\n\\n const styles = {\\n ...props.style,\\n transform: cssDndKit.Transform.toString(transform),\\n transition,\\n border: '1px solid var(--semi-color-border)',\\n marginBottom: 12,\\n cursor: 'grabbing',\\n ...(isDragging ? { zIndex: 999, position: 'relative', backgroundColor: 'var(--semi-color-bg-0)' } : {}),\\n\\n };\\n\\n \\n const itemCls = classNames(\\n {\\n ['isDragging']: isDragging,\\n ['isOver']: isOver,\\n }\\n );\\n\\n return (\\n \\n \\n \\n );\\n };\\n\\n const RenderDraggable = (item, id) => {\\n return (\\n SE}\\n main={\\n
\\n {item.title}\\n

\\n Semi Design\\n \\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u5305\\u542B\\u8BBE\\u8BA1\\u8BED\\u8A00\\u4EE5\\u53CA\\u4E00\\u6574\\u5957\\u53EF\\u590D\\u7528\\u7684\\u524D\\u7AEF\\u7EC4\\u4EF6\\uFF0C\\u5E2E\\u52A9\\u8BBE\\u8BA1\\u5E08\\u4E0E\\u5F00\\u53D1\\u8005\\u66F4\\u5BB9\\u6613\\u5730\\u6253\\u9020\\u9AD8\\u8D28\\u91CF\\u7684\\u3001\\u7528\\u6237\\u4F53\\u9A8C\\u4E00\\u81F4\\u7684\\u3001\\u7B26\\u5408\\u8BBE\\u8BA1\\u89C4\\u8303\\u7684\\n Web \\u5E94\\u7528\\u3002\\n

\\n
\\n }\\n />\\n );\\n };\\n\\n return (\\n
\\n \\n data.id)} strategy={verticalListSortingStrategy}>\\n \\n \\n \\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"With Pagination\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can use Pagination in combination to achieve a paged List\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"hideInDSM\": true\n }, \"import React, { useState } from 'react';\\nimport { List, Pagination } from '@douyinfe/semi-ui';\\n\\n() => {\\n const data = [\\n 'Siege',\\n 'The ordinary world',\\n 'Three Body',\\n 'Snow in the Snow',\\n 'Saharan story',\\n 'Those things in the Ming Dynasty',\\n 'A little monk of Zen',\\n 'Dune',\\n 'The courage to be hated',\\n 'Crime and Punishment',\\n 'Moon and sixpence',\\n 'The silent majority',\\n 'First person singular',\\n ];\\n\\n const [page, onPageChange] = useState(1);\\n\\n let pageSize = 4;\\n\\n const getData = (page) => {\\n let start = (page - 1) * pageSize;\\n let end = page * pageSize;\\n return data.slice(start, end);\\n };\\n\\n return (\\n
\\n
\\n {item}}\\n />\\n onPageChange(cPage)} />\\n
\\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"With filter\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can use it by assembling Input to filter the List\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"\": true,\n \"hideInDSM\": true\n }, \"import React, { useState } from 'react';\\nimport { List, Input } from '@douyinfe/semi-ui';\\nimport { IconSearch } from '@douyinfe/semi-icons';\\n\\n() => {\\n const data = [\\n 'Siege',\\n 'The ordinary world',\\n 'Three Body',\\n 'Snow in the Snow',\\n 'Saharan story',\\n 'Those things in the Ming Dynasty',\\n 'A little monk of Zen',\\n 'Dune',\\n 'The courage to be hated',\\n 'Crime and Punishment',\\n ];\\n\\n const [list, setList] = useState(data);\\n\\n const onSearch = (string) => {\\n let newList;\\n if (string) {\\n newList = data.filter(item => item.includes(string));\\n } else {\\n newList = data;\\n }\\n setList(newList);\\n };\\n\\n return (\\n
\\n
\\n onSearch(v.target.value)} onChange={(v) => !v ? onSearch() : null} placeholder='search' prefix={} />}\\n size='small'\\n style={{ flexBasis: '100%', flexShrink: 0, borderBottom: '1px solid var(--semi-color-border)' }}\\n renderItem={item =>\\n {item}\\n }\\n />\\n
\\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Add delete item\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"hideInDSM\": true\n }, \"import React, { useState } from 'react';\\nimport { List, Input, Button } from '@douyinfe/semi-ui';\\nimport { IconMinusCircle, IconPlusCircle } from '@douyinfe/semi-icons';\\n\\n() => {\\n const data = [\\n 'Siege',\\n 'The ordinary world',\\n 'Three Body',\\n 'Snow in the Snow',\\n 'Saharan story',\\n 'Those things in the Ming Dynasty',\\n 'A little monk of Zen',\\n 'Dune',\\n 'The courage to be hated',\\n 'Crime and Punishment',\\n 'Moon and sixpence',\\n 'The silent majority',\\n 'First person singular',\\n ];\\n \\n const [list, setList] = useState(data.slice(0, 8));\\n\\n const updateList = (item) => {\\n let newList;\\n if (item) {\\n newList = list.filter(i => item !== i);\\n } else {\\n newList = list.concat(data.slice(list.length, list.length + 1));\\n }\\n setList(newList);\\n };\\n\\n return (\\n
\\n
\\n \\n
\\n
\\n }\\n />\\n
updateList()}>\\n \\n Add book\\n
\\n
\\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Single or multiple selection\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can enhance the List into a list selector by combining Radio or Checkbox\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"hideInDSM\": true\n }, \"\\nimport React, { useState } from 'react';\\nimport { List, Input, Button, Checkbox, Radio, RadioGroup, CheckboxGroup } from '@douyinfe/semi-ui';\\n\\n() => {\\n const data = [\\n 'Siege',\\n 'The ordinary world',\\n 'Three Body',\\n 'Snow in the Snow',\\n 'Saharan story',\\n 'Those things in the Ming Dynasty',\\n 'A little monk of Zen',\\n 'Dune',\\n 'The courage to be hated',\\n 'Crime and Punishment',\\n 'Moon and sixpence',\\n 'The silent majority',\\n 'First person singular',\\n ];\\n\\n const [page, onPageChange] = useState(1);\\n const [checkboxVal, setCV] = useState([...data[0]]);\\n const [radioVal, setRV] = useState(data[0]);\\n\\n let pageSize = 8;\\n\\n const getData = (page) => {\\n let start = (page - 1) * pageSize;\\n let end = page * pageSize;\\n return data.slice(start, end);\\n };\\n\\n return (\\n
\\n
\\n setCV(value)}>\\n {item}}\\n />\\n \\n
\\n
\\n setRV(e.target.value)}>\\n {item}}\\n />\\n \\n
\\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Keyboard events\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can monitor the keyboard events of the corresponding keys by yourself to realize the selection of different items. As in the following example, you can use the up and down arrow keys to select different items\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"hideInDSM\": true\n }, \"import React, { useState, useRef } from 'react';\\nimport { List, Input, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n const data = [\\n 'Siege',\\n 'The ordinary world',\\n 'Three Body',\\n 'Snow in the Snow ',\\n 'Saharan story',\\n 'Those things in the Ming Dynasty',\\n 'A little monk of Zen',\\n 'Dune',\\n 'The courage to be hated',\\n 'Crime and Punishment',\\n 'Moon and sixpence',\\n 'The silent majority',\\n 'First person singular',\\n ];\\n\\n const [list, setList] = useState(data.slice(0, 10));\\n const [hoverIndex, setHi] = useState(-1);\\n const i = useRef(-1);\\n\\n let changeIndex = (offset) => {\\n let currentIndex = i.current;\\n let index = currentIndex + offset;\\n if (index < 0) {\\n index = list.length - 1;\\n }\\n if (index >= list.length) {\\n index = 0;\\n }\\n i.current = index;\\n setHi(index);\\n };\\n useEffect(() => {\\n let keydownHandler = (event) => {\\n let key = event.keyCode;\\n switch (key) {\\n case 38: // KeyCode.UP\\n event.preventDefault();\\n changeIndex(-1);\\n break;\\n case 40: // KeyCode.DOWN\\n event.preventDefault();\\n changeIndex(1);\\n break;\\n default:\\n break;\\n }\\n };\\n window.addEventListener('keydown', keydownHandler);\\n return () => {\\n window.removeEventListener('keydown', keydownHandler);\\n };\\n }, []);\\n\\n return (\\n
\\n
\\n \\n {item}\\n }\\n />\\n
\\n
\\n );\\n};\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"The custom styles involved in the Demo of the above book list example are as follows\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-scss\"\n }, \".component-list-demo-booklist {\\n .list-item {\\n &:hover {\\n background-color: var(--semi-color-fill-0);\\n }\\n &:active {\\n background-color: var(--semi-color-fill-1);\\n }\\n }\\n}\\n\\n\\nbody > .component-list-demo-drag-item {\\n font-size: 14px;\\n}\\n\\n.component-list-demo-booklist-active-item {\\n background-color: var(--semi-color-fill-0);\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"API reference\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"List\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Properties\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"bordered\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Toggle whether to display border\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"false\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"className\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Class name\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"dataSource\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"List data source\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"any[]\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"emptyContent\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Displayed content when empty\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"footer\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Footer of list\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Grid configuration\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/basic/grid#API-reference\"\n }, \"Grid\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"header\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Header of list\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"layout\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Layout, one of \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"vertical\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"vertical\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"vertical\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"loadMore\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Loadmore button\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"loading\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Toggle whether to display \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"Spin\"), \" when loading\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"false\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"renderItem\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"When using dataSource, you can customize rendering with renderItem\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(item, ind) => ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"size\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Size, one of \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"small\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"default\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"large\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"default\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"split\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Toggle whether to display split line\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"true\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Inline style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onClick\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback function when click an item\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onRightClick\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback function when right click an item\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Listgrid props\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Other grid properties are also supported. Refer to \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/basic/grid\"\n }, \"Grid\"), \".\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Properties\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"span\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Number of grid spaces\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"gutter\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Grid spacing\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"xs\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"< 576px\"), \" responsive grid, a number or an object containing other attributes\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\", \"|\", \"object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"sm\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"\\u2265 576px\"), \" responsive grid, a number or an object containing other properties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\", \"|\", \"object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"md\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"\\u2265 768px\"), \" responsive grid, a number or an object containing other properties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\", \"|\", \"object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"lg\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"\\u2265 992px\"), \" responsive grid, a number or an object containing other properties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\", \"|\", \"object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"xl\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"\\u2265 1200px\"), \" responsive grid, a number or an object containing other properties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\", \"|\", \"object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"xxl\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"\\u2265 1600px\"), \" responsive grid, a number or an object containing other properties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\", \"|\", \"object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"List.Item\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Properties\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"align\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Vertical alignment of header and main, one of \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"flex-start\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"flex-end\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"center\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"baseline\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"stretch\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"flex-start\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"className\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Class name\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"extra\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Additional content\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"header\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"List item header content\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"main\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"List item body content\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onClick\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback function when click an item\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onRightClick\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback function when right click an item\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Inline style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Content Guidelines\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Capitalize the first letter\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"do not follow punctuation at the end\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Grammatical parallelism: mixed use of active and passive, declarative and imperative sentences\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Design Tokens\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/show/list","next":{"fields":{"slug":"zh-CN/show/list"},"id":"b2b61e36-cc50-531d-9ce3-4e400c5cb609","frontmatter":{"title":"List 列表","localeCode":"zh-CN","icon":"doc-list","showNew":null}},"previous":{"fields":{"slug":"zh-CN/show/cropper"},"id":"17ab92b2-fd9e-5884-a4c1-cbb2ed24d213","frontmatter":{"title":"Cropper 图片裁切","localeCode":"zh-CN","icon":"doc-cropper","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}