@iress-oss/ids-mcp-server 0.0.1-dev.0

package/generated/docs/components-menu-menuitem-docs.md

@@ -0,0 +1,193 @@
+[](#menu-item)Menu Item
+=======================
+
+Overview
+--------
+
+Menu items are headings, buttons and dividers used inside an \`IressMenu\`
+
+Menu item
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+<IressMenuItem\>
+  Menu item
+</IressMenuItem\>
+
+Copy
+
+[](#examples)Examples
+---------------------
+
+### [](#selected)Selected
+
+The `IressMenuItem` can be set to selected using the `selected` prop.
+
+**Note:** If you are using `IressMenu` with a `role` of `listbox`, you should use the `defaultSelected` or `selected` prop on the `IressMenu` to set the selected state of its `<IressMenuItem />` children, as the `selected` prop will be ignored.
+
+Menu item
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+<IressMenuItem selected\>
+  Menu item
+</IressMenuItem\>
+
+Copy
+
+### [](#value)Value
+
+A menu item can have a unique value set to it, used to determine its selected state in a `IressMenu` component with a `role` of `listbox`. The value is not visible to end users.
+
+Menu item with value
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+<IressMenu role\="listbox"\>
+  <IressMenuItem value\={9}\>
+    Menu item with value  </IressMenuItem\>
+</IressMenu\>
+
+Copy
+
+### [](#cantoggle)`canToggle`
+
+When `canToggle` is set to true, the menu item can be toggled between selected and unselected states. This only works in a `IressMenu` component with a `role` of `listbox`.
+
+Menu item with value
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+<IressMenu role\="listbox"\>
+  <IressMenuItem
+    canToggle
+    value\={9}
+  \>
+    Menu item with value  </IressMenuItem\>
+</IressMenu\>
+
+Copy
+
+### [](#prepend-and-append)Prepend and append
+
+You can prepend and append content to a menu item using the `prepend` and `append` props.
+
+Menu itemNew
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+<IressMenuItem
+  append\={<IressBadge mode\="success"\>New</IressBadge\>}
+  prepend\={<IressIcon name\="home" />}
+\>
+  Menu item
+</IressMenuItem\>
+
+Copy
+
+### [](#multi-select-menus)Multi-select menus
+
+Inside a `IressMenu` with a `role` of `listbox` and the `multiSelect` prop set to true, the menu item will display with a checkbox.
+
+Menu item with valueMenu item with value
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+<IressMenu
+  multiSelect
+  role\="listbox"
+\>
+  <IressMenuItem value\={9}\>
+    Menu item with value  </IressMenuItem\>
+  <IressMenuItem value\={9}\>
+    Menu item with value  </IressMenuItem\>
+</IressMenu\>
+
+Copy
+
+### [](#divider)Divider
+
+When `divider` is set to true, the menu item will render with a bottom border.
+
+Menu item with divider
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+<IressMenuItem divider\>
+  Menu item with divider
+</IressMenuItem\>
+
+Copy
+
+However, it is recommended to use the `IressMenuDivider` component instead.
+
+* * *
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+<IressMenuDivider />
+
+Copy
+
+### [](#heading)Heading
+
+You can use the `IressMenuHeading` to render a heading within a menu. By default it renders as a `h2`, but you can change it by setting the `level` prop.
+
+Menu heading
+------------
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+<IressMenuHeading\>
+  Menu heading
+</IressMenuHeading\>
+
+Copy
+
+### [](#text)Text
+
+You can use the `IressMenuText` to render text within a menu. This adds styling so the appropriate padding is applied.
+
+Menu text
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+<IressMenuText\>
+  Menu text
+</IressMenuText\>
+
+Copy
+
+On this page
+
+*   [Overview](#overview)
+*   [Props](#props)
+*   [Examples](#examples)
+    *   [Selected](#selected)
+    *   [Value](#value)
+    *   [canToggle](#cantoggle)
+    *   [Prepend and append](#prepend-and-append)
+    *   [Multi-select menus](#multi-select-menus)
+    *   [Divider](#divider)
+    *   [Heading](#heading)
+    *   [Text](#text)