{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/show/dropdown","result":{"data":{"current":{"frontmatter":{"title":"Dropdown","order":70,"brief":"A menu that pops down.","icon":"doc-dropdown"},"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":"#nested-usage","title":"Nested Usage"},{"url":"#popup-position","title":"Popup Position"},{"url":"#trigger-mode","title":"Trigger Mode"},{"url":"#trigger-event","title":"Trigger Event"},{"url":"#json-usage","title":"Json Usage"}]},{"url":"#api-reference","title":"API Reference","items":[{"url":"#dropdown","title":"Dropdown"},{"url":"#dropdownmenu","title":"Dropdown.Menu"},{"url":"#dropdownitem","title":"Dropdown.Item"},{"url":"#dropdowntitle","title":"Dropdown.Title"},{"url":"#dropdownmenuitem","title":"DropdownMenuItem"}]},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"},{"url":"#keyboard-and-focus","title":"Keyboard and Focus"}]},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"},{"url":"#faq","title":"FAQ"},{"url":"#related-material","title":"Related Material"}]},"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\": 70,\n  \"category\": \"Show\",\n  \"title\": \"Dropdown\",\n  \"subTitle\": \"Dropdown\",\n  \"icon\": \"doc-dropdown\",\n  \"brief\": \"A menu that pops down.\"\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 Dropdown = makeShortcode(\"Dropdown\");\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 { Dropdown } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Basic Usage\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"For the Trigger of the Dropdown within its children: By default, it is displayed on hover. You can modify it to values like \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"click\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"custom\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"contextMenu\"), \", etc. through the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"props.trigger\"), \" to specify different triggering methods.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"render\"), \" to specify the specific content of the dropdown box: Use \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Dropdown.Menu\"), \" as the parent container, and use \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Dropdown.Item\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Dropdown.Divider\"), \", and \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Dropdown.Title\"), \" in combination. Of course, in simple scenarios, you can also just combine \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Dropdown.Menu\"), \" with \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Dropdown.Item\"), \", and the other elements are not mandatory.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Dropdown.Item\"), \" can disable a certain option by setting \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"disabled\"), \". By configuring \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"type\"), \", text in different colors can be displayed. By setting \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"icon\"), \", icons can be quickly configured. For more complex custom structures, you can pass in \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"ReactNode\"), \" through \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"children\"), \" for custom rendering. \")), 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 { Dropdown, Button, HotKeys } from '@douyinfe/semi-ui';\\nimport { IconBox, IconSetting, IconForward, IconRefresh, IconSearch, IconAlertCircle } from \\\"@douyinfe/semi-icons\\\";\\nimport { IconToken } from \\\"@douyinfe/semi-icons-lab\\\";\\n\\nfunction Demo() {\\n    return (\\n        <Dropdown\\n            position=\\\"bottomLeft\\\"\\n            render={\\n                <Dropdown.Menu>\\n                    <Dropdown.Title>Group 1</Dropdown.Title>\\n                    <Dropdown.Item icon={<IconBox />}>\\n                        Menu Item 1\\n                        <HotKeys\\n                            style={{ marginLeft: 20 }}\\n                            hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.B]}\\n                            content={['Ctrl', 'B']}\\n                        ></HotKeys>\\n                    </Dropdown.Item>\\n                    <Dropdown.Item icon={<IconSetting />}>\\n                        Menu Item 2\\n                        <HotKeys\\n                            style={{ marginLeft: 20 }}\\n                            hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.V]}\\n                            content={['Ctrl', 'V']}\\n                        ></HotKeys>\\n                    </Dropdown.Item>\\n                    <Dropdown.Item disabled icon={<IconForward />}>\\n                        Menu Item 3\\n                        <HotKeys\\n                            style={{ marginLeft: 20 }}\\n                            hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.F3]}\\n                            content={['Ctrl', 'F3']}\\n                        ></HotKeys>\\n                    </Dropdown.Item>\\n                    <Dropdown.Divider />\\n                    <Dropdown.Title>Group 2</Dropdown.Title>\\n                    <Dropdown.Item type=\\\"tertiary\\\" icon={<IconRefresh />}>Tertiary text</Dropdown.Item>\\n                    <Dropdown.Item type=\\\"warning\\\" icon={<IconSearch />}>\\n                        Warning Text\\n                    </Dropdown.Item>\\n                    <Dropdown.Item type=\\\"danger\\\" icon={<IconAlertCircle />}>Danger text</Dropdown.Item>\\n                </Dropdown.Menu>\\n            }\\n        >\\n            <Button theme=\\\"outline\\\" type=\\\"tertiary\\\" icon={<IconToken />}>\\n                Hover Me\\n            </Button>\\n        </Dropdown>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Nested Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Users can nested \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Dropdown\"), \", which is suitable for situations with multiple sublevel options.\"), 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, { useMemo } from 'react';\\nimport { Dropdown, Tag } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const subDropdown = useMemo(\\n        () => (\\n            <Dropdown.Menu>\\n                <Dropdown.Item>Menu Item 1</Dropdown.Item>\\n                <Dropdown.Item>Menu Item 2</Dropdown.Item>\\n                <Dropdown.Item>Menu Item 3</Dropdown.Item>\\n            </Dropdown.Menu>\\n        ),\\n        []\\n    );\\n\\n    return (\\n        <div style={{ margin: 100 }}>\\n            <Dropdown\\n                render={\\n                    <Dropdown.Menu>\\n                        <Dropdown position={'rightTop'} render={subDropdown}>\\n                            <Dropdown.Item>Menu Item 1</Dropdown.Item>\\n                        </Dropdown>\\n                        <Dropdown position={'leftTop'} render={subDropdown}>\\n                            <Dropdown.Item>Menu Item 2</Dropdown.Item>\\n                        </Dropdown>\\n                        <Dropdown.Item>Menu Item 3</Dropdown.Item>\\n                    </Dropdown.Menu>\\n                }\\n            >\\n                <Tag>Hover Me</Tag>\\n            </Dropdown>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Popup Position\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The position of support is the same. \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://semi.design/en-US/show/tooltip#Position\"\n  }, \"Tooltip\"), \", commonly used are: \\\"bottom\\\", \\\"bottomLeft\\\", \\\"bottomRight\\\".\"), 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 { Dropdown, Tag } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    return (\\n        <div>\\n            <Dropdown\\n                position={'bottom'}\\n                render={\\n                    <Dropdown.Menu>\\n                        <Dropdown.Item>Menu Item 1</Dropdown.Item>\\n                        <Dropdown.Item>Menu Item 2</Dropdown.Item>\\n                        <Dropdown.Item>Menu Item 3</Dropdown.Item>\\n                    </Dropdown.Menu>\\n                }\\n            >\\n                <Tag>Bottom</Tag>\\n            </Dropdown>\\n            <br />\\n            <br />\\n            <Dropdown\\n                position={'bottomLeft'}\\n                render={\\n                    <Dropdown.Menu>\\n                        <Dropdown.Item>Menu Item 1</Dropdown.Item>\\n                        <Dropdown.Item>Menu Item 2</Dropdown.Item>\\n                        <Dropdown.Item>Menu Item 3</Dropdown.Item>\\n                    </Dropdown.Menu>\\n                }\\n            >\\n                <Tag>bottomLeft</Tag>\\n            </Dropdown>\\n            <br />\\n            <br />\\n            <Dropdown\\n                position={'bottomRight'}\\n                render={\\n                    <Dropdown.Menu>\\n                        <Dropdown.Item>Menu Item 1</Dropdown.Item>\\n                        <Dropdown.Item>Menu Item 2</Dropdown.Item>\\n                        <Dropdown.Item>Menu Item 3</Dropdown.Item>\\n                    </Dropdown.Menu>\\n                }\\n            >\\n                <Tag>bottomRight</Tag>\\n            </Dropdown>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Trigger Mode\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The default is the move-in Trigger, which can be expanded by getting focus, clicking, or customizing the event trigger menu.\"), 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 { Dropdown, Tag, Input, Button } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    return (\\n        <div>\\n            <Dropdown\\n                trigger={'hover'}\\n                position={'bottomLeft'}\\n                render={\\n                    <Dropdown.Menu>\\n                        <Dropdown.Item>Menu Item 1</Dropdown.Item>\\n                        <Dropdown.Item>Menu Item 2</Dropdown.Item>\\n                        <Dropdown.Item>Menu Item 3</Dropdown.Item>\\n                    </Dropdown.Menu>\\n                }\\n            >\\n                <Tag>Hover me</Tag>\\n            </Dropdown>\\n            <br />\\n            <br />\\n            <Dropdown\\n                trigger={'focus'}\\n                position={'bottomLeft'}\\n                render={\\n                    <Dropdown.Menu tabindex={-1}>\\n                        <Dropdown.Item>Menu Item 1</Dropdown.Item>\\n                        <Dropdown.Item>Menu Item 2</Dropdown.Item>\\n                        <Dropdown.Item>Menu Item 3</Dropdown.Item>\\n                    </Dropdown.Menu>\\n                }\\n            >\\n                <div style={{\\n                    border: '1px solid var(--semi-color-border)',\\n                    borderRadius: 4,\\n                    height: 36,\\n                    width: 220\\n                }}>\\n                    Please use Tab to focus this div\\n                </div>\\n            </Dropdown>\\n            <br />\\n            <br />\\n            <Dropdown\\n                trigger={'click'}\\n                position={'bottomLeft'}\\n                render={\\n                    <Dropdown.Menu>\\n                        <Dropdown.Item>Menu Item 1</Dropdown.Item>\\n                        <Dropdown.Item>Menu Item 2</Dropdown.Item>\\n                        <Dropdown.Item>Menu Item 3</Dropdown.Item>\\n                    </Dropdown.Menu>\\n                }\\n            >\\n                <Button>Click me</Button>\\n            </Dropdown>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Trigger Event\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Click on the menu item to trigger different mouse events, support \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onClick\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onMouseEnter\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onMouseLeave\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onContextMenu\"), \".\"), 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 { Dropdown, Button, Toast } from '@douyinfe/semi-ui';\\nimport { IconToken } from \\\"@douyinfe/semi-icons-lab\\\";\\n\\n() => {\\n    return (\\n        <Dropdown\\n            trigger={'click'}\\n            position={'bottomLeft'}\\n            render={\\n                <Dropdown.Menu>\\n                    <Dropdown.Item onClick={() => Toast.info({ content: 'You clicked me!' })}>\\n                        1: click me!\\n                    </Dropdown.Item>\\n                    <Dropdown.Item onMouseEnter={() => Toast.info({ content: 'Nice to meet you!' })}>\\n                        2: mouse enter\\n                    </Dropdown.Item>\\n                    <Dropdown.Item onMouseLeave={() => Toast.info({ content: 'See ya!' })}>\\n                        3: mouse leave\\n                    </Dropdown.Item>\\n                    <Dropdown.Item onContextMenu={() => Toast.info({ content: 'Right clicked!' })}>\\n                        4: right click\\n                    </Dropdown.Item>\\n                </Dropdown.Menu>\\n            }\\n        >\\n            <Button theme=\\\"outline\\\" type=\\\"tertiary\\\" icon={<IconToken />}>\\n                Click Me\\n            </Button>\\n        </Dropdown>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Json Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Can use the menu attribute to configure the Dropdown content menu\"), 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 { Dropdown, Button } from '@douyinfe/semi-ui';\\nimport { IconToken } from \\\"@douyinfe/semi-icons-lab\\\";\\n\\nfunction DropdownEvents() {\\n    const menu = [\\n        { node: 'title', name: 'Group1' },\\n        { node: 'item', name: 'primary1', type: 'primary', onClick: () => console.log('click primary') },\\n        { node: 'item', name: 'secondary', type: 'secondary' },\\n        { node: 'divider' },\\n        { node: 'title', name: 'Group2' },\\n        { node: 'item', name: 'tertiary', type: 'tertiary' },\\n        { node: 'item', name: 'warning', type: 'warning', active: true },\\n        { node: 'item', name: 'danger', type: 'danger' },\\n    ];\\n    return (\\n        <Dropdown trigger={'click'} showTick position={'bottomLeft'} menu={menu}>\\n            <Button theme=\\\"outline\\\" type=\\\"tertiary\\\" icon={<IconToken />}>\\n                Click Me\\n            </Button>\\n        </Dropdown>\\n    );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API Reference\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Dropdown\"), 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  }, \"Instructions\"), 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  }, \"autoAdjustOverflow\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether the pop-up layer automatically adjusts its direction when it is blocked\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\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  }, \"classname of the outer style of the pop-up layer\"), 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  }, \"closeOnEsc\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to close the panel by pressing the Esc key in the trigger or popup layer. It does not take effect when visible is under controlled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.13.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"children\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Child elements wrapped by the drop layer\"), 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  }, \"clickToHide\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to close the drop-down layer automatically when clicking on the drop-down layer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), 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  }, \"contentClassName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Drop-down menu root element 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  }, \"disableFocusListener\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"When trigger is \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"hover\"), \", does not respond to the keyboard focus popup event, see details at \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://github.com/DouyinFE/semi-design/issues/977\"\n  }, \"issue#977\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.17.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"keepDOM\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to keep the internal component DOM from being destroyed when closing\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.31.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getPopupContainer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Specifies the parent DOM, and the bullet layer will be rendered to the DOM, you need to set 'position: relative`  This will change the DOM tree position, but not the view's rendering position.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function():HTMLElement\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => document.body\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"margin\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Popup layer calculates the size of the safe area when the current direction overflows, used in scenes covered by fixed elements, more detail refer to \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://github.com/DouyinFE/semi-design/issues/549\"\n  }, \"issue#549\"), \", same as Tooltip margin\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\", \"|\", \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.25.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"mouseEnterDelay\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"After the mouse is moved into the Trigger, the display time is delayed, in milliseconds (only effective when the trigger is hover/focus)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"50\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"mouseLeaveDelay\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The time for the delay to disappear after the mouse moves out of the pop-up layer, in milliseconds (only effective when the trigger is hover/focus)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"50\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"menu\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Menu content config\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Array<DropdownMenuItem\", \">\"), 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  }, \"The position of the pop-up menu, commonly used: 'bottom', 'bottomLeft', 'bottomRight', for more details, see \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://semi.design/en-US/show/tooltip#Position\"\n  }, \"Tooltip Position\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'bottom'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"render\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Content of pop-up layer\\uFF0Cinclude \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"Dropdown.Menu\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"Dropdown.Item\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"Dropdown.Title\")), 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  }, \"rePosKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"You can update the value of this item to manually trigger the repositioning of the pop-up layer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), 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  }, \"spacing\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The distance between the pop-up layer and the \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"children\"), \" element, in px\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"4\"), 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  }, \"Pop-up layer inline style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), 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  }, \"showTick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to automatically display the checked tick on the left of the active Dropdown.Item item\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"stopPropagation\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to prevent the click event on the pop-up layer from bubbling\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"trigger\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The act of triggering a drop-down, optional 'hover', 'focus', 'click', 'custom'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'hover'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"visible\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Display the menu or not, need to be used with trigger custom\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), 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  }, \"zIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Pop-up layer z-index value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1050\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onClickOutSide\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback when the pop-up layer is in the display state and the non-Children, non-floating layer inner area is clicked (only valid when trigger is custom, click)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e:event) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.1.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onEscKeyDown\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Called when Esc key is pressed in trigger or popup layer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(e:event)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.13.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onVisibleChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback when the pop-up layer display state changes\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Dropdown.Menu\"), 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  }, \"Instructions\"), 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  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Drop-down menu style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), 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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Drop-down menu style 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  }, \"children\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The child elements wrapped by the drop-down menu, usually \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"Dropdown.Item\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"Dropdown.Title\")), 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(\"h3\", {\n    parentName: \"section\"\n  }, \"Dropdown.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  }, \"Instructions\"), 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  }, \"active\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether the current item is in the active state, there is a tick on the left when the active state is activated, the font is bold, and the color is deepened. When the \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"showTick\"), \" is false, even if the \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"active\"), \" is true, the tick will not be displayed\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\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  }, \"Style 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  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Do you disable the menu?\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"icon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Icon of DropdownItem, will be displayed on the left\"), 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  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Inline style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), 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  }, \"Type, optional values: \\\"primary\\\",\\\"secondary\\\", \\\"tertiary\\\", \\\"warning\\\", \\\"danger\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"tertiary\\\"\"), 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 the trigger callback event\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function\"), 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  }, \"onContextMenu\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The callback event triggered by right click\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function\"), 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  }, \"onMouseEnter\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"A callback event triggered by MouseEnter\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function\"), 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  }, \"onMouseLeave\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The callback event triggered by Mouse Leave\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Dropdown.Title\"), 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  }, \"Instructions\"), 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  }, \"Style 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  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Inline style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{}\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"DropdownMenuItem\"), 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  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"node\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"menu type: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"title\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"item\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"divider\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"menu content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Other Properties refer to Title\\u3001Item\\u3001Divider\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), 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  }, \"Dropdown.Menu \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"role\"), \" is set to \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"menu\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-orientatio\"), \" is set to \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"vertical\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Dropdown.Item \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"role\"), \" is set to \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"menuitem\"))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Keyboard and Focus\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Dropdown triggers can be focused, currently supports 3 triggering methods:\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When the trigger method is set to hover or focus: the Dropdown is opened when the mouse is hovering or focused. After the Dropdown is opened, the user can use the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Down Arrow\"), \" to move the focus to the Dropdown\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When the trigger method is set to click: Use the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Enter\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Space\"), \" key to open the Dropdown when clicking the trigger or focusing, and the focus will automatically focus on the first non-disabled item in the Dropdown\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When the focus is on the menu item inside the Dropdown:\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Keyboard users can use the keyboard \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Up Arrow\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Down Arrow\"), \" to switch between interactable elements\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Use the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Enter\"), \" key or the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Space\"), \" key to activate the focused menu item, if the menu item is bound to onClick, the event will be fired\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Keyboard users can close the Dropdown by pressing \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Esc\"), \", after which the focus returns to the trigger\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Keyboard interaction does not yet fully support nested scenes\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Content Guidelines\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The content of the options in the drop-down box needs to be expressed accurately and contain information to make it easier for users to choose among the options when browsing\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Use statement-like capitalization and write options concisely and clearly\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"In the case of an action option, use a verb or verb phrase to describe the action that will occur when the user selects the option. For example, \\\"Move\\\", \\\"Log time\\\", or \\\"Hide labels\\\"\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"do not use prepositions\")), 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  }, \"\\u2705 Recommended usage\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u274C Deprecated usage\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"div\", {\n    style: {\n      height: 150\n    }\n  }, mdx(Dropdown, {\n    visible: true,\n    trigger: 'custom',\n    autoAdjustOverflow: false,\n    position: 'bottomLeft',\n    menu: [{\n      node: 'item',\n      name: 'Add text'\n    }, {\n      node: 'item',\n      name: 'Add link'\n    }, {\n      node: 'item',\n      name: 'Add image'\n    }, {\n      node: 'item',\n      name: 'Add video'\n    }],\n    mdxType: \"Dropdown\"\n  }))), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"div\", {\n    style: {\n      height: 150\n    }\n  }, mdx(Dropdown, {\n    visible: true,\n    trigger: 'custom',\n    autoAdjustOverflow: false,\n    position: 'bottomLeft',\n    menu: [{\n      node: 'item',\n      name: 'Add a text'\n    }, {\n      node: 'item',\n      name: 'Add a link'\n    }, {\n      node: 'item',\n      name: 'Add a image'\n    }, {\n      node: 'item',\n      name: 'Add a video'\n    }],\n    mdxType: \"Dropdown\"\n  }))))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Design Tokens\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FAQ\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Why does the Dropdown layer accidentally wrap when the width is not enough near the screen border?\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"  After Chromium 104, the wrapping rendering strategy when the width of the screen border text is not enough has changed. For details, see \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/DouyinFE/semi-design/issues/1022\"\n  }, \"issue #1022\"), \", the semi-side has been This problem was fixed in v2.17.0.\")))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Related Material\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"semi-material-list\", {\n    code: \"5\"\n  }))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/show/dropdown","next":{"fields":{"slug":"zh-CN/show/dropdown"},"id":"568ab16e-356c-5130-8d4d-d1b4127c4579","frontmatter":{"title":"Dropdown 下拉框","localeCode":"zh-CN","icon":"doc-dropdown","showNew":null}},"previous":{"fields":{"slug":"zh-CN/show/descriptions"},"id":"a6561aa4-3e8f-5f34-b4e2-85fa69f3023a","frontmatter":{"title":"Descriptions 描述列表","localeCode":"zh-CN","icon":"doc-descriptions","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}