{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/timeline","result":{"data":{"current":{"frontmatter":{"title":"Timeline 时间轴","order":83,"brief":"时间轴是用于对一系列信息进行时间排序时，垂直展示的组件。","icon":"doc-timeline"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#节点类型","title":"节点类型"},{"url":"#自定义节点","title":"自定义节点"},{"url":"#时间轴位置","title":"时间轴位置","items":[{"url":"#时间轴在左侧默认","title":"时间轴在左侧（默认）"},{"url":"#时间节点在左侧","title":"时间节点在左侧"},{"url":"#交替展现","title":"交替展现"},{"url":"#时间轴在右侧","title":"时间轴在右侧"}]},{"url":"#使用-datasource","title":"使用 dataSource"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#timeline","title":"TimeLine"},{"url":"#timelineitem","title":"TimeLine.Item"}]},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"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\": 83,\n  \"category\": \"展示类\",\n  \"title\": \"Timeline 时间轴\",\n  \"icon\": \"doc-timeline\",\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 { Timeline } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Timeline } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Timeline>\\n        <Timeline.Item time=\\\"2019-07-14 10:35\\\">\\u7B2C\\u4E00\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9</Timeline.Item>\\n        <Timeline.Item time=\\\"2019-06-13 16:17\\\">\\u7B2C\\u4E8C\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9</Timeline.Item>\\n        <Timeline.Item time=\\\"2019-05-14 18:34\\\">\\u7B2C\\u4E09\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9</Timeline.Item>\\n    </Timeline>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8282\\u70B9\\u7C7B\\u578B\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 type \\u53EF\\u4EE5\\u8BBE\\u7F6E\\u8282\\u70B9\\u7C7B\\u578B\\uFF0C\\u5BF9\\u5E94\\u539F\\u70B9\\u4F1A\\u53D8\\u6210\\u76F8\\u5E94\\u7684\\u989C\\u8272\\uFF0C\\u53EF\\u9009\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"default\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ongoing\"), \"\\uFF0C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"success\"), \"\\uFF0C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"warning\"), \"\\uFF0C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"error\"), \"\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Timeline } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Timeline>\\n        <Timeline.Item time=\\\"2019-07-14 10:35\\\" type=\\\"ongoing\\\">\\n            \\u5BA1\\u6838\\u4E2D\\n        </Timeline.Item>\\n        <Timeline.Item time=\\\"2019-06-13 16:17\\\" type=\\\"success\\\">\\n            \\u53D1\\u5E03\\u6210\\u529F\\n        </Timeline.Item>\\n        <Timeline.Item time=\\\"2019-05-14 18:34\\\" type=\\\"error\\\">\\n            \\u5BA1\\u6838\\u5931\\u8D25\\n        </Timeline.Item>\\n    </Timeline>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u8282\\u70B9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dot\"), \" \\u81EA\\u5B9A\\u4E49\\u56FE\\u6807\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"color\"), \" \\u81EA\\u5B9A\\u4E49\\u5706\\u70B9\\u8272\\u503C\\u3002\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"children\"), \" \\u7684\\u6837\\u5F0F\\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u8282\\u70B9\\u6837\\u5F0F\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Timeline } from '@douyinfe/semi-ui';\\nimport { IconAlertTriangle } from '@douyinfe/semi-icons';\\n\\n() => (\\n    <Timeline>\\n        <Timeline.Item time=\\\"2019-07-14 10:35\\\">\\u9ED8\\u8BA4\\u6837\\u5F0F\\u7684\\u8282\\u70B9</Timeline.Item>\\n        <Timeline.Item time=\\\"2019-06-13 16:17\\\" dot={<IconAlertTriangle />} type=\\\"warning\\\">\\n            \\u81EA\\u5B9A\\u4E49\\u56FE\\u6807\\n        </Timeline.Item>\\n        <Timeline.Item time=\\\"2019-05-14 18:34\\\" color=\\\"pink\\\">\\n            \\u81EA\\u5B9A\\u4E49\\u8282\\u70B9\\u989C\\u8272\\n        </Timeline.Item>\\n        <Timeline.Item time=\\\"2019-04-10 12:20\\\">\\n            <span style={{ fontSize: '18px' }}>\\u81EA\\u5B9A\\u4E49\\u8282\\u70B9\\u6837\\u5F0F</span>\\n        </Timeline.Item>\\n    </Timeline>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u65F6\\u95F4\\u8F74\\u4F4D\\u7F6E\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"mode\"), \" \\u5C5E\\u6027\\u53EF\\u4EE5\\u8BBE\\u7F6E\\u65F6\\u95F4\\u7684\\u4F4D\\u7F6E\\uFF0C\\u5171\\u6709 4 \\u79CD\\u6A21\\u5F0F\\u53EF\\u9009\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"left\"), \"\\uFF0C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"center\"), \"\\uFF0C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"alternate\"), \"\\uFF0C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"right\"), \"\\u3002\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u65F6\\u95F4\\u8F74\\u5728\\u5DE6\\u4FA7\\uFF08\\u9ED8\\u8BA4\\uFF09\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Timeline } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Timeline mode=\\\"left\\\">\\n        <Timeline.Item time=\\\"2019-07-14 10:35\\\" extra=\\\"\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F\\\">\\n            \\u7B2C\\u4E00\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9\\n        </Timeline.Item>\\n        <Timeline.Item time=\\\"2019-06-13 16:17\\\" extra=\\\"\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F\\\">\\n            \\u7B2C\\u4E8C\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9\\n        </Timeline.Item>\\n        <Timeline.Item time=\\\"2019-05-14 18:34\\\" extra=\\\"\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F\\\">\\n            \\u7B2C\\u4E09\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9\\n        </Timeline.Item>\\n        <Timeline.Item time=\\\"2019-05-09 09:12\\\" extra=\\\"\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F\\\">\\n            \\u7B2C\\u56DB\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9\\n        </Timeline.Item>\\n    </Timeline>\\n);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u65F6\\u95F4\\u8282\\u70B9\\u5728\\u5DE6\\u4FA7\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Timeline } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Timeline mode=\\\"center\\\">\\n        <Timeline.Item time=\\\"2019-07-14 10:35\\\" extra=\\\"\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F\\\">\\n            \\u7B2C\\u4E00\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9\\n        </Timeline.Item>\\n        <Timeline.Item time=\\\"2019-06-13 16:17\\\" extra=\\\"\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F\\\">\\n            \\u7B2C\\u4E8C\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9\\n        </Timeline.Item>\\n        <Timeline.Item time=\\\"2019-05-14 18:34\\\" extra=\\\"\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F\\\">\\n            \\u7B2C\\u4E09\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9\\n        </Timeline.Item>\\n        <Timeline.Item time=\\\"2019-05-09 09:12\\\" extra=\\\"\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F\\\">\\n            \\u7B2C\\u56DB\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9\\n        </Timeline.Item>\\n    </Timeline>\\n);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u4EA4\\u66FF\\u5C55\\u73B0\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Timeline } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Timeline mode=\\\"alternate\\\">\\n        <Timeline.Item time=\\\"2019-07-14 10:35\\\" extra=\\\"\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F\\\">\\n            \\u7B2C\\u4E00\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9\\n        </Timeline.Item>\\n        <Timeline.Item time=\\\"2019-06-13 16:17\\\" extra=\\\"\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F\\\">\\n            \\u7B2C\\u4E8C\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9\\n        </Timeline.Item>\\n        <Timeline.Item time=\\\"2019-05-14 18:34\\\" extra=\\\"\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F\\\">\\n            \\u7B2C\\u4E09\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9\\n        </Timeline.Item>\\n        <Timeline.Item time=\\\"2019-05-09 09:12\\\" extra=\\\"\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F\\\">\\n            \\u7B2C\\u56DB\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9\\n        </Timeline.Item>\\n    </Timeline>\\n);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u65F6\\u95F4\\u8F74\\u5728\\u53F3\\u4FA7\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Timeline } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Timeline mode=\\\"right\\\">\\n        <Timeline.Item time=\\\"2019-07-14 10:35\\\" extra=\\\"\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F\\\">\\n            \\u7B2C\\u4E00\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9\\n        </Timeline.Item>\\n        <Timeline.Item time=\\\"2019-06-13 16:17\\\" extra=\\\"\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F\\\">\\n            \\u7B2C\\u4E8C\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9\\n        </Timeline.Item>\\n        <Timeline.Item time=\\\"2019-05-14 18:34\\\" extra=\\\"\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F\\\">\\n            \\u7B2C\\u4E09\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9\\n        </Timeline.Item>\\n        <Timeline.Item time=\\\"2019-05-09 09:12\\\" extra=\\\"\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F\\\">\\n            \\u7B2C\\u56DB\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9\\n        </Timeline.Item>\\n    </Timeline>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 dataSource\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Timeline } from '@douyinfe/semi-ui';\\nimport { IconAlertTriangle } from '@douyinfe/semi-icons';\\n\\n() => (\\n    <Timeline\\n        mode=\\\"alternate\\\"\\n        dataSource={[\\n            {\\n                time: '2019-07-14 10:35',\\n                extra: '\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F',\\n                content: '\\u7B2C\\u4E00\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9',\\n                type: 'ongoing',\\n            },\\n            {\\n                time: '2019-06-13 16:17',\\n                extra: '\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F',\\n                content: <span style={{ fontSize: '18px' }}>\\u7B2C\\u4E8C\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9</span>,\\n                color: 'pink',\\n            },\\n            {\\n                time: '2019-05-14 18:34',\\n                extra: '\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F',\\n                dot: <IconAlertTriangle />,\\n                content: '\\u7B2C\\u4E09\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9',\\n                type: 'warning',\\n            },\\n            {\\n                time: '2019-05-09 09:12',\\n                extra: '\\u8282\\u70B9\\u8F85\\u52A9\\u8BF4\\u660E\\u4FE1\\u606F',\\n                content: '\\u7B2C\\u56DB\\u4E2A\\u8282\\u70B9\\u5185\\u5BB9',\\n                type: 'success',\\n            },\\n        ]}\\n    />\\n);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"TimeLine\"), 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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\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  }, \"mode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E mode \\u53EF\\u4EE5\\u6539\\u53D8\\u65F6\\u95F4\\u8F74\\u548C\\u5185\\u5BB9\\u7684\\u76F8\\u5BF9\\u4F4D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\"), \"|\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"right\"), \"|\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"center\"), \"|\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"alternate\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\"))), 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  }, \"\\u6837\\u5F0F\"), 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  }, \"dataSource\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65F6\\u95F4\\u8F74\\u6570\\u636E\\u6E90\\uFF0C\\u652F\\u6301 content \\u5C5E\\u6027\\u53CA TimeLine.Item \\u7684\\u6240\\u6709\\u5C5E\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"array\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"TimeLine.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(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, 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  }, \"\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"color\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7684\\u5706\\u5708\\u8272\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"dot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u65F6\\u95F4\\u8F74\\u70B9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), 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  }, \"\\u81EA\\u5B9A\\u4E49\\u8F85\\u52A9\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"position\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u8282\\u70B9\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u4EE5\\u8986\\u76D6 TimeLine \\u7684\\u6A21\\u5F0F\\u9009\\u9879\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\"), \"|\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"right\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), 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  }, \"\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"time\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65F6\\u95F4\\u6587\\u672C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u524D\\u5706\\u5708\\u7684\\u6A21\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"), \"|\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"ongoing\"), \"|\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"success\"), \"|\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"warning\"), \"|\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"error\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\")), 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  }, \"\\u9F20\\u6807\\u70B9\\u51FB\\u4E8B\\u4EF6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: MouseEvent) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.2.0\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u7EC4\\u4EF6\\u4E2D\\u65F6\\u95F4\\u70B9\\u7684\\u8FDE\\u7EBF\\u4EE5\\u53CA\\u65F6\\u95F4\\u70B9\\u672C\\u8EAB\\u88AB\\u8BBE\\u7F6E\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-hidden\"), \"\\uFF0C\\u4E0D\\u4F1A\\u54CD\\u5E94 Accessibility API\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" \\u8BBE\\u7F6E TimeLine \\u7EC4\\u4EF6\\u7684\\u6807\\u7B7E\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-text\"\n  }, \"<Timeline aria-label=\\\"xx\\u4E8B\\u6545\\u5904\\u7406\\u8FC7\\u7A0B\\u65F6\\u95F4\\u7EBF\\\">\\n    <Timeline.Item time=\\\"2015-09-01\\\">\\u521B\\u5EFA\\u670D\\u52A1\\u73B0\\u573A</Timeline.Item>\\n    <Timeline.Item time=\\\"2015-09-02\\\">\\u521D\\u6B65\\u6392\\u9664\\u7F51\\u7EDC\\u5F02\\u5E38</Timeline.Item>\\n    <Timeline.Item time=\\\"2015-09-03\\\">\\u6280\\u672F\\u6D4B\\u8BD5\\u5F02\\u5E38</Timeline.Item>\\n    <Timeline.Item time=\\\"2015-09-05\\\">\\u7F51\\u7EDC\\u5F02\\u5E38\\u6B63\\u5728\\u4FEE\\u590D</Timeline.Item>\\n</Timeline>\\n\"))), 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/timeline","next":{"fields":{"slug":"en-US/show/tooltip"},"id":"a84b72f4-63a1-5094-a49e-683cddf01ddf","frontmatter":{"title":"Tooltip","localeCode":"en-US","icon":"doc-tooltip","showNew":null}},"previous":{"fields":{"slug":"en-US/show/timeline"},"id":"eb42140c-3491-5d87-9eb5-469bc1e6a65a","frontmatter":{"title":"Timeline","localeCode":"en-US","icon":"doc-timeline","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}