{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/list","result":{"data":{"current":{"frontmatter":{"title":"List 列表","order":75,"brief":"基础列表组件","icon":"doc-list"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#模板用法","title":"模板用法"},{"url":"#布局","title":"布局"},{"url":"#栅格列表","title":"栅格列表"},{"url":"#响应式的栅格列表","title":"响应式的栅格列表"},{"url":"#加载更多","title":"加载更多"},{"url":"#滚动加载","title":"滚动加载"},{"url":"#滚动加载无限长列表","title":"滚动加载无限长列表"},{"url":"#拖拽排序","title":"拖拽排序"},{"url":"#带分页器","title":"带分页器"},{"url":"#带筛选器","title":"带筛选器"},{"url":"#添加删除项","title":"添加删除项"},{"url":"#单选或多选","title":"单选或多选"},{"url":"#响应键盘事件","title":"响应键盘事件"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#list","title":"List"},{"url":"#list-grid-props","title":"List grid props"},{"url":"#listitem","title":"List.Item"}]},{"url":"#文案规范","title":"文案规范"},{"url":"#设计变量","title":"设计变量"}]},"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\": \"zh-CN\",\n \"order\": 75,\n \"category\": \"展示类\",\n \"title\": \"List 列表\",\n \"icon\": \"doc-list\",\n \"dir\": \"column\",\n \"noInline\": true,\n \"brief\": \"基础列表组件\"\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 }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u5982\\u4F55\\u5F15\\u5165\"), 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 }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u5217\\u8868\\u7684\\u57FA\\u672C\\u7528\\u6CD5\\u3002\\u53EF\\u4EE5\\u901A\\u8FC7 size \\u8BBE\\u7F6E\\u5C3A\\u5BF8\\uFF0C\\u652F\\u6301\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"large\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"default\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"small\"), \"\\u3002\\u53EF\\u8BBE\\u7F6E header \\u548C footer\\uFF0C\\u6765\\u81EA\\u5B9A\\u4E49\\u5217\\u8868\\u5934\\u90E8\\u548C\\u5C3E\\u90E8\\u3002\"), 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 '\\u4ECE\\u660E\\u5929\\u8D77\\uFF0C\\u505A\\u4E00\\u4E2A\\u5E78\\u798F\\u7684\\u4EBA',\\n '\\u5582\\u9A6C\\uFF0C\\u5288\\u67F4\\uFF0C\\u5468\\u6E38\\u4E16\\u754C',\\n '\\u4ECE\\u660E\\u5929\\u8D77\\uFF0C\\u5173\\u5FC3\\u7CAE\\u98DF\\u548C\\u852C\\u83DC',\\n '\\u6211\\u6709\\u4E00\\u6240\\u623F\\u5B50\\uFF0C\\u9762\\u671D\\u5927\\u6D77\\uFF0C\\u6625\\u6696\\u82B1\\u5F00',\\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

Small Size

\\n Header
}\\n footer={
Footer
}\\n bordered\\n dataSource={data}\\n renderItem={item => {item}}\\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 }, \"\\u6A21\\u677F\\u7528\\u6CD5\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u5217\\u8868\\u7684 List.Item \\u5185\\u7F6E\\u4E86\\u7B80\\u5355\\u7684\\u7ED3\\u6784\\u5305\\u542B\\uFF1Aheader\\uFF0Cmain \\u548C extra \\u3002\\u5176\\u4E2D header \\u548C main \\u7684\\u5BF9\\u9F50\\u65B9\\u5F0F\\u53EF\\u4EE5\\u901A\\u8FC7 align \\u5C5E\\u6027\\u8BBE\\u7F6E\\uFF0C\\u652F\\u6301 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flex-start\"), \"\\uFF08\\u9ED8\\u8BA4\\uFF09, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flex-end\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"center\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"baseline\"), \", \\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"stretch\"), \" \\u3002\"), 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, ButtonGroup, Button } from '@douyinfe/semi-ui';\\n\\nfunction ContentList() {\\n const data = [\\n // eslint-disable-next-line react/jsx-key\\n \\n Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u4E0E UED\\n \\u56E2\\u961F\\u5171\\u540C\\u8BBE\\u8BA1\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u3002\\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 // eslint-disable-next-line react/jsx-key\\n

\\n Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u4E0E UED\\n \\u56E2\\u961F\\u5171\\u540C\\u8BBE\\u8BA1\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u3002\\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 // eslint-disable-next-line react/jsx-key\\n

\\n Semi Design \\u4EE5\\u7528\\u6237\\u4E2D\\u5FC3\\u3001\\u5185\\u5BB9\\u4F18\\u5148\\u3001\\u8BBE\\u8BA1\\u4EBA\\u6027\\u5316\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u6253\\u9020\\u4E00\\u81F4\\u3001\\u597D\\u770B\\u3001\\u597D\\u7528\\u3001\\u9AD8\\u6548\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\\n

,\\n ];\\n\\n return (\\n
\\n (\\n SE}\\n main={\\n
\\n \\u793A\\u4F8B\\u6807\\u9898\\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 }, \"\\u5E03\\u5C40\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7 layout \\u5C5E\\u6027\\u53EF\\u4EE5\\u8BBE\\u7F6E\\u5217\\u8868\\u7684\\u5E03\\u5C40\\uFF0C\\u652F\\u6301\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vertical\"), \"\\uFF08\\u9ED8\\u8BA4\\uFF09\\u548C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"horizontal\"), \"\\u3002\"), 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: 'Semi Design Title 1',\\n color: 'light-blue',\\n },\\n {\\n title: 'Semi Design Title 2',\\n color: 'grey',\\n },\\n {\\n title: 'Semi Design Title 3',\\n color: 'light-green',\\n },\\n ];\\n\\n return (\\n
\\n (\\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 );\\n}\\n\\nrender(LayoutList);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u6805\\u683C\\u5217\\u8868\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7 grid \\u5C5E\\u6027\\u53EF\\u4EE5\\u5B9E\\u73B0\\u6805\\u683C\\u5217\\u8868\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"span\"), \" \\u53EF\\u8BBE\\u7F6E\\u6BCF\\u9879\\u7684\\u5360\\u683C\\u6570\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"gutter\"), \"\\u53EF\\u8BBE\\u7F6E\\u6805\\u683C\\u95F4\\u9694\\u3002\"), 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, ButtonGroup, Rating, Button } from '@douyinfe/semi-ui';\\n\\nfunction LayoutList() {\\n const data = [\\n {\\n title: 'Semi UI',\\n rating: 4.5,\\n feedbacks: 124,\\n },\\n {\\n title: 'Semi DSM',\\n rating: 4,\\n feedbacks: 108,\\n },\\n {\\n title: 'Semi D2C',\\n rating: 4.5,\\n feedbacks: 244,\\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: '\\u53CD\\u9988\\u6570', 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 }, \"\\u54CD\\u5E94\\u5F0F\\u7684\\u6805\\u683C\\u5217\\u8868\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u54CD\\u5E94\\u5F0F\\u7684\\u6805\\u683C\\u5217\\u8868\\u3002\\u54CD\\u5E94\\u5C3A\\u5BF8\\u4E0E \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/basic/grid\"\n }, \"Grid\"), \" \\u4FDD\\u6301\\u4E00\\u81F4\\u3002\"), 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 from 'react';\\nimport { List, Descriptions, Rating, Button, ButtonGroup } from '@douyinfe/semi-ui';\\n\\nfunction Responsive() {\\n const data = [\\n {\\n title: '\\u5BA1\\u6838\\u7BA1\\u7406\\u5E73\\u53F0',\\n rating: 4.5,\\n feedbacks: 124,\\n },\\n {\\n title: '\\u6241\\u9E4A',\\n rating: 4,\\n feedbacks: 108,\\n },\\n {\\n title: '\\u76F4\\u64AD\\u5BA1\\u6838\\u5E73\\u53F0',\\n rating: 3.5,\\n feedbacks: 244,\\n },\\n {\\n title: '\\u6296\\u97F3\\u5B89\\u5168\\u6D4B\\u8BD5',\\n feedbacks: 189,\\n },\\n {\\n title: '\\u5185\\u5BB9\\u5E73\\u53F0',\\n rating: 3,\\n feedbacks: 128,\\n },\\n {\\n title: '\\u7B56\\u7565\\u5E73\\u53F0',\\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: '\\u53CD\\u9988\\u6570', 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 }, \"\\u52A0\\u8F7D\\u66F4\\u591A\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u53EF\\u901A\\u8FC7 loadMore \\u5C5E\\u6027\\u5B9E\\u73B0\\u52A0\\u8F7D\\u66F4\\u591A\\u7684\\u529F\\u80FD\\u3002\"), 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, 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 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 );\\n}\\n\\nrender(LoadMoreList);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u6EDA\\u52A8\\u52A0\\u8F7D\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u96C6\\u6210 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/CassetteRocks/react-infinite-scroller\"\n }, \"react-infinite-scroller\"), \" \\u6765\\u5B9E\\u73B0\\u6EDA\\u52A8\\u52A0\\u8F7D\\u7684\\u5217\\u8868\\u3002\\u4EA4\\u4E92\\u5EFA\\u8BAE\\u7B26\\u5408 semi \\u4EA4\\u4E92\\u8BBE\\u8BA1\\u89C4\\u8303\\uFF0C\\u8FD9\\u91CC\\u91C7\\u7528\\u4E09\\u6B21\\u6EDA\\u52A0\\u8F7D\\u540E\\u51FA\\u73B0 load more \\u6309\\u94AE\\u7684\\u5F62\\u5F0F\\u3002\"), 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 } from 'react';\\nimport { List, Button, Avatar, Spin } 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 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 {loading && hasMore && (\\n
\\n \\n
\\n )}\\n \\n \\n );\\n}\\n\\nrender(ScrollLoad);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u6EDA\\u52A8\\u52A0\\u8F7D\\u65E0\\u9650\\u957F\\u5217\\u8868\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u96C6\\u6210 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/bvaughn/react-virtualized\"\n }, \"react-virtualized\"), \" \\u5B9E\\u73B0\\u6EDA\\u52A8\\u52A0\\u8F7D\\u65E0\\u9650\\u957F\\u5217\\u8868\\uFF0C\\u5E26\\u6709\\u865A\\u62DF\\u5316\\uFF08virtualization\\uFF09\\u529F\\u80FD\\uFF0C\\u80FD\\u591F\\u63D0\\u9AD8\\u6570\\u636E\\u91CF\\u5927\\u65F6\\u5019\\u957F\\u5217\\u8868\\u7684\\u6027\\u80FD\\u3002\"), 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 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 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 }, \"\\u62D6\\u62FD\\u6392\\u5E8F\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u4F7F\\u7528 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/clauderic/dnd-kit/tree/master\"\n }, \"dnd-kit\"), \" \\u53EF\\u8F7B\\u677E\\u5B9E\\u73B0\\u62D6\\u62FD\\u6392\\u5E8F\\u3002\"), 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 }, \"\\u5E26\\u5206\\u9875\\u5668\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u4F60\\u53EF\\u4EE5\\u7EC4\\u5408\\u4F7F\\u7528 Pagination\\uFF0C \\u5B9E\\u73B0\\u4E00\\u4E2A\\u5206\\u9875\\u7684 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 }, \"\\nimport React, { useState } from 'react';\\nimport { List, Pagination } from '@douyinfe/semi-ui';\\n\\n() => {\\n const data = [\\n '\\u56F4\\u57CE',\\n '\\u5E73\\u51E1\\u7684\\u4E16\\u754C\\uFF08\\u5168\\u4E09\\u518C\\uFF09',\\n '\\u4E09\\u4F53\\uFF08\\u5168\\u96C6\\uFF09',\\n '\\u96EA\\u4E2D\\u608D\\u5200\\u884C\\uFF08\\u5168\\u96C6\\uFF09',\\n '\\u6492\\u54C8\\u62C9\\u7684\\u6545\\u4E8B',\\n '\\u660E\\u671D\\u90A3\\u4E9B\\u4E8B',\\n '\\u4E00\\u7985\\u5C0F\\u548C\\u5C1A',\\n '\\u6C99\\u4E18',\\n '\\u88AB\\u8BA8\\u538C\\u7684\\u52C7\\u6C14',\\n '\\u7F6A\\u4E0E\\u7F5A',\\n '\\u6708\\u4EAE\\u4E0E\\u516D\\u4FBF\\u58EB',\\n '\\u6C89\\u9ED8\\u7684\\u5927\\u591A\\u6570',\\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 }, \"\\u5E26\\u7B5B\\u9009\\u5668\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7\\u7EC4\\u88C5 Input \\u4F7F\\u7528\\uFF0C\\u5B9E\\u73B0\\u5BF9 List \\u5217\\u8868\\u7684\\u7B5B\\u9009\"), 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 }, \"\\nimport React, { useState } from 'react';\\nimport { List, Input } from '@douyinfe/semi-ui';\\nimport { IconSearch } from '@douyinfe/semi-icons';\\n\\n() => {\\n const data = [\\n '\\u56F4\\u57CE',\\n '\\u5E73\\u51E1\\u7684\\u4E16\\u754C\\uFF08\\u5168\\u4E09\\u518C\\uFF09',\\n '\\u4E09\\u4F53\\uFF08\\u5168\\u96C6\\uFF09',\\n '\\u96EA\\u4E2D\\u608D\\u5200\\u884C\\uFF08\\u5168\\u96C6\\uFF09',\\n '\\u6492\\u54C8\\u62C9\\u7684\\u6545\\u4E8B',\\n '\\u660E\\u671D\\u90A3\\u4E9B\\u4E8B',\\n '\\u4E00\\u7985\\u5C0F\\u548C\\u5C1A',\\n '\\u6C99\\u4E18',\\n '\\u88AB\\u8BA8\\u538C\\u7684\\u52C7\\u6C14',\\n '\\u7F6A\\u4E0E\\u7F5A',\\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='\\u641C\\u7D22' 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 }, \"\\u6DFB\\u52A0\\u5220\\u9664\\u9879\"), 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 } from '@douyinfe/semi-ui';\\nimport { IconMinusCircle, IconPlusCircle } from '@douyinfe/semi-icons';\\n\\n() => {\\n const data = [\\n '\\u56F4\\u57CE',\\n '\\u5E73\\u51E1\\u7684\\u4E16\\u754C\\uFF08\\u5168\\u4E09\\u518C\\uFF09',\\n '\\u4E09\\u4F53\\uFF08\\u5168\\u96C6\\uFF09',\\n '\\u96EA\\u4E2D\\u608D\\u5200\\u884C\\uFF08\\u5168\\u96C6\\uFF09',\\n '\\u6492\\u54C8\\u62C9\\u7684\\u6545\\u4E8B',\\n '\\u660E\\u671D\\u90A3\\u4E9B\\u4E8B',\\n '\\u4E00\\u7985\\u5C0F\\u548C\\u5C1A',\\n '\\u6C99\\u4E18',\\n '\\u88AB\\u8BA8\\u538C\\u7684\\u52C7\\u6C14',\\n '\\u7F6A\\u4E0E\\u7F5A',\\n '\\u6708\\u4EAE\\u4E0E\\u516D\\u4FBF\\u58EB',\\n '\\u6C89\\u9ED8\\u7684\\u5927\\u591A\\u6570',\\n '\\u7B2C\\u4E00\\u4EBA\\u79F0\\u5355\\u6570',\\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 \\u65B0\\u589E\\u4E66\\u7C4D\\n
\\n
\\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u5355\\u9009\\u6216\\u591A\\u9009\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7\\u7EC4\\u5408\\u4F7F\\u7528 Radio \\u6216 Checkbox \\u5C06 List \\u589E\\u5F3A\\u4E3A\\u4E00\\u4E2A\\u5217\\u8868\\u9009\\u62E9\\u5668\"), 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 '\\u56F4\\u57CE',\\n '\\u5E73\\u51E1\\u7684\\u4E16\\u754C\\uFF08\\u5168\\u4E09\\u518C\\uFF09',\\n '\\u4E09\\u4F53\\uFF08\\u5168\\u96C6\\uFF09',\\n '\\u96EA\\u4E2D\\u608D\\u5200\\u884C\\uFF08\\u5168\\u96C6\\uFF09',\\n '\\u6492\\u54C8\\u62C9\\u7684\\u6545\\u4E8B',\\n '\\u660E\\u671D\\u90A3\\u4E9B\\u4E8B',\\n '\\u4E00\\u7985\\u5C0F\\u548C\\u5C1A',\\n '\\u6C99\\u4E18',\\n '\\u88AB\\u8BA8\\u538C\\u7684\\u52C7\\u6C14',\\n '\\u7F6A\\u4E0E\\u7F5A',\\n '\\u6708\\u4EAE\\u4E0E\\u516D\\u4FBF\\u58EB',\\n '\\u6C89\\u9ED8\\u7684\\u5927\\u591A\\u6570',\\n '\\u7B2C\\u4E00\\u4EBA\\u79F0\\u5355\\u6570',\\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 }, \"\\u54CD\\u5E94\\u952E\\u76D8\\u4E8B\\u4EF6\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u4F60\\u53EF\\u4EE5\\u81EA\\u884C\\u76D1\\u542C\\u5BF9\\u5E94\\u6309\\u952E\\u7684\\u952E\\u76D8\\u4E8B\\u4EF6\\uFF0C\\u5B9E\\u73B0\\u4E0D\\u540C Item \\u7684\\u9009\\u62E9\\u3002\\u5982\\u4E0B\\u9762\\u8FD9\\u4E2A\\u4F8B\\u5B50\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u4E0A\\u4E0B\\u65B9\\u5411\\u952E\\u9009\\u62E9\\u4E0D\\u540CItem \"), 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, useRef } from 'react';\\nimport { List, Input, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n const data = [\\n '\\u56F4\\u57CE',\\n '\\u5E73\\u51E1\\u7684\\u4E16\\u754C\\uFF08\\u5168\\u4E09\\u518C\\uFF09',\\n '\\u4E09\\u4F53\\uFF08\\u5168\\u96C6\\uFF09',\\n '\\u96EA\\u4E2D\\u608D\\u5200\\u884C\\uFF08\\u5168\\u96C6\\uFF09',\\n '\\u6492\\u54C8\\u62C9\\u7684\\u6545\\u4E8B',\\n '\\u660E\\u671D\\u90A3\\u4E9B\\u4E8B',\\n '\\u4E00\\u7985\\u5C0F\\u548C\\u5C1A',\\n '\\u6C99\\u4E18',\\n '\\u88AB\\u8BA8\\u538C\\u7684\\u52C7\\u6C14',\\n '\\u7F6A\\u4E0E\\u7F5A',\\n '\\u6708\\u4EAE\\u4E0E\\u516D\\u4FBF\\u58EB',\\n '\\u6C89\\u9ED8\\u7684\\u5927\\u591A\\u6570',\\n '\\u7B2C\\u4E00\\u4EBA\\u79F0\\u5355\\u6570',\\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 }, \"\\u4EE5\\u4E0A\\u4E66\\u5355\\u4F8B\\u5B50\\u7684Demo\\u4E2D\\u6D89\\u53CA\\u5230\\u7684\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\\u5982\\u4E0B\"), 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 \\u53C2\\u8003\"), 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 }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9ED8\\u8BA4\\u503C\"))), 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 }, \"\\u662F\\u5426\\u663E\\u793A\\u8FB9\\u6846\"), 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 }, \"\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\\u7C7B\\u540D\"), 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 }, \"\\u5217\\u8868\\u6570\\u636E\\u6E90\"), 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 }, \"\\u7A7A\\u5217\\u8868\\u7684\\u5C55\\u793A\\u5185\\u5BB9\"), 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 }, \"\\u5217\\u8868\\u5E95\\u90E8\"), 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 }, \"\\u5217\\u8868\\u6805\\u683C\\u914D\\u7F6E\"), 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/zh-CN/basic/grid#API%E5%8F%82%E8%80%83\"\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 }, \"\\u5217\\u8868\\u5934\\u90E8\"), 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 }, \"\\u5217\\u8868\\u5E03\\u5C40\\uFF0C\\u652F\\u6301\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"vertical\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"horizontal\")), 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 }, \"\\u52A0\\u8F7D\\u66F4\\u591A\\u7684\\u6309\\u94AE\"), 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 }, \"\\u662F\\u5426\\u5904\\u4E8E\\u52A0\\u8F7D\\u4E2D\\uFF0C\\u4E3A\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"true\"), \"\\u65F6\\u4F1A\\u663E\\u793A spin\"), 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 }, \"\\u5F53\\u4F7F\\u7528 dataSource \\u65F6\\uFF0C\\u53EF\\u4EE5\\u7528 renderItem \\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u5217\\u8868\\u9879\"), 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 }, \"\\u5217\\u8868\\u5C3A\\u5BF8\\uFF0C\\u652F\\u6301 \", 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 }, \"\\u662F\\u5426\\u5C55\\u793A\\u5206\\u5272\\u7EBF\"), 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 }, \"\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\\u5BF9\\u8C61\"), 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 }, \"\\u70B9\\u51FB\\u56DE\\u8C03\\u4E8B\\u4EF6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(e: event) => void\"), 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 }, \"\\u53F3\\u952E\\u70B9\\u51FB\\u56DE\\u8C03\\u4E8B\\u4EF6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(e: event) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"List grid props\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u5176\\u4ED6 grid \\u53C2\\u6570\\uFF0C\\u8BF7\\u53C2\\u8003 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/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 }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9ED8\\u8BA4\\u503C\"))), 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 }, \"\\u6805\\u683C\\u5360\\u4F4D\\u683C\\u6570\"), 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 }, \"\\u6805\\u683C\\u95F4\\u9694\"), 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\"), \" \\u54CD\\u5E94\\u5F0F\\u6805\\u683C\\uFF0C\\u53EF\\u4E3A\\u6805\\u683C\\u6570\\u6216\\u4E00\\u4E2A\\u5305\\u542B\\u5176\\u4ED6\\u5C5E\\u6027\\u7684\\u5BF9\\u8C61\"), 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 }, \"\\u2265576px\"), \" \\u54CD\\u5E94\\u5F0F\\u6805\\u683C\\uFF0C\\u53EF\\u4E3A\\u6805\\u683C\\u6570\\u6216\\u4E00\\u4E2A\\u5305\\u542B\\u5176\\u4ED6\\u5C5E\\u6027\\u7684\\u5BF9\\u8C61\"), 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 }, \"\\u2265768px\"), \" \\u54CD\\u5E94\\u5F0F\\u6805\\u683C\\uFF0C\\u53EF\\u4E3A\\u6805\\u683C\\u6570\\u6216\\u4E00\\u4E2A\\u5305\\u542B\\u5176\\u4ED6\\u5C5E\\u6027\\u7684\\u5BF9\\u8C61\"), 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 }, \"\\u2265992px\"), \" \\u54CD\\u5E94\\u5F0F\\u6805\\u683C\\uFF0C\\u53EF\\u4E3A\\u6805\\u683C\\u6570\\u6216\\u4E00\\u4E2A\\u5305\\u542B\\u5176\\u4ED6\\u5C5E\\u6027\\u7684\\u5BF9\\u8C61\"), 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 }, \"\\u22651200px\"), \" \\u54CD\\u5E94\\u5F0F\\u6805\\u683C\\uFF0C\\u53EF\\u4E3A\\u6805\\u683C\\u6570\\u6216\\u4E00\\u4E2A\\u5305\\u542B\\u5176\\u4ED6\\u5C5E\\u6027\\u7684\\u5BF9\\u8C61\"), 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 }, \"\\u22651600px\"), \" \\u54CD\\u5E94\\u5F0F\\u6805\\u683C\\uFF0C\\u53EF\\u4E3A\\u6805\\u683C\\u6570\\u6216\\u4E00\\u4E2A\\u5305\\u542B\\u5176\\u4ED6\\u5C5E\\u6027\\u7684\\u5BF9\\u8C61\"), 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 }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9ED8\\u8BA4\\u503C\"))), 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 }, \"\\u5217\\u8868\\u9879\\u5934\\u5185\\u5BB9\\u548C\\u4E3B\\u4F53\\u5185\\u5BB9\\u7684\\u5782\\u76F4\\u5BF9\\u9F50\\u65B9\\u5F0F\\uFF0C\\u652F\\u6301 \", 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 }, \"\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\\u7C7B\\u540D\"), 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 }, \"\\u5217\\u8868\\u9879\\u9644\\u52A0\\u5185\\u5BB9\"), 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 }, \"\\u5217\\u8868\\u9879\\u5934\\u5185\\u5BB9\"), 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 }, \"\\u5217\\u8868\\u9879\\u4E3B\\u4F53\\u5185\\u5BB9\"), 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 }, \"style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\\u5BF9\\u8C61\"), 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 }, \"\\u70B9\\u51FB\\u56DE\\u8C03\\u4E8B\\u4EF6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(e: event) => void\"), 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 }, \"\\u53F3\\u952E\\u70B9\\u51FB\\u56DE\\u8C03\\u4E8B\\u4EF6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(e: event) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u6587\\u6848\\u89C4\\u8303\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u9996\\u5B57\\u6BCD\\u5927\\u5199\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u7ED3\\u5C3E\\u4E0D\\u8DDF\\u968F\\u6807\\u70B9\\u7B26\\u53F7\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u8BED\\u6CD5\\u5E73\\u884C\\uFF1A\\u5982\\u4E3B\\u52A8\\u6001\\u4E0E\\u88AB\\u52A8\\u6001\\u3001\\u9648\\u8FF0\\u53E5\\u4E0E\\u7948\\u4F7F\\u53E5\\u6DF7\\u5408\\u4F7F\\u7528\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/list","next":{"fields":{"slug":"en-US/show/modal"},"id":"18904872-978c-5c84-8c9e-489a0e3a45c1","frontmatter":{"title":"Modal","localeCode":"en-US","icon":"doc-modal","showNew":null}},"previous":{"fields":{"slug":"en-US/show/list"},"id":"493f9aab-7304-5c2b-bb35-826f4f0fe06f","frontmatter":{"title":"List","localeCode":"en-US","icon":"doc-list","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}