{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/show/timeline","result":{"data":{"current":{"frontmatter":{"title":"Timeline","order":83,"brief":"Timeline component is used to display a series of information vertically.","icon":"doc-timeline"},"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":"#type","title":"Type"},{"url":"#custom-node","title":"Custom node"},{"url":"#timeline-position","title":"Timeline Position","items":[{"url":"#left-default","title":"Left (default)"},{"url":"#center","title":"Center"},{"url":"#alternate","title":"Alternate"},{"url":"#right","title":"Right"}]},{"url":"#datasource","title":"DataSource"}]},{"url":"#api-reference","title":"API reference","items":[{"url":"#timeline","title":"TimeLine"},{"url":"#timelineitem","title":"TimeLine.Item"}]},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"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\": 83,\n  \"category\": \"Show\",\n  \"title\": \"Timeline\",\n  \"subTitle\": \"Timeline\",\n  \"icon\": \"doc-timeline\",\n  \"brief\": \"Timeline component is used to display a series of information vertically.\"\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 { Timeline } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Basic Usage\"), 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'>First Node Content</Timeline.Item>\\n        <Timeline.Item time='2019-06-13 16:17'>Second Node Content</Timeline.Item>\\n        <Timeline.Item time='2019-05-14 18:34'>Third Node Content</Timeline.Item>\\n    </Timeline>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Type\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" to set the type of a time node, using one of: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"default\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ongoing\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"success\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"warning\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Error\"), \". The corresponding dot will have a corresponding color.\"), 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'>Processing</Timeline.Item>\\n        <Timeline.Item time='2019-06-13 16:17' type='success'>Succeed</Timeline.Item>\\n        <Timeline.Item time='2019-05-14 18:34' type='error'>Failed</Timeline.Item>\\n    </Timeline>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Custom node\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dot\"), \" to customize icon, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"color\"), \" to customize color or pass in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"children\"), \" with style.\"), 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'>Default Style</Timeline.Item>\\n        <Timeline.Item time='2019-06-13 16:17' dot={(<IconAlertTriangle />)} type='warning'>Customized Icon</Timeline.Item>\\n        <Timeline.Item time='2019-05-14 18:34' color='pink'>Customized Color</Timeline.Item>\\n        <Timeline.Item time='2019-04-10 12:20'><span style={{ fontSize: '18px' }}>Customized Node Style</span></Timeline.Item>\\n    </Timeline>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Timeline Position\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"mode\"), \" to set the position of the timeline, using one of: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"left\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"center\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"alternate\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"right\"), \".\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Left (default)\"), 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='Extra Information'>First Node Content</Timeline.Item>\\n        <Timeline.Item time='2019-06-13 16:17' extra='Extra Information'>Second Node Content</Timeline.Item>\\n        <Timeline.Item time='2019-05-14 18:34' extra='Extra Information'>Third Node Content</Timeline.Item>\\n        <Timeline.Item time='2019-05-09 09:12' extra='Extra Information'>Forth Node Content</Timeline.Item>\\n    </Timeline>\\n);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Center\"), 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='Extra Information'>First Node Content</Timeline.Item>\\n        <Timeline.Item time='2019-06-13 16:17' extra='Extra Information'>Second Node Content</Timeline.Item>\\n        <Timeline.Item time='2019-05-14 18:34' extra='Extra Information'>Third Node Content</Timeline.Item>\\n        <Timeline.Item time='2019-05-09 09:12' extra='Extra Information'>Forth Node Content</Timeline.Item>\\n    </Timeline>\\n);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Alternate\"), 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='Extra Information'>First Node Content</Timeline.Item>\\n        <Timeline.Item time='2019-06-13 16:17' extra='Extra Information'>Second Node Content</Timeline.Item>\\n        <Timeline.Item time='2019-05-14 18:34' extra='Extra Information'>Third Node Content</Timeline.Item>\\n        <Timeline.Item time='2019-05-09 09:12' extra='Extra Information'>Forth Node Content</Timeline.Item>\\n    </Timeline>\\n);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Right\"), 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='Extra Information'>First Node Content</Timeline.Item>\\n        <Timeline.Item time='2019-06-13 16:17' extra='Extra Information'>Second Node Content</Timeline.Item>\\n        <Timeline.Item time='2019-05-14 18:34' extra='Extra Information'>Third Node Content</Timeline.Item>\\n        <Timeline.Item time='2019-05-09 09:12' extra='Extra Information'>Forth Node Content</Timeline.Item>\\n    </Timeline>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"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: 'Extra Information',\\n                content: 'First Node Content',\\n                type: 'ongoing',\\n            },\\n            {\\n                time: '2019-06-13 16:17',\\n                extra: 'Extra Information',\\n                content: <span style={{ fontSize: '18px' }}>Second Node Content</span>,\\n                color: 'pink',\\n            },\\n            {\\n                time: '2019-05-14 18:34',\\n                extra: 'Extra Information',\\n                dot: <IconAlertTriangle />,\\n                content: 'Third Node Content',\\n                type: 'warning',\\n            },\\n            {\\n                time: '2019-05-09 09:12',\\n                extra: 'Extra Information',\\n                content: 'Forth Node Content',\\n                type: 'success',\\n            }    \\n        ]} \\n    />\\n);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API reference\"), 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  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instruction\"), 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  }, \"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  }, \"mode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The relative Position of the timeline and content\"), 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  }, \"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  }, \"dataSource\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"DataSource array for Timeline, Support content attribute and all attributes of TimeLine.Item\"), 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  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instruction\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Version\"))), 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  }, \"Class name\"), 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  }, \"Color of dot\"), 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  }, \"Custom dot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React Node\"), 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  }, \"Custom extra content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React Node\"), 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  }, \"Custom node location to override TimeLine's mode setting\"), 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  }, \"Inline style\"), 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  }, \"Time value\"), 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  }, \"Pattern of dot\"), 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  }, \"Click event\"), 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  }, \"The element of dot and line between dots in TimeLine have a \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-hidden\"), \", indicates that they do not support Accessibility API.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Supporting API \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" to specify TimeLine's label.\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-text\"\n  }, \"<Timeline aria-label=\\\"Accident timeline\\\">\\n    <Timeline.Item time=\\\"2015-09-01\\\">Accident started</Timeline.Item>\\n    <Timeline.Item time=\\\"2015-09-01\\\">Process</Timeline.Item>\\n</Timeline>\\n\"))), 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/timeline","next":{"fields":{"slug":"zh-CN/show/timeline"},"id":"a345d5b3-5a4e-5938-83ca-151d360c9f13","frontmatter":{"title":"Timeline 时间轴","localeCode":"zh-CN","icon":"doc-timeline","showNew":null}},"previous":{"fields":{"slug":"zh-CN/show/tag"},"id":"97dbd72d-2d89-5f78-86de-134189954bd4","frontmatter":{"title":"Tag 标签","localeCode":"zh-CN","icon":"doc-tag","showNew":null}}}},"staticQueryHashes":["1348983216898582","1477422646898582","3245198693898582","417590761898582","63159454898582"]}