\\n Internationalization support for Simplified Chinese, Traditional Chinese, English, Japanese, Korean, Portuguese and 20+ other languages. Date and time components support global time zones, and all components automatically adapt to RTL layout for Arabic.\\n
\\n\\n Based on the Foundation and Adapter cross-framework technical solution, it is easy to extend.\\n
\\n { console.log('onContentChange', props); }}\\n editable={editable}\\n style={{ border: '1px solid var(--semi-color-border)', padding: 12 }}\\n imgUploadProps={imgUploadProps}\\n />\\n ;\\n};\\n\\nrender();\\n\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Rich Text List\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"FileContent\"), \" in \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Sidebar\"), \" to display a list of rich text documents.\"), 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 { Sidebar } from '@douyinfe/semi-ui';\\n\\nconst { FileContent } = Sidebar;\\n\\nconst defaultFiles = [\\n {\\n key: 'file1',\\n name: 'Semi Design Introduction',\\n content: `\\n\\n Semi Design Introduction\\n
\\n\\n Semi Design is a design system designed, developed and maintained by the Douyin front-end team and the MED product design team. As a comprehensive, easy-to-use and high-quality modern application UI solution, Semi Design is refined from complex scenarios of various ByteDance business lines. It currently supports nearly a thousand platform products and serves more than 100,000 internal and external users. For details, see https://semi.design/start/introduction. The main features of Semi Design include:\\n
\\n\\n - \\n Simple and modern design.\\n
\\n - \\n Theming solution with deeply customizable styles.\\n
\\n
\\n\\n Internationalization support for Simplified Chinese, Traditional Chinese, English, Japanese, Korean, Portuguese and 20+ other languages. Date and time components support global time zones, and all components automatically adapt to RTL layout for Arabic.\\n
\\nbody {\\n display: none;\\n}
\\n\\n Based on the Foundation and Adapter cross-framework technical solution, it is easy to extend.\\n
\\n\\n Semi Design is a design system designed, developed and maintained by the Douyin front-end team and the MED product design team.\\n
\\n \\u2014 Semi Design\\n
\\n\\n Semi Design is a design system designed, developed and maintained by the Douyin front-end team and the MED product design team. As a comprehensive, easy-to-use and high-quality modern application UI solution, Semi Design is refined from complex scenarios of various ByteDance business lines. It currently supports nearly a thousand platform products and serves more than 100,000 internal and external users. For details, see https://semi.design/start/introduction. The main features of Semi Design include:\\n
\\n\\n - \\n Simple and modern design.\\n
\\n - \\n Theming solution with deeply customizable styles.\\n
\\n
\\n\\n Internationalization support for Simplified Chinese, Traditional Chinese, English, Japanese, Korean, Portuguese and 20+ other languages. Date and time components support global time zones, and all components automatically adapt to RTL layout for Arabic.\\n
\\nbody {\\n display: none;\\n}
\\n\\n Based on the Foundation and Adapter cross-framework technical solution, it is easy to extend.\\n
\\n\\n Semi Design is a design system designed, developed and maintained by the Douyin front-end team and the MED product design team.\\n
\\n \\u2014 Semi Design\\n
\\n\\n Semi Design is a design system designed, developed and maintained by the Douyin front-end team and the MED product design team. As a comprehensive, easy-to-use and high-quality modern application UI solution, Semi Design is refined from complex scenarios of various ByteDance business lines. It currently supports nearly a thousand platform products and serves more than 100,000 internal and external users. For details, see https://semi.design/start/introduction. The main features of Semi Design include:\\n
\\n\\n - \\n Simple and modern design.\\n
\\n - \\n Theming solution with deeply customizable styles.\\n
\\n
\\n\\n Internationalization support for Simplified Chinese, Traditional Chinese, English, Japanese, Korean, Portuguese and 20+ other languages. Date and time components support global time zones, and all components automatically adapt to RTL layout for Arabic.\\n
\\nbody {\\n display: none;\\n}
\\n\\n Based on the Foundation and Adapter cross-framework technical solution, it is easy to extend.\\n
\\n\\n Semi Design is a design system designed, developed and maintained by the Douyin front-end team and the MED product design team.\\n
\\n \\u2014 Semi Design\\n
\\n`,\\n },\\n {\\n key: 'file2',\\n name: 'Semi Design DSM',\\n content: `\\n Semi Design DSM\\n
\\nSemi DSM is a design system management tool provided by Semi Design. It supports global and component-level style customization and keeps synchronization between Figma and front-end code. It is suitable for teams of all sizes. Whether you need to simplify workflows, improve team collaboration, or increase productivity, we provide features that work for you.
\\n`\\n },\\n {\\n key: 'file3',\\n name: 'React v19 Adaptation',\\n content: `\\n React v19 Adaptation\\n
\\nSince the release of React v19, React has introduced numerous underlying mechanism and API changes, including upgrades and adjustments to the render mechanism, ref, context, TypeScript types, and related deprecated APIs. To ensure that the Semi Design component library is smoothly compatible with both React v19 and lower versions, we provide the original component package @douyinfe/semi-ui for React versions below v19, as well as a new package @douyinfe/semi-ui-19 specifically adapted for React v19, so users can choose as needed. This guide will help you understand how to install, use, and the precautions to take.\\nInstallation & Usage\\nIf your project is using React v19, please use @douyinfe/semi-ui-19. For React versions below v19, continue using @douyinfe/semi-ui as before.
\\n`\\n },\\n];\\n\\nconst Demo = () => {\\n const [activeKey, setActiveKey] = useState('file1');\\n\\n const onChange = useCallback((key) => {\\n setActiveKey(key);\\n }, []);\\n\\n return \\n \\n
;\\n};\\n\\nrender();\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Sidebar\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Sidebar\"), \" has a main view (\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"mode\"), \" is \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"main\"), \") and detail views (\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"mode\"), \" is \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"code\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"text\"), \" and other custom values).\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"In the main view you can configure the title through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"title\"), \", decide whether to show close button through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"showClose\"), \", and configure top button group through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"options\"), \".\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"For content rendering in the main view, you can pass a render function via \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderMainContent\"), \". You can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"AnnotationContent\"), \" in \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Annotation\"), \" to render references, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"FileContent\"), \" in \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Sidebar\"), \" to render rich text, and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"CodeContent\"), \" to render code.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"For detail views, if the content is rich text or code, set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"mode\"), \" to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"code\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"text\"), \" and provide \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"detailContent\"), \" to display the content with built-in code display component / rich text editor. If you want to customize how the detail view is rendered, you can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderDetailContent\"), \" to handle it yourself.\"), 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 { Sidebar, Annotation } from '@douyinfe/semi-ui';\\nimport { IconSearch, IconBriefStroked, IconCodeStroked, IconModalStroked } from '@douyinfe/semi-icons';\\n\\nconst { FileContent, CodeContent } = Sidebar;\\nconst { AnnotationContent } = Annotation;\\n\\nconst containerStyle = {\\n display: 'flex',\\n height: '800px',\\n border: '1px solid var(--semi-color-border)',\\n borderRadius: 8,\\n overflow: 'hidden',\\n boxSizing: 'border-box'\\n};\\n\\nconst optionList = [\\n {\\n icon: ,\\n name: 'Search result',\\n key: 'searchResult'\\n },\\n {\\n icon: ,\\n name: 'File preview',\\n key: 'filePreview'\\n },\\n {\\n icon: ,\\n name: 'Code preview',\\n key: 'codePreview'\\n },\\n {\\n icon: ,\\n name: 'Browser',\\n key: 'network'\\n }\\n];\\n\\nconst defaultCodes = [\\n {\\n name: 'Component.js',\\n key: 'code1',\\n language: 'javascript',\\n content: `import React from 'react';\\nimport { AutoComplete } from '@douyinfe/semi-ui';\\nimport { IconSearch } from '@douyinfe/semi-icons';\\n\\n() => {\\n const [stringData, setStringData] = useState([]);\\n const [value, setValue] = useState('');\\n const handleStringSearch = (value) => {\\n let result;\\n if (value) {\\n result = ['gmail.com', '163.com', 'qq.com'].map(domain => value+domain);\\n } else {\\n result = [];\\n }\\n setStringData(result);\\n };\\n\\n const handleChange = (value) => {\\n console.log('onChange', value);\\n setValue(value);\\n };\\n return (\\n }\\n placeholder=\\\"Search... \\\"\\n onSearch={handleStringSearch}\\n onChange={handleChange}\\n style={{ width: 200 }}\\n />\\n );\\n};\\n`\\n \\n }, \\n {\\n name: 'Style.css',\\n key: 'code2',\\n language: 'css',\\n content: `.semi-animation-react-demo-auto {\\n button {\\n height: 50px;\\n border: 0;\\n cursor: pointer !important;\\n background: #777;\\n color: white;\\n outline: none;\\n -webkit-appearance: none;\\n }\\n\\n button:hover {\\n background: #878787;\\n }\\n\\n .auto-main {\\n display: grid;\\n grid-template-columns: repeat(3, 1fr);\\n grid-template-rows: auto 1fr;\\n background: #575757;\\n }\\n\\n .content {\\n grid-column: span 3;\\n }\\n\\n .item {\\n background: indianred;\\n width: 100%;\\n overflow: hidden;\\n color: white;\\n }\\n\\n .item p {\\n margin: 0;\\n padding: 10px;\\n }\\n}\\n`\\n \\n },\\n {\\n name: 'Chart.json',\\n key: 'code3',\\n isJson: true,\\n language: 'html',\\n content: `{\\n \\\"axisX\\\": {\\n \\\"title\\\": {\\n \\\"visible\\\": false,\\n \\\"position\\\": \\\"center\\\"\\n },\\n \\\"label\\\": {\\n \\\"visible\\\": true,\\n \\\"style\\\": {\\n \\\"fontSize\\\": 12,\\n \\\"fontWeight\\\": 400,\\n \\\"lineHeight\\\": 16,\\n \\\"fontFamily\\\": [\\n \\\"Inter\\\"\\n ],\\n \\\"fill\\\": \\\"rgba(0, 0, 0, 0.47843137254901963)\\\"\\n },\\n \\\"space\\\": 12\\n },\\n \\\"domainLine\\\": {\\n \\\"visible\\\": true,\\n \\\"style\\\": {\\n \\\"lineWidth\\\": 1,\\n \\\"stroke\\\": \\\"rgba(0, 0, 0, 0.12156862745098039)\\\",\\n \\\"lineDash\\\": []\\n }\\n },\\n \\\"tick\\\": {\\n \\\"visible\\\": false,\\n \\\"style\\\": {\\n \\\"lineWidth\\\": 1,\\n \\\"stroke\\\": \\\"rgba(255, 255, 255, 0)\\\"\\n }\\n },\\n \\\"subTick\\\": {\\n \\\"visible\\\": false\\n },\\n \\\"grid\\\": {\\n \\\"visible\\\": false\\n },\\n \\\"subGrid\\\": {\\n \\\"visible\\\": false\\n }\\n }\\n}`\\n },\\n];\\n\\nconst defaultFiles = [\\n {\\n key: 'file1',\\n name: 'Semi Design Introduction',\\n content: `\\n\\n Semi Design Introduction\\n
\\n\\n Semi Design is a design system designed, developed and maintained by the Douyin front-end team and the MED product design team. As a comprehensive, easy-to-use and high-quality modern application UI solution, Semi Design is refined from complex scenarios of various ByteDance business lines. It currently supports nearly a thousand platform products and serves more than 100,000 internal and external users. For details, see https://semi.design/start/introduction. The main features of Semi Design include:\\n
\\n\\n - \\n Simple and modern design.\\n
\\n - \\n Theming solution with deeply customizable styles.\\n
\\n
\\n\\n Internationalization support for Simplified Chinese, Traditional Chinese, English, Japanese, Korean, Portuguese and 20+ other languages. Date and time components support global time zones, and all components automatically adapt to RTL layout for Arabic.\\n
\\nbody {\\n display: none;\\n}
\\n\\n Based on the Foundation and Adapter cross-framework technical solution, it is easy to extend.\\n
\\n\\n Semi Design is a design system designed, developed and maintained by the Douyin front-end team and the MED product design team.\\n
\\n \\u2014 Semi Design\\n
\\n\\n Semi Design is a design system designed, developed and maintained by the Douyin front-end team and the MED product design team. As a comprehensive, easy-to-use and high-quality modern application UI solution, Semi Design is refined from complex scenarios of various ByteDance business lines. It currently supports nearly a thousand platform products and serves more than 100,000 internal and external users. For details, see https://semi.design/start/introduction. The main features of Semi Design include:\\n
\\n\\n - \\n Simple and modern design.\\n
\\n - \\n Theming solution with deeply customizable styles.\\n
\\n
\\n\\n Internationalization support for Simplified Chinese, Traditional Chinese, English, Japanese, Korean, Portuguese and 20+ other languages. Date and time components support global time zones, and all components automatically adapt to RTL layout for Arabic.\\n
\\nbody {\\n display: none;\\n}
\\n\\n Based on the Foundation and Adapter cross-framework technical solution, it is easy to extend.\\n
\\n\\n Semi Design is a design system designed, developed and maintained by the Douyin front-end team and the MED product design team.\\n
\\n \\u2014 Semi Design\\n
\\n\\n Semi Design is a design system designed, developed and maintained by the Douyin front-end team and the MED product design team. As a comprehensive, easy-to-use and high-quality modern application UI solution, Semi Design is refined from complex scenarios of various ByteDance business lines. It currently supports nearly a thousand platform products and serves more than 100,000 internal and external users. For details, see https://semi.design/start/introduction. The main features of Semi Design include:\\n
\\n\\n - \\n Simple and modern design.\\n
\\n - \\n Theming solution with deeply customizable styles.\\n
\\n
\\n\\n Internationalization support for Simplified Chinese, Traditional Chinese, English, Japanese, Korean, Portuguese and 20+ other languages. Date and time components support global time zones, and all components automatically adapt to RTL layout for Arabic.\\n
\\nbody {\\n display: none;\\n}
\\n\\n Based on the Foundation and Adapter cross-framework technical solution, it is easy to extend.\\n
\\n\\n Semi Design is a design system designed, developed and maintained by the Douyin front-end team and the MED product design team.\\n
\\n \\u2014 Semi Design\\n
\\n`,\\n },\\n {\\n key: 'file2',\\n name: 'Semi Design DSM',\\n content: `\\n Semi Design DSM\\n
\\nSemi DSM is a design system management tool provided by Semi Design. It supports global and component-level style customization and keeps synchronization between Figma and front-end code. It is suitable for teams of all sizes. Whether you need to simplify workflows, improve team collaboration, or increase productivity, we provide features that work for you.
\\n`\\n },\\n {\\n key: 'file3',\\n name: 'React v19 Adaptation',\\n content: `\\n React v19 Adaptation\\n
\\nSince the release of React v19, React has introduced numerous underlying mechanism and API changes, including upgrades and adjustments to the render mechanism, ref, context, TypeScript types, and related deprecated APIs. To ensure that the Semi Design component library is smoothly compatible with both React v19 and lower versions, we provide the original component package @douyinfe/semi-ui for React versions below v19, as well as a new package @douyinfe/semi-ui-19 specifically adapted for React v19, so users can choose as needed. This guide will help you understand how to install, use, and the precautions to take.\\nInstallation & Usage\\nIf your project is using React v19, please use @douyinfe/semi-ui-19. For React versions below v19, continue using @douyinfe/semi-ui as before.
\\n`\\n },\\n];\\n\\nconst defaultInfoList = [\\n {\\n header: 'Semi design introduction',\\n key: '1',\\n annotations: [\\n {\\n order: 1,\\n type: 'video',\\n duration: 4432,\\n title: 'Semi Design is a design system designed',\\n url: 'https://semi.design/',\\n logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',\\n siteName: 'Semi Design',\\n detail: ' As a comprehensive, easy-to-use, and high-quality modern enterprise-level application UI solution',\\n img: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg'\\n },\\n {\\n order: 2,\\n title: 'Quick start',\\n type: 'video',\\n duration: 56,\\n url: 'https://semi.design/',\\n detail: ' As a comprehensive, easy-to-use, and high-quality modern enterprise-level application UI solution',\\n logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',\\n siteName: 'Semi Design',\\n img: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg'\\n },\\n {\\n order: 3,\\n title: 'Use components in a modular way',\\n url: 'https://semi.design/',\\n detail: `Semi provides esm format dist, and the css of the component is only imported by the corresponding js.\\nWhen used in Webpack, Rspack, create-react-app or Vite projects, there is no need to configure any compilation items.`,\\n logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',\\n siteName: 'Semi Design',\\n img: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg'\\n }\\n ]\\n },\\n {\\n header: 'Design resource',\\n key: '2',\\n annotations: [\\n {\\n order: 2,\\n title: 'Semi Design resource',\\n url: 'https://semi.design/',\\n detail: 'Semi Design provides a wealth of design resources to help designers and developers collaborate efficiently. Whether you are a community user or a ByteDance internal designer, you can find UI Kit resource and Figma plug-ins that suit you here.',\\n logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',\\n siteName: 'Semi Design resource',\\n img: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg'\\n }\\n ]\\n },\\n];\\n\\nconst imgUploadProps = {\\n action: 'https://api.semi.design/upload',\\n getUploadImageSrc: (response) => {\\n // response is the result returned from action. This is only a demo.\\n // In real use you can read response and return the actual image url.\\n return 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png';\\n },\\n};\\n\\nconst SideBarDemo = () => {\\n const [mode, setMode] = useState('main');\\n const [activeKey, setActiveKey] = useState('codePreview');\\n const [activeCodeKey, setActiveCodeKey] = useState('code1');\\n const [activeFileKey, setActiveFileKey] = useState('file1');\\n const [activeReferKey, setActiveReferKey] = useState('1');\\n const [currentDetail, setCurrentDetail] = useState();\\n\\n const onExpand = useCallback((e, content, mode) => {\\n setMode(mode);\\n setCurrentDetail(content);\\n }, []);\\n\\n const onActiveCodeKeyChange = useCallback((codeKey) => {\\n setActiveCodeKey(codeKey);\\n }, []);\\n\\n const onActiveFileKeyChange = useCallback((fileKey) => {\\n setActiveFileKey(fileKey);\\n }, []);\\n\\n const onActiveReferKeyChange = useCallback((referKey) => {\\n setActiveReferKey(referKey);\\n }, []);\\n\\n const renderMainContent = useCallback((activeKey) => {\\n switch (activeKey) {\\n case 'searchResult':\\n return ;\\n case 'filePreview':\\n return ;\\n case 'codePreview':\\n return ;\\n case 'network':\\n return ;\\n default:\\n return;\\n } \\n }, [activeCodeKey, activeFileKey, activeReferKey]);\\n\\n const renderDetailContent = useCallback((mode) => {\\n switch (mode) {\\n default:\\n return;\\n }\\n }, []);\\n \\n const onActiveOptionChange = useCallback((e, key) => {\\n setActiveKey(key);\\n }, []);\\n\\n const onBackWard = useCallback((e, mode) => {\\n setMode(mode);\\n }, []);\\n\\n return \\n
Workspace placeholder
\\n
\\n