mirror of
https://github.com/lingble/twenty.git
synced 2025-11-25 02:15:07 +00:00
Remaining UI docs (#2997)
* remaining UI docs * completed ui component docs --------- Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Nimra Ahmed
@@ -0,0 +1,46 @@
|
||||
---
|
||||
title: Block Editor
|
||||
sidebar_position: 11
|
||||
sidebar_custom_props:
|
||||
icon: TbTemplate
|
||||
---
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
import blockEditorCode from '!!raw-loader!@site/src/ui/input/blockEditorCode.js'
|
||||
|
||||
Uses a block-based rich text editor from [BlockNote](https://www.blocknotejs.org/) to allow users to edit and view blocks of content.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/editor/components/BlockEditor']}
|
||||
componentCode={blockEditorCode}
|
||||
/>
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>editor</td>
|
||||
<td>`BlockNoteEditor`</td>
|
||||
<td>The block editor instance or configuration</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
@@ -772,7 +772,6 @@ A list of buttons and button groups used throughout the app.
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@@ -781,14 +780,12 @@ A list of buttons and button groups used throughout the app.
|
||||
<td>Icon</td>
|
||||
<td>`React.ComponentType`</td>
|
||||
<td>An optional icon component that's displayed within the button</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>React `button` props</td>
|
||||
<td>`React.ButtonHTMLAttributes<HTMLButtonElement>`</td>
|
||||
<td>Additional props from React's `button` element</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
||||
@@ -50,12 +50,14 @@ Represents different color schemes and is specially tailored for light and dark
|
||||
<td>selected</td>
|
||||
<td>boolean</td>
|
||||
<td>If `true`, displays a checkmark to indicate the selected color scheme</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>additional props</td>
|
||||
<td>`React.ComponentPropsWithoutRef<'div'>`</td>
|
||||
<td>Standard HTML `div` element props</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"label": "Navigation",
|
||||
"position": 4,
|
||||
"collapsible": true,
|
||||
"collapsed": false,
|
||||
"customProps": {
|
||||
"icon": "TbNavigation"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: Breadcrumb
|
||||
sidebar_position: 1
|
||||
sidebar_custom_props:
|
||||
icon: TbSquareChevronsRight
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
import breadcrumbCode from '!!raw-loader!@site/src/ui/navigation/breadcrumbCode.js'
|
||||
|
||||
Renders a breadcrumb navigation bar.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/navigation/bread-crumb/components/Breadcrumb']}
|
||||
componentCode={breadcrumbCode}
|
||||
/>
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional class name for additional styling</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>links</td>
|
||||
<td>array</td>
|
||||
<td>An array of objects, each representing a breadcrumb link. Each object has a `children` property (the text content of the link) and an optional `href` property (the URL to navigate to when the link is clicked)</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,237 @@
|
||||
---
|
||||
title: Links
|
||||
sidebar_position: 2
|
||||
sidebar_custom_props:
|
||||
icon: TbLink
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
import contactLinkCode from '!!raw-loader!@site/src/ui/navigation/link/contactLinkCode.js'
|
||||
import rawLinkCode from '!!raw-loader!@site/src/ui/navigation/link/rawLinkCode.js'
|
||||
import roundedLinkCode from '!!raw-loader!@site/src/ui/navigation/link/roundedLinkCode.js'
|
||||
import socialLinkCode from '!!raw-loader!@site/src/ui/navigation/link/socialLinkCode.js'
|
||||
|
||||
|
||||
## Contact Link
|
||||
|
||||
A stylized link component for displaying contact information.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/navigation/link/components/ContactLink']}
|
||||
componentCode={contactLinkCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional name for additional styling</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>href</td>
|
||||
<td>string</td>
|
||||
<td>The target URL or path for the link</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onClick</td>
|
||||
<td>function</td>
|
||||
<td>Callback function to be triggered when the link is clicked</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>children</td>
|
||||
<td>`React.ReactNode`</td>
|
||||
<td>The content to be displayed inside the link</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Raw Link
|
||||
|
||||
A stylized link component for displaying links.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/navigation/link/components/RawLink']}
|
||||
componentCode={rawLinkCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional name for additional styling</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>href</td>
|
||||
<td>string</td>
|
||||
<td>The target URL or path for the link</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onClick</td>
|
||||
<td>function</td>
|
||||
<td>Callback function to be triggered when the link is clicked</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>children</td>
|
||||
<td>`React.ReactNode`</td>
|
||||
<td>The content to be displayed inside the link</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Rounded Link
|
||||
|
||||
A rounded-styled link with a Chip component for links.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/navigation/link/components/RoundedLink']}
|
||||
componentCode={roundedLinkCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>href</td>
|
||||
<td>string</td>
|
||||
<td>The target URL or path for the link</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>children</td>
|
||||
<td>`React.ReactNode`</td>
|
||||
<td>The content to be displayed inside the link</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onClick</td>
|
||||
<td>function</td>
|
||||
<td>Callback function to be triggered when the link is clicked</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Social Link
|
||||
|
||||
Stylized social links, with support for various social link types, such as URLs, LinkedIn, and X (or Twitter).
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/navigation/link/components/SocialLink']}
|
||||
componentCode={socialLinkCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>href</td>
|
||||
<td>string</td>
|
||||
<td>The target URL or path for the link</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>children</td>
|
||||
<td>`React.ReactNode`</td>
|
||||
<td>The content to be displayed inside the link</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>type</td>
|
||||
<td>string</td>
|
||||
<td>The type of social links. Options include: `url`, `LinkedIn`, and `Twitter`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onClick</td>
|
||||
<td>function</td>
|
||||
<td>Callback function to be triggered when the link is clicked</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,768 @@
|
||||
---
|
||||
title: Menu Item
|
||||
sidebar_position: 3
|
||||
sidebar_custom_props:
|
||||
icon: TbMenu
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
import menuItemCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemCode.js'
|
||||
import menuItemCommandCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemCommandCode.js'
|
||||
import menuItemDraggableCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemDraggableCode.js'
|
||||
import menuItemMultiSelectAvatarCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemMultiSelectAvatarCode.js'
|
||||
import menuItemMultiSelectCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemMultiSelectCode.js'
|
||||
import menuItemNavigateCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemNavigateCode.js'
|
||||
import menuItemSelectAvatarCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemSelectAvatarCode.js'
|
||||
import menuItemSelectCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemSelectCode.js'
|
||||
import menuItemSelectColorCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemSelectColorCode.js'
|
||||
import menuItemToggleCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemToggleCode.js'
|
||||
|
||||
A versatile menu item designed to be used in a menu or navigation list.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItem']}
|
||||
componentCode={menuItemCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>LeftIcon</td>
|
||||
<td>IconComponent</td>
|
||||
<td>An optional left icon displayed before the text in the menu item</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>accent</td>
|
||||
<td>string</td>
|
||||
<td>Specifies the accent color of the menu item. Options include: `default`, `danger`, and `placeholder`</td>
|
||||
<td>default</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>text</td>
|
||||
<td>string</td>
|
||||
<td>The text content of the menu item</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>iconButtons</td>
|
||||
<td>array</td>
|
||||
<td>An array of objects representing additional icon buttons associated with the menu item</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>isTooltipOpen</td>
|
||||
<td>boolean</td>
|
||||
<td>Controls the visibility of the tooltip associated with the menu item</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>testId</td>
|
||||
<td>string</td>
|
||||
<td>The data-testid attribute for testing purposes</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onClick</td>
|
||||
<td>function</td>
|
||||
<td>Callback function triggered when the menu item is clicked</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional name for additional styling</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Variants
|
||||
|
||||
The different variants of the menu item component include the following:
|
||||
|
||||
### Command
|
||||
|
||||
A command-style menu item within a menu to indicate keyboard shortcuts.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemCommand']}
|
||||
componentCode={menuItemCommandCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>LeftIcon</td>
|
||||
<td>IconComponent</td>
|
||||
<td>An optional left icon displayed before the text in the menu item</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>text</td>
|
||||
<td>string</td>
|
||||
<td>The text content of the menu item</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>firstHotKey</td>
|
||||
<td>string</td>
|
||||
<td>The first keyboard shortcut associated with the command</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>secondHotKey</td>
|
||||
<td>string</td>
|
||||
<td>The second keyboard shortcut associated with the command</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>isSelected</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether the menu item is selected or highlighted</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onClick</td>
|
||||
<td>function</td>
|
||||
<td>Callback function triggered when the menu item is clicked</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional name for additional styling</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
### Draggable
|
||||
|
||||
A draggable menu item component designed to be used in a menu or list where items can be dragged, and additional actions can be performed through icon buttons.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemDraggable']}
|
||||
componentCode={menuItemDraggableCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>LeftIcon</td>
|
||||
<td>IconComponent</td>
|
||||
<td>An optional left icon displayed before the text in the menu item</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>accent</td>
|
||||
<td>string</td>
|
||||
<td>The accent color of the menu item. It can either be `default`, `placeholder`, and `danger`</td>
|
||||
<td>default</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>iconButtons</td>
|
||||
<td>array</td>
|
||||
<td>An array of objects representing additional icon buttons associated with the menu item</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>isTooltipOpen</td>
|
||||
<td>boolean</td>
|
||||
<td>Controls the visibility of the tooltip associated with the menu item</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onClick</td>
|
||||
<td>function</td>
|
||||
<td>Callback function to be triggered when the link is clicked</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>text</td>
|
||||
<td>string</td>
|
||||
<td>The text content of the menu item</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>isDragDisabled</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether dragging is disabled</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional name for additional styling</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
### Multi Select
|
||||
|
||||
Provides a way to implement multi-select functionality with an associated checkbox.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemMultiSelect']}
|
||||
componentCode={menuItemMultiSelectCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>LeftIcon</td>
|
||||
<td>IconComponent</td>
|
||||
<td>An optional left icon displayed before the text in the menu item</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>text</td>
|
||||
<td>string</td>
|
||||
<td>The text content of the menu item</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>selected</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether the menu item is selected (checked)</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onSelectChange</td>
|
||||
<td>function</td>
|
||||
<td>Callback function triggered when the checkbox state changes</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional name for additional styling</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
### Multi Select Avatar
|
||||
|
||||
A multi-select menu item with an avatar, a checkbox for selection, and textual content.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar']}
|
||||
componentCode={menuItemMultiSelectAvatarCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>avatar</td>
|
||||
<td>`ReactNode`</td>
|
||||
<td>The avatar or icon to be displayed on the left side of the menu item</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>text</td>
|
||||
<td>string</td>
|
||||
<td>The text content of the menu item</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>selected</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether the menu item is selected (checked)</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onSelectChange</td>
|
||||
<td>function</td>
|
||||
<td>Callback function triggered when the checkbox state changes</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional name for additional styling</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
### Navigate
|
||||
|
||||
A menu item featuring an optional left icon, textual content, and a right-chevron icon.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemNavigate']}
|
||||
componentCode={menuItemNavigateCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>LeftIcon</td>
|
||||
<td>IconComponent</td>
|
||||
<td>An optional left icon displayed before the text in the menu item</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>text</td>
|
||||
<td>string</td>
|
||||
<td>The text content of the menu item</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onClick</td>
|
||||
<td>function</td>
|
||||
<td>Callback function to be triggered when the menu item is clicked</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional name for additional styling</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
### Select
|
||||
|
||||
A selectable menu item, featuring optional left content (icon and text) and an indicator (check icon) for the selected state.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemSelect']}
|
||||
componentCode={menuItemSelectCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>LeftIcon</td>
|
||||
<td>IconComponent</td>
|
||||
<td>An optional left icon displayed before the text in the menu item</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>text</td>
|
||||
<td>string</td>
|
||||
<td>The text content of the menu item</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>selected</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether the menu item is selected (checked)</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether the menu item is disabled</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>hovered</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether the menu item is currently being hovered over</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onClick</td>
|
||||
<td>function</td>
|
||||
<td>Callback function to be triggered when the menu item is clicked</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional name for additional styling</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
### Select Avatar
|
||||
|
||||
A selectable menu item with an avatar, featuring optional left content (avatar and text) and an indicator (check icon) for the selected state.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemSelectAvatar']}
|
||||
componentCode={menuItemSelectAvatarCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>avatar</td>
|
||||
<td>`ReactNode`</td>
|
||||
<td>The avatar or icon to be displayed on the left side of the menu item</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>text</td>
|
||||
<td>string</td>
|
||||
<td>The text content of the menu item</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>selected</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether the menu item is selected (checked)</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether the menu item is disabled</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>hovered</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether the menu item is currently being hovered over</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>testId</td>
|
||||
<td>string</td>
|
||||
<td>The data-testid attribute for testing purposes</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onClick</td>
|
||||
<td>function</td>
|
||||
<td>Callback function to be triggered when the menu item is clicked</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional name for additional styling</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
### Select Color
|
||||
|
||||
A selectable menu item with a color sample for scenarios where you want users to choose a color from a menu.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemSelectColor']}
|
||||
componentCode={menuItemSelectColorCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>color</td>
|
||||
<td>string</td>
|
||||
<td>The theme color to be displayed as a sample in the menu item. Options include: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow`, and `gray`</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>selected</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether the menu item is selected (checked)</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether the menu item is disabled</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>hovered</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether the menu item is currently being hovered over</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>variant</td>
|
||||
<td>string</td>
|
||||
<td>The variant of the color sample. It can either be `default` or `pipeline`</td>
|
||||
<td>default</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onClick</td>
|
||||
<td>function</td>
|
||||
<td>Callback function to be triggered when the menu item is clicked</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional name for additional styling</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
### Toggle
|
||||
|
||||
A menu item with an associated toggle switch to allow users to enable or disable a specific feature
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemToggle']}
|
||||
componentCode={menuItemToggleCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>LeftIcon</td>
|
||||
<td>IconComponent</td>
|
||||
<td>An optional left icon displayed before the text in the menu item</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>text</td>
|
||||
<td>string</td>
|
||||
<td>The text content of the menu item</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>toggled</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether the toggle switch is in the "on" or "off" state</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onToggleChange</td>
|
||||
<td>function</td>
|
||||
<td>Callback function triggered when the toggle switch state changes</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>toggleSize</td>
|
||||
<td>string</td>
|
||||
<td>The size of the toggle switch. It can be either 'small' or 'medium'</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional name for additional styling</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: Navigation Bar
|
||||
sidebar_position: 4
|
||||
sidebar_custom_props:
|
||||
icon: TbRectangle
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
import navBarCode from '!!raw-loader!@site/src/ui/navigation/navBarCode.js'
|
||||
|
||||
Renders a navigation bar that contains multiple `NavigationBarItem` components.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/navigation/navigation-bar/components/NavigationBar']}
|
||||
componentCode={navBarCode}
|
||||
/>
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>activeItemName</td>
|
||||
<td>string</td>
|
||||
<td>The name of the currently active navigation item</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>items</td>
|
||||
<td>array</td>
|
||||
<td>An array of objects representing each navigation item. Each object contains the `name` of the item, the `Icon` component to display, and an `onClick` function to be called when the item is clicked</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: Step Bar
|
||||
sidebar_position: 5
|
||||
sidebar_custom_props:
|
||||
icon: TbCircleCheckFilled
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
import stepBarCode from '!!raw-loader!@site/src/ui/navigation/stepBarCode.js'
|
||||
|
||||
Displays progress through a sequence of numbered steps by highlighting the active step. It renders a container with steps, each represented by the `Step` component.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/navigation/step-bar/components/StepBar']}
|
||||
componentCode={stepBarCode}
|
||||
/>
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>activeStep</td>
|
||||
<td>number</td>
|
||||
<td>The index of the currently active step. This determines which step should be visually highlighted</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
Reference in New Issue
Block a user