{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/basic/divider","result":{"data":{"current":{"frontmatter":{"title":"Divider","order":25,"brief":"Divider is a linear, lightweight component used to logically organize element content and page structure or areas.","icon":"doc-divider"},"fields":{"type":"basic"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#with-children","title":"With Children"}]},{"url":"#api-reference","title":"API Reference"},{"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\": 25,\n \"category\": \"Basic\",\n \"title\": \"Divider\",\n \"icon\": \"doc-divider\",\n \"brief\": \"Divider is a linear, lightweight component used to logically organize element content and page structure or areas.\"\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 { Divider } 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 { Divider } from '@douyinfe/semi-ui';\\n\\n() => {\\n\\n return (\\n \\n
Horizontal Solid Line
\\n
Semi Design is a design system.\\n
\\n
It defines a set of components.\\n\\n
Horizontal Dashed Line
\\n
Semi Design is a design system.\\n
\\n
It defines a set of components.\\n\\n
Vertical Solid Line
\\n\\n
\\n
Left\\n
\\n
Middle\\n
\\n
Right\\n
\\n\\n
Vertical Dashed Line
\\n
\\n
Left\\n
\\n
Middle\\n
\\n
Right\\n
\\n\\n
\\n
\\n Left Text\\n \\n\\n
\\n Center Text\\n \\n\\n
\\n Right Text\\n \\n\\n
\\n \\n \\n