Migrated Developer Docs (#5683)
- Migrated developer docs to Twenty website - Modified User Guide and Docs layout to include sections and subsections **Section Example:** <img width="549" alt="Screenshot 2024-05-30 at 15 44 42" src="https://github.com/twentyhq/twenty/assets/102751374/41bd4037-4b76-48e6-bc79-48d3d6be9ab8"> **Subsection Example:** <img width="557" alt="Screenshot 2024-05-30 at 15 44 55" src="https://github.com/twentyhq/twenty/assets/102751374/f14c65a9-ab0c-4530-b624-5b20fc00511a"> - Created different components (Tabs, Tables, Editors etc.) for the mdx files **Tabs & Editor** <img width="665" alt="Screenshot 2024-05-30 at 15 47 39" src="https://github.com/twentyhq/twenty/assets/102751374/5166b5c7-b6cf-417d-9f29-b1f674c1c531"> **Tables** <img width="698" alt="Screenshot 2024-05-30 at 15 57 39" src="https://github.com/twentyhq/twenty/assets/102751374/2bbfe937-ec19-4004-ab00-f7a56e96db4a"> <img width="661" alt="Screenshot 2024-05-30 at 16 03 32" src="https://github.com/twentyhq/twenty/assets/102751374/ae95b47c-dd92-44f9-b535-ccdc953f71ff"> - Created a crawler for Twenty Developers (now that it will be on the twenty website). Once this PR is merged and the website is re-deployed, we need to start crawling and make sure the index name is ‘twenty-developer’ - Added a dropdown menu in the header to access User Guide and Developers + added Developers to footer https://github.com/twentyhq/twenty/assets/102751374/1bd1fbbd-1e65-4461-b18b-84d4ddbb8ea1 - Made new layout responsive Please fill in the information for each mdx file so that it can appear on its card, as well as in the ‘In this article’ section. Example with ‘Getting Started’ in the User Guide: <img width="786" alt="Screenshot 2024-05-30 at 16 29 39" src="https://github.com/twentyhq/twenty/assets/102751374/2714b01d-a664-4ddc-9291-528632ee12ea"> Example with info and sectionInfo filled in for 'Getting Started': <img width="620" alt="Screenshot 2024-05-30 at 16 33 57" src="https://github.com/twentyhq/twenty/assets/102751374/bc69e880-da6a-4b7e-bace-1effea866c11"> Please keep in mind that the images that are being used for Developers are the same as those found in User Guide and may not match the article. --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Ady Beraud
@ -0,0 +1,38 @@
|
||||
export const TWENTY_UI_INDEX = {
|
||||
Components: {
|
||||
Display: [
|
||||
{ fileName: 'display' },
|
||||
{ fileName: 'checkmark' },
|
||||
{ fileName: 'chip' },
|
||||
{ fileName: 'icons' },
|
||||
{ fileName: 'soon-pill' },
|
||||
{ fileName: 'tag' },
|
||||
{ fileName: 'app-tooltip' },
|
||||
],
|
||||
Feedback: [{ fileName: 'progress-bar' }],
|
||||
Input: [
|
||||
{ fileName: 'input' },
|
||||
{ fileName: 'buttons' },
|
||||
{ fileName: 'color-scheme' },
|
||||
{ fileName: 'text' },
|
||||
{ fileName: 'checkbox' },
|
||||
{ fileName: 'icon-picker' },
|
||||
{ fileName: 'image-input' },
|
||||
{ fileName: 'radio' },
|
||||
{ fileName: 'select' },
|
||||
{ fileName: 'toggle' },
|
||||
{ fileName: 'block-editor' },
|
||||
],
|
||||
Navigation: [
|
||||
{ fileName: 'navigation' },
|
||||
{ fileName: 'breadcrumb' },
|
||||
{ fileName: 'links' },
|
||||
{ fileName: 'menu-item' },
|
||||
{ fileName: 'navigation-bar' },
|
||||
{ fileName: 'step-bar' },
|
||||
],
|
||||
},
|
||||
Developers: {
|
||||
'Empty Section': [],
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Display
|
||||
icon: IconUsers
|
||||
image: /images/user-guide/views/filter.png
|
||||
---
|
||||
@ -0,0 +1,82 @@
|
||||
---
|
||||
title: App Tooltip
|
||||
icon: TbTooltip
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
A brief message that displays additional information when a user interacts with an element.
|
||||
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<>
|
||||
<p id="hoverText" style={{ display: "inline-block" }}>
|
||||
Customer Insights
|
||||
</p>
|
||||
<AppTooltip
|
||||
className
|
||||
anchorSelect="#hoverText"
|
||||
content="Explore customer behavior and preferences"
|
||||
delayHide={0}
|
||||
offset={6}
|
||||
noArrow={false}
|
||||
isOpen={true}
|
||||
place="bottom"
|
||||
positionStrategy="absolute"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['className', 'string', 'Optional CSS class for additional styling'],
|
||||
['anchorSelect', 'CSS selector', 'Selector for the tooltip anchor (the element that triggers the tooltip)'],
|
||||
['content', 'string', 'The content you want to display within the tooltip'],
|
||||
['delayHide', 'number', 'The delay in seconds before hiding the tooltip after the cursor leaves the anchor'],
|
||||
['offset', 'number', 'The offset in pixels for positioning the tooltip'],
|
||||
['noArrow', 'boolean', 'If `true`, hides the arrow on the tooltip'],
|
||||
['isOpen', 'boolean', 'If `true`, the tooltip is open by default'],
|
||||
['place', '`PlacesType` string from `react-tooltip`', 'Specifies the placement of the tooltip. Values include `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, and `left-end`'],
|
||||
['positionStrategy', '`PositionStrategy` string from `react-tooltip`', 'Position strategy for the tooltip. Has two values: `absolute` and `fixed`']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
|
||||
## Overflowing Text with Tooltip
|
||||
|
||||
Handles overflowing text and displays a tooltip when the text overflows.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { OverflowingTextWithTooltip } from 'twenty-ui';
|
||||
|
||||
export const MyComponent = () => {
|
||||
const crmTaskDescription =
|
||||
'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
|
||||
|
||||
return <OverflowingTextWithTooltip text={crmTaskDescription} />;
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['text', 'string', 'The content you want to display in the overflowing text area']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
title: Checkmark
|
||||
icon: TbCheck
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
---
|
||||
|
||||
Represents a successful or completed action.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { Checkmark } from 'twenty-ui';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <Checkmark />;
|
||||
};`} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
Extends `React.ComponentPropsWithoutRef<'div'>` and accepts all the props of a regular `div` element.
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
|
||||
## Animated Checkmark
|
||||
|
||||
Represents a checkmark icon with the added feature of animation.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { AnimatedCheckmark } from 'twenty-ui';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<AnimatedCheckmark
|
||||
isAnimating={true}
|
||||
color="green"
|
||||
duration={0.5}
|
||||
size={30}
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['isAnimating', 'boolean', 'Controls whether the checkmark is animating', 'false'],
|
||||
['color', 'string', 'Color of the checkmark', "Theme's gray0"],
|
||||
['duration', 'number', 'The duration of the animation in seconds', '0.5 seconds'],
|
||||
['size', 'number', 'The size of the checkmark', '28 pixels']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
138
packages/twenty-website/src/content/twenty-ui/display/chip.mdx
Normal file
138
packages/twenty-website/src/content/twenty-ui/display/chip.mdx
Normal file
@ -0,0 +1,138 @@
|
||||
---
|
||||
title: Chip
|
||||
icon: TbLayoutList
|
||||
image: /images/user-guide/github/github-header.png
|
||||
---
|
||||
|
||||
A visual element that you can use as a clickable or non-clickable container with a label, optional left and right components, and various styling options to display labels and tags.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { Chip } from 'twenty-ui';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Chip
|
||||
size="large"
|
||||
label="Clickable Chip"
|
||||
clickable={true}
|
||||
variant="highlighted"
|
||||
accent="text-primary"
|
||||
leftComponent
|
||||
rightComponent
|
||||
maxWidth="200px"
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
`} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['linkToEntity', 'string', 'The link to the entity', ''],
|
||||
['entityId', 'string', 'The unique identifier for the entity', ''],
|
||||
['name', 'string', 'The name of the entity', ''],
|
||||
['pictureUrl', 'string', "The URL of the entity's picture", ''],
|
||||
['avatarType', 'Avatar Type', 'The type of avatar you want to display. Has two options: `rounded` and `squared`', 'rounded'],
|
||||
['variant', '`EntityChipVariant` enum', 'Variant of the entity chip you want to display. Has two options: `regular` and `transparent`', 'regular'],
|
||||
['LeftIcon', 'IconComponent', 'A React component representing an icon. Displayed on the left side of the chip', '']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
## Examples
|
||||
|
||||
### Transparent Disabled Chip
|
||||
|
||||
<SandpackEditor content={`import { Chip } from 'twenty-ui';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Chip
|
||||
size="large"
|
||||
label="Transparent Disabled Chip"
|
||||
clickable={false}
|
||||
variant="rounded"
|
||||
accent="text-secondary"
|
||||
leftComponent
|
||||
rightComponent
|
||||
maxWidth="200px"
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
`} />
|
||||
|
||||
<br/>
|
||||
|
||||
### Disabled Chip with Tooltip
|
||||
|
||||
<SandpackEditor content={`import { Chip } from "twenty-ui";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Chip
|
||||
size="large"
|
||||
label="Disabled chip that triggers a tooltip when overflowing."
|
||||
clickable={false}
|
||||
variant="regular"
|
||||
accent="text-primary"
|
||||
leftComponent
|
||||
rightComponent
|
||||
maxWidth="200px"
|
||||
className
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
|
||||
|
||||
## Entity Chip
|
||||
|
||||
A Chip-like element to display information about an entity.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import { EntityChip, IconTwentyStar } from 'twenty-ui';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Router>
|
||||
<EntityChip
|
||||
linkToEntity="/entity-link"
|
||||
entityId="entityTest"
|
||||
name="Entity name"
|
||||
pictureUrl=""
|
||||
avatarType="rounded"
|
||||
variant="regular"
|
||||
LeftIcon={IconTwentyStar}
|
||||
/>
|
||||
</Router>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['linkToEntity', 'string', 'The link to the entity', ''],
|
||||
['entityId', 'string', 'The unique identifier for the entity', ''],
|
||||
['name', 'string', 'The name of the entity', ''],
|
||||
['pictureUrl', 'string', "The URL of the entity's picture", ''],
|
||||
['avatarType', 'Avatar Type', 'The type of avatar you want to display. Has two options: `rounded` and `squared`', 'rounded'],
|
||||
['variant', '`EntityChipVariant` enum', 'Variant of the entity chip you want to display. Has two options: `regular` and `transparent`', 'regular'],
|
||||
['LeftIcon', 'IconComponent', 'A React component representing an icon. Displayed on the left side of the chip', '']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
@ -0,0 +1,80 @@
|
||||
---
|
||||
title: Icons
|
||||
icon: TbIcons
|
||||
image: /images/user-guide/objects/objects.png
|
||||
---
|
||||
|
||||
A list of icons used throughout our app.
|
||||
|
||||
## Tabler Icons
|
||||
|
||||
We use Tabler icons for React throughout the app.
|
||||
|
||||
<ArticleTabs label1="Installation" label2="Usage" label3="Props">
|
||||
|
||||
<ArticleTab>
|
||||
<br/>
|
||||
|
||||
```
|
||||
yarn add @tabler/icons-react
|
||||
```
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
You can import each icon as a component. Here's an example:
|
||||
<br />
|
||||
|
||||
<SandpackEditor content={`import { IconArrowLeft } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <IconArrowLeft color="red" size={48} />;
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['size', 'number', 'The height and width of the icon in pixels', '24'],
|
||||
['color', 'string', 'The color of the icons', 'currentColor'],
|
||||
['stroke', 'number', 'The stroke width of the icon in pixels', '2']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
|
||||
|
||||
|
||||
## Custom Icons
|
||||
|
||||
In addition to Tabler icons, the app also uses some custom icons.
|
||||
|
||||
### Icon Address Book
|
||||
|
||||
Displays an address book icon.
|
||||
|
||||
<ArticleTabs label1="Installation" label2="Usage">
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { IconAddressBook } from 'twenty-ui';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <IconAddressBook size={24} stroke={2} />;
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['size', 'number', 'The height and width of the icon in pixels', '24'],
|
||||
['stroke', 'number', 'The stroke width of the icon in pixels', '2']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Soon Pill
|
||||
icon: TbPill
|
||||
image: /images/user-guide/kanban-views/kanban.png
|
||||
---
|
||||
|
||||
A small badge or "pill" to indicate something is coming soon.
|
||||
|
||||
<SandpackEditor content={`import { SoonPill } from "@/ui/display/pill/components/SoonPill";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <SoonPill />;
|
||||
};`} />
|
||||
|
||||
@ -0,0 +1,39 @@
|
||||
---
|
||||
title: Tag
|
||||
icon: TbTag
|
||||
image: /images/user-guide/table-views/table.png
|
||||
---
|
||||
|
||||
Component to visually categorize or label content.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { Tag } from "@/ui/display/tag/components/Tag";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Tag
|
||||
className
|
||||
color="red"
|
||||
text="Urgent"
|
||||
onClick={() => console.log("click")}
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['className', 'string', 'Optional name for additional styling', ''],
|
||||
['color', 'string', 'Color of the tag. Options include: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow`, `gray`', ''],
|
||||
['text', 'string', 'The content of the tag', ''],
|
||||
['onClick', 'function', 'Optional function called when a user clicks on the tag', '']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
5
packages/twenty-website/src/content/twenty-ui/input.mdx
Normal file
5
packages/twenty-website/src/content/twenty-ui/input.mdx
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Input
|
||||
icon: IconUsers
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
@ -0,0 +1,29 @@
|
||||
---
|
||||
title: Block Editor
|
||||
icon: TbTemplate
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
Uses a block-based rich text editor from [BlockNote](https://www.blocknotejs.org/) to allow users to edit and view blocks of content.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { useBlockNote } from "@blocknote/react";
|
||||
import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const BlockNoteEditor = useBlockNote();
|
||||
|
||||
return <BlockEditor editor={BlockNoteEditor} />;
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['editor', '`BlockNoteEditor`', 'The block editor instance or configuration']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
470
packages/twenty-website/src/content/twenty-ui/input/buttons.mdx
Normal file
470
packages/twenty-website/src/content/twenty-ui/input/buttons.mdx
Normal file
@ -0,0 +1,470 @@
|
||||
---
|
||||
title: Buttons
|
||||
image: /images/user-guide/views/filter.png
|
||||
---
|
||||
|
||||
A list of buttons and button groups used throughout the app.
|
||||
|
||||
## Button
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { Button } from "@/ui/input/button/components/Button";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Button
|
||||
className
|
||||
Icon={null}
|
||||
title="Click Me"
|
||||
fullWidth={false}
|
||||
variant="primary"
|
||||
size="medium"
|
||||
position="standalone"
|
||||
accent="default"
|
||||
soon={false}
|
||||
disabled={false}
|
||||
focus={true}
|
||||
onClick={() => console.log("click")}
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['className', 'string', 'Optional class name for additional styling', ''],
|
||||
['Icon', '`React.ComponentType`', "An optional icon component that's displayed within the button", ''],
|
||||
['title', 'string', 'The text content of the button', ''],
|
||||
['fullWidth', 'boolean', 'Defines whether the button should span the whole width of its container', '`false`'],
|
||||
['variant', 'string', 'The visual style variant of the button. Options include `primary`, `secondary`, and `tertiary`', 'primary'],
|
||||
['size', 'string', 'The size of the button. Has two options: `small` and `medium`', 'medium'],
|
||||
['position', 'string', 'The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle`', 'standalone'],
|
||||
['accent', 'string', 'The accent color of the button. Options include: `default`, `blue`, and `danger`', 'default'],
|
||||
['soon', 'boolean', 'Indicates if the button is marked as "soon" (such as for upcoming features)', '`false`'],
|
||||
['disabled', 'boolean', 'Specifies whether the button is disabled or not', '`false`'],
|
||||
['focus', 'boolean', 'Determines if the button has focus', '`false`'],
|
||||
['onClick', 'function', 'A callback function that triggers when the user clicks on the button', '']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
|
||||
## Button Group
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
<SandpackEditor content={`import { Button } from "@/ui/input/button/components/Button";
|
||||
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<ButtonGroup variant="primary" size="large" accent="blue" className>
|
||||
<Button
|
||||
className
|
||||
Icon={null}
|
||||
title="Button 1"
|
||||
fullWidth={false}
|
||||
variant="primary"
|
||||
size="medium"
|
||||
position="standalone"
|
||||
accent="blue"
|
||||
soon={false}
|
||||
disabled={false}
|
||||
focus={false}
|
||||
onClick={() => console.log("click")}
|
||||
/>
|
||||
<Button
|
||||
className
|
||||
Icon={null}
|
||||
title="Button 2"
|
||||
fullWidth={false}
|
||||
variant="secondary"
|
||||
size="medium"
|
||||
position="left"
|
||||
accent="blue"
|
||||
soon={false}
|
||||
disabled={false}
|
||||
focus={false}
|
||||
onClick={() => console.log("click")}
|
||||
/>
|
||||
<Button
|
||||
className
|
||||
Icon={null}
|
||||
title="Button 3"
|
||||
fullWidth={false}
|
||||
variant="tertiary"
|
||||
size="medium"
|
||||
position="right"
|
||||
accent="blue"
|
||||
soon={false}
|
||||
disabled={false}
|
||||
focus={false}
|
||||
onClick={() => console.log("click")}
|
||||
/>
|
||||
</ButtonGroup>
|
||||
);
|
||||
};
|
||||
`} />
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['variant', 'string', 'The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary`'],
|
||||
['size', 'string', 'The size of the buttons within the group. Has two options: `medium` and `small`'],
|
||||
['accent', 'string', 'The accent color of the buttons within the group. Options include `default`, `blue` and `danger`'],
|
||||
['className', 'string', 'Optional class name for additional styling'],
|
||||
['children', 'ReactNode', 'An array of React elements representing the individual buttons within the group']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
|
||||
## Floating Button
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
|
||||
import { IconSearch } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<FloatingButton
|
||||
className
|
||||
Icon={IconSearch}
|
||||
title="Click Me"
|
||||
size="medium"
|
||||
position="standalone"
|
||||
applyShadow={true}
|
||||
applyBlur={true}
|
||||
disabled={false}
|
||||
focus={true}
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['className', 'string', 'Optional name for additional styling', ''],
|
||||
['Icon', '`React.ComponentType`', "An optional icon component that's displayed within the button", ''],
|
||||
['title', 'string', 'The text content of the button', ''],
|
||||
['size', 'string', 'The size of the button. Has two options: `small` and `medium`', 'small'],
|
||||
['position', 'string', 'The position of the button in relation to its siblings. Options include: `standalone`, `left`, `middle`, `right`', ''],
|
||||
['applyShadow', 'boolean', 'Determines whether to apply shadow to a button', '`true`'],
|
||||
['applyBlur', 'boolean', 'Determines whether to apply a blur effect to the button', '`true`'],
|
||||
['disabled', 'boolean', 'Determines whether the button is disabled', '`false`'],
|
||||
['focus', 'boolean', 'Indicates if the button has focus', '`false`']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
## Floating Button Group
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
|
||||
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
|
||||
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<FloatingButtonGroup size="small">
|
||||
<FloatingButton
|
||||
className
|
||||
Icon={IconClipboardText}
|
||||
title
|
||||
size="small"
|
||||
position="standalone"
|
||||
applyShadow={true}
|
||||
applyBlur={true}
|
||||
disabled={false}
|
||||
focus={true}
|
||||
/>
|
||||
<FloatingButton
|
||||
className
|
||||
Icon={IconCheckbox}
|
||||
title
|
||||
size="small"
|
||||
position="standalone"
|
||||
applyShadow={true}
|
||||
applyBlur={true}
|
||||
disabled={false}
|
||||
/>
|
||||
</FloatingButtonGroup>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['size', 'string', 'The size of the button. Has two options: `small` and `medium`', 'small'],
|
||||
['children', 'ReactNode', 'An array of React elements representing the individual buttons within the group', '']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
|
||||
## Floating Icon Button
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
|
||||
import { IconSearch } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<FloatingIconButton
|
||||
className
|
||||
Icon={IconSearch}
|
||||
size="small"
|
||||
position="standalone"
|
||||
applyShadow={true}
|
||||
applyBlur={true}
|
||||
disabled={false}
|
||||
focus={false}
|
||||
onClick={() => console.log("click")}
|
||||
isActive={true}
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['className', 'string', 'Optional name for additional styling', ''],
|
||||
['Icon', '`React.ComponentType`', "An optional icon component that's displayed within the button", ''],
|
||||
['size', 'string', 'The size of the button. Has two options: `small` and `medium`', 'small'],
|
||||
['position', 'string', 'The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle`', 'standalone'],
|
||||
['applyShadow', 'boolean', 'Determines whether to apply shadow to a button', '`true`'],
|
||||
['applyBlur', 'boolean', 'Determines whether to apply a blur effect to the button', '`true`'],
|
||||
['disabled', 'boolean', 'Determines whether the button is disabled', '`false`'],
|
||||
['focus', 'boolean', 'Indicates if the button has focus', '`false`'],
|
||||
['onClick', 'function', 'A callback function that triggers when the user clicks on the button', ''],
|
||||
['isActive', 'boolean', 'Determines if the button is in an active state', '']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
|
||||
## Floating Icon Button Group
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
|
||||
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const iconButtons = [
|
||||
{
|
||||
Icon: IconClipboardText,
|
||||
onClick: () => console.log("Button 1 clicked"),
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
Icon: IconCheckbox,
|
||||
onClick: () => console.log("Button 2 clicked"),
|
||||
isActive: true,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<FloatingIconButtonGroup
|
||||
className
|
||||
size="small"
|
||||
iconButtons={iconButtons} />
|
||||
);
|
||||
};
|
||||
`} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['className', 'string', 'Optional name for additional styling'],
|
||||
['size', 'string', 'The size of the button. Has two options: `small` and `medium`'],
|
||||
['iconButtons', 'array', 'An array of objects, each representing an icon button in the group. Each object should include the icon component you want to display in the button, the function you want to call when a user clicks on the button, and whether the button should be active or not.']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
|
||||
## Light Button
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { LightButton } from "@/ui/input/button/components/LightButton";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <LightButton
|
||||
className
|
||||
icon={null}
|
||||
title="Click Me"
|
||||
accent="secondary"
|
||||
active={false}
|
||||
disabled={false}
|
||||
focus={true}
|
||||
onClick={()=>console.log('click')}
|
||||
/>;
|
||||
};`} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['className', 'string', 'Optional name for additional styling', ''],
|
||||
['icon', '`React.ReactNode`', 'The icon you want to display in the button', ''],
|
||||
['title', 'string', 'The text content of the button', ''],
|
||||
['accent', 'string', 'The accent color of the button. Options include: `secondary` and `tertiary`', 'secondary'],
|
||||
['active', 'boolean', 'Determines if the button is in an active state', '`false`'],
|
||||
['disabled', 'boolean', 'Determines whether the button is disabled', '`false`'],
|
||||
['focus', 'boolean', 'Indicates if the button has focus', '`false`'],
|
||||
['onClick', 'function', 'A callback function that triggers when the user clicks on the button', '']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
|
||||
|
||||
## Light Icon Button
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
|
||||
import { IconSearch } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<LightIconButton
|
||||
className
|
||||
testId="test1"
|
||||
Icon={IconSearch}
|
||||
title="Click Me"
|
||||
size="small"
|
||||
accent="secondary"
|
||||
active={true}
|
||||
disabled={false}
|
||||
focus={true}
|
||||
onClick={() => console.log("click")}
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['className', 'string', 'Optional name for additional styling', ''],
|
||||
['testId', 'string', 'Test identifier for the button', ''],
|
||||
['Icon', '`React.ComponentType`', "An optional icon component that's displayed within the button", ''],
|
||||
['title', 'string', 'The text content of the button', ''],
|
||||
['size', 'string', 'The size of the button. Has two options: `small` and `medium`', 'small'],
|
||||
['accent', 'string', 'The accent color of the button. Options include: `secondary` and `tertiary`', 'secondary'],
|
||||
['active', 'boolean', 'Determines if the button is in an active state', '`false`'],
|
||||
['disabled', 'boolean', 'Determines whether the button is disabled', '`false`'],
|
||||
['focus', 'boolean', 'Indicates if the button has focus', '`false`'],
|
||||
['onClick', 'function', 'A callback function that triggers when the user clicks on the button', '']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
|
||||
## Main Button
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { MainButton } from "@/ui/input/button/components/MainButton";
|
||||
import { IconCheckbox } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<MainButton
|
||||
title="Checkbox"
|
||||
fullWidth={false}
|
||||
variant="primary"
|
||||
soon={false}
|
||||
Icon={IconCheckbox}
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['title', 'string', 'The text content of the button', ''],
|
||||
['fullWidth', 'boolean', 'Defines whether the button should span the whole width of its container', '`false`'],
|
||||
['variant', 'string', 'The visual style variant of the button. Options include `primary` and `secondary`', 'primary'],
|
||||
['soon', 'boolean', 'Indicates if the button is marked as "soon" (such as for upcoming features)', '`false`'],
|
||||
['Icon', '`React.ComponentType`', "An optional icon component that's displayed within the button", ''],
|
||||
['React `button` props', '`React.ComponentProps<\'button\'>`', "Additional props from React's `button` element", '']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
|
||||
## Rounded Icon Button
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
|
||||
import { IconSearch } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<RoundedIconButton
|
||||
Icon={IconSearch}
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['Icon', '`React.ComponentType`', "An optional icon component that's displayed within the button"],
|
||||
['React `button` props', '`React.ButtonHTMLAttributes<HTMLButtonElement>`', "Additional props from React's `button` element"]
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
@ -0,0 +1,42 @@
|
||||
---
|
||||
title: Checkbox
|
||||
icon: TbCheckbox
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
---
|
||||
|
||||
Used when a user needs to select multiple values from several options.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { Checkbox } from "@/ui/input/components/Checkbox";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Checkbox
|
||||
checked={true}
|
||||
indeterminate={false}
|
||||
onChange={() => console.log("onChange function fired")}
|
||||
onCheckedChange={() => console.log("onCheckedChange function fired")}
|
||||
variant="primary"
|
||||
size="small"
|
||||
shape="squared"
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['checked', 'boolean', 'Indicates whether the checkbox is checked', ''],
|
||||
['indeterminate', 'boolean', 'Indicates whether the checkbox is in an indeterminate state (neither checked nor unchecked)', ''],
|
||||
['onChange', 'function', 'The callback function you want to trigger when the checkbox state changes', ''],
|
||||
['onCheckedChange', 'function', 'The callback function you want to trigger when the `checked` state changes', ''],
|
||||
['variant', 'string', 'The visual style variant of the box. Options include: `primary`, `secondary`, and `tertiary`', 'primary'],
|
||||
['size', 'string', 'The size of the checkbox. Has two options: `small` and `large`', 'small'],
|
||||
['shape', 'string', 'The shape of the checkbox. Has two options: `squared` and `rounded`', 'squared']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
@ -0,0 +1,66 @@
|
||||
---
|
||||
title: Color Scheme
|
||||
icon: TbColorFilter
|
||||
image: /images/user-guide/fields/field.png
|
||||
---
|
||||
|
||||
## Color Scheme Card
|
||||
|
||||
Represents different color schemes and is specially tailored for light and dark themes.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { ColorSchemeCard } from "@/ui/input/color-scheme/components/ColorSchemeCard";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<ColorSchemeCard
|
||||
variant="Dark"
|
||||
selected={true}
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['variant', 'string', 'The color scheme variant. Options include `Dark`, `Light`, and `System`', 'light'],
|
||||
['selected', 'boolean', 'If `true`, displays a checkmark to indicate the selected color scheme', ''],
|
||||
['additional props', '`React.ComponentPropsWithoutRef<\'div\'>`', 'Standard HTML `div` element props', '']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
|
||||
## Color Scheme Picker
|
||||
|
||||
Allows users to choose between different color schemes.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { ColorSchemePicker } from "@/ui/input/color-scheme/components/ColorSchemePicker";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <ColorSchemePicker
|
||||
value="Dark"
|
||||
onChange
|
||||
/>;
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['value', '`Color Scheme`', 'The currently selected color scheme'],
|
||||
['onChange', 'function', 'The callback function you want to trigger when a user selects a color scheme']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
@ -0,0 +1,53 @@
|
||||
---
|
||||
title: Icon Picker
|
||||
icon: TbColorPicker
|
||||
image: /images/user-guide/github/github-header.png
|
||||
---
|
||||
|
||||
A dropdown-based icon picker that allows users to select an icon from a list.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { RecoilRoot } from "recoil";
|
||||
import React, { useState } from "react";
|
||||
import { IconPicker } from "@/ui/input/components/IconPicker";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const [selectedIcon, setSelectedIcon] = useState("");
|
||||
const handleIconChange = ({ iconKey, Icon }) => {
|
||||
console.log("Selected Icon:", iconKey);
|
||||
setSelectedIcon(iconKey);
|
||||
};
|
||||
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<IconPicker
|
||||
disabled={false}
|
||||
onChange={handleIconChange}
|
||||
selectedIconKey={selectedIcon}
|
||||
variant="primary"
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};`} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['disabled', 'boolean', 'Disables the icon picker if set to `true`', ''],
|
||||
['onChange', 'function', 'The callback function triggered when the user selects an icon. It receives an object with `iconKey` and `Icon` properties', ''],
|
||||
['selectedIconKey', 'string', 'The key of the initially selected icon', ''],
|
||||
['onClickOutside', 'function', 'Callback function triggered when the user clicks outside the dropdown', ''],
|
||||
['onClose', 'function', 'Callback function triggered when the dropdown is closed', ''],
|
||||
['onOpen', 'function', 'Callback function triggered when the dropdown is opened', ''],
|
||||
['variant', 'string', 'The visual style variant of the clickable icon. Options include: `primary`, `secondary`, and `tertiary`', 'secondary']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
@ -0,0 +1,38 @@
|
||||
---
|
||||
title: Image Input
|
||||
icon: TbUpload
|
||||
image: /images/user-guide/objects/objects.png
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
import imageInputCode from '!!raw-loader!@site/src/ui/input/components/imageInputCode.js'
|
||||
|
||||
Allows users to upload and remove an image.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { ImageInput } from "@/ui/input/components/ImageInput";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <ImageInput/>;
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['picture', 'string', 'The image source URL', ''],
|
||||
['onUpload', 'function', 'The function called when a user uploads a new image. It receives the `File` object as a parameter', ''],
|
||||
['onRemove', 'function', 'The function called when the user clicks on the remove button', ''],
|
||||
['onAbort', 'function', 'The function called when a user clicks on the abort button during image upload', ''],
|
||||
['isUploading', 'boolean', 'Indicates whether an image is currently being uploaded', '`false`'],
|
||||
['errorMessage', 'string', 'An optional error message to display below the image input', ''],
|
||||
['disabled', 'boolean', 'If `true`, the entire input is disabled, and the buttons are not clickable', '`false`']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
102
packages/twenty-website/src/content/twenty-ui/input/radio.mdx
Normal file
102
packages/twenty-website/src/content/twenty-ui/input/radio.mdx
Normal file
@ -0,0 +1,102 @@
|
||||
---
|
||||
title: Radio
|
||||
icon: TbCircleDot
|
||||
image: /images/user-guide/create-workspace/workspace-cover.png
|
||||
---
|
||||
|
||||
Used when users may only choose one option from a series of options.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { Radio } from "@/ui/input/components/Radio";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const handleRadioChange = (event) => {
|
||||
console.log("Radio button changed:", event.target.checked);
|
||||
};
|
||||
|
||||
const handleCheckedChange = (checked) => {
|
||||
console.log("Checked state changed:", checked);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Radio
|
||||
checked={true}
|
||||
value="Option 1"
|
||||
onChange={handleRadioChange}
|
||||
onCheckedChange={handleCheckedChange}
|
||||
size="large"
|
||||
disabled={false}
|
||||
labelPosition="right"
|
||||
/>
|
||||
);
|
||||
};
|
||||
`} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['style', '`React.CSS` properties', 'Additional inline styles for the component', ''],
|
||||
['className', 'string', 'Optional CSS class for additional styling', ''],
|
||||
['checked', 'boolean', 'Indicates whether the radio button is checked', ''],
|
||||
['value', 'string', 'The label or text associated with the radio button', ''],
|
||||
['onChange', 'function', 'The function called when the selected radio button is changed', ''],
|
||||
['onCheckedChange', 'function', 'The function called when the `checked` state of the radio button changes', ''],
|
||||
['size', 'string', 'The size of the radio button. Options include: `large` and `small`', 'small'],
|
||||
['disabled', 'boolean', 'If `true`, the radio button is disabled and not clickable', 'false'],
|
||||
['labelPosition', 'string', 'The position of the label text relative to the radio button. Has two options: `left` and `right`', 'right']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
|
||||
## Radio Group
|
||||
|
||||
Groups together related radio buttons.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import React, { useState } from "react";
|
||||
import { Radio } from "@/ui/input/components/Radio";
|
||||
import { RadioGroup } from "@/ui/input/components/RadioGroup";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const [selectedValue, setSelectedValue] = useState("Option 1");
|
||||
|
||||
const handleChange = (event) => {
|
||||
setSelectedValue(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<RadioGroup value={selectedValue} onChange={handleChange}>
|
||||
<Radio value="Option 1" />
|
||||
<Radio value="Option 2" />
|
||||
<Radio value="Option 3" />
|
||||
</RadioGroup>
|
||||
);
|
||||
};
|
||||
`} />
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['value', 'string', 'The value of the currently selected radio button'],
|
||||
['onChange', 'function', 'The callback function triggered when the radio button is changed'],
|
||||
['onValueChange', 'function', 'The callback function triggered when the selected value in the group changes.'],
|
||||
['children', '`React.ReactNode`', 'Allows you to pass React components (such as Radio) as children to the Radio Group']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
@ -0,0 +1,52 @@
|
||||
---
|
||||
title: Select
|
||||
icon: TbSelect
|
||||
image: /images/user-guide/what-is-twenty/20.png
|
||||
---
|
||||
|
||||
Allows users to pick a value from a list of predefined options.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { RecoilRoot } from 'recoil';
|
||||
import { IconTwentyStar } from 'twenty-ui';
|
||||
|
||||
import { Select } from '@/ui/input/components/Select';
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<Select
|
||||
className
|
||||
disabled={false}
|
||||
dropdownScopeId="exampleDropdown"
|
||||
label="Select an option"
|
||||
options={[
|
||||
{ value: 'option1', label: 'Option A', Icon: IconTwentyStar },
|
||||
{ value: 'option2', label: 'Option B', Icon: IconTwentyStar },
|
||||
]}
|
||||
value="option1"
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
`} />
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['className', 'string', 'Optional CSS class for additional styling'],
|
||||
['disabled', 'boolean', 'When set to `true`, disables user interaction with the component'],
|
||||
['dropdownScopeId', 'string', 'Required prop that uniquely identifies the dropdown scope'],
|
||||
['label', 'string', 'The label to describe the purpose of the `Select` component'],
|
||||
['onChange', 'function', 'The function called when the selected values change'],
|
||||
['options', 'array', "Represents the options available for the `Selected` component. It's an array of objects where each object has a `value` (the unique identifier), `label` (the unique identifier), and an optional `Icon`"],
|
||||
['value', 'string', 'Represents the currently selected value. It should match one of the `value` properties in the `options` array']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
210
packages/twenty-website/src/content/twenty-ui/input/text.mdx
Normal file
210
packages/twenty-website/src/content/twenty-ui/input/text.mdx
Normal file
@ -0,0 +1,210 @@
|
||||
---
|
||||
title: Text
|
||||
icon: TbTextSize
|
||||
image: /images/user-guide/notes/notes_header.png
|
||||
---
|
||||
|
||||
## Text Input
|
||||
|
||||
Allows users to enter and edit text.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { RecoilRoot } from "recoil";
|
||||
import { TextInput } from "@/ui/input/components/TextInput";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleChange = (text) => {
|
||||
console.log("Input changed:", text);
|
||||
};
|
||||
|
||||
const handleKeyDown = (event) => {
|
||||
console.log("Key pressed:", event.key);
|
||||
};
|
||||
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<TextInput
|
||||
className
|
||||
label="Username"
|
||||
onChange={handleChange}
|
||||
fullWidth={false}
|
||||
disableHotkeys={false}
|
||||
error="Invalid username"
|
||||
onKeyDown={handleKeyDown}
|
||||
RightIcon={null}
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
`} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['className', 'string', 'Optional name for additional styling', ''],
|
||||
['label', 'string', 'Represents the label for the input', ''],
|
||||
['onChange', 'function', 'The function called when the input value changes', ''],
|
||||
['fullWidth', 'boolean', 'Indicates whether the input should take up 100% of the width', ''],
|
||||
['disableHotkeys', 'boolean', 'Indicates whether hotkeys are enabled for the input', '`false`'],
|
||||
['error', 'string', 'Represents the error message to be displayed. When provided, it also adds an icon error on the right side of the input', ''],
|
||||
['onKeyDown', 'function', 'Called when a key is pressed down while the input field is focused. Receives a `React.KeyboardEvent` as an argument', ''],
|
||||
['RightIcon', 'IconComponent', 'An optional icon component displayed on the right side of the input', '']
|
||||
]} />
|
||||
|
||||
|
||||
The component also accepts other HTML input element props.
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
|
||||
|
||||
## Autosize Text Input
|
||||
|
||||
Text input component that automatically adjusts its height based on the content.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { RecoilRoot } from "recoil";
|
||||
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<AutosizeTextInput
|
||||
onValidate={() => console.log("onValidate function fired")}
|
||||
minRows={1}
|
||||
placeholder="Write a comment"
|
||||
onFocus={() => console.log("onFocus function fired")}
|
||||
variant="icon"
|
||||
buttonTitle
|
||||
value="Task: "
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};`} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['onValidate', 'function', 'The callback function you want to trigger when the user validates the input', ''],
|
||||
['minRows', 'number', 'The minimum number of rows for the text area', '1'],
|
||||
['placeholder', 'string', 'The placeholder text you want to display when the text area is empty', ''],
|
||||
['onFocus', 'function', 'The callback function you want to trigger when the text area gains focus', ''],
|
||||
['variant', 'string', 'The variant of the input. Options include: `default`, `icon`, and `button`', 'default'],
|
||||
['buttonTitle', 'string', 'The title for the button (only applicable for the button variant)', ''],
|
||||
['value', 'string', 'The initial value for the text area', 'Empty string']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
|
||||
|
||||
## Entity Title Double Text Input
|
||||
|
||||
Displays a pair of text inputs side by side, allowing the user to edit two related values simultaneously.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { RecoilRoot } from "recoil";
|
||||
import React, { useState } from "react";
|
||||
import { EntityTitleDoubleTextInput } from "@/ui/input/components/EntityTitleDoubleTextInput";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const [firstValue, setFirstValue] = useState(
|
||||
"First Value"
|
||||
);
|
||||
const [secondValue, setSecondValue] = useState(
|
||||
"Second Value"
|
||||
);
|
||||
|
||||
const handleInputChange = (newFirstValue, newSecondValue) => {
|
||||
setFirstValue(newFirstValue);
|
||||
setSecondValue(newSecondValue);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<EntityTitleDoubleTextInput
|
||||
firstValue={firstValue}
|
||||
secondValue={secondValue}
|
||||
firstValuePlaceholder="Enter First Value"
|
||||
secondValuePlaceholder="Enter Second Value"
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};`} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['firstValue', 'string', 'The value for the first text input'],
|
||||
['secondValue', 'string', 'The value for the second text input'],
|
||||
['firstValuePlaceholder', 'string', 'Placeholder text for the first text input, displayed when the input is empty'],
|
||||
['secondValuePlaceholder', 'string', 'Placeholder text for the second text input, displayed when the input is empty'],
|
||||
['onChange', 'function', 'The callback function you want to trigger when the text input changes']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
|
||||
## Text Area
|
||||
|
||||
Allows you to create multi-line text inputs.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { TextArea } from "@/ui/input/components/TextArea";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<TextArea
|
||||
disabled={false}
|
||||
minRows={4}
|
||||
onChange={()=>console.log('On change function fired')}
|
||||
placeholder="Enter text here"
|
||||
value=""
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['disabled', 'boolean', 'Indicates whether the text area is disabled', ''],
|
||||
['minRows', 'number', 'Minimum number of visible rows for the text area.', '1'],
|
||||
['onChange', 'function', 'Callback function triggered when the text area content changes', ''],
|
||||
['placeholder', 'string', 'Placeholder text displayed when the text area is empty', ''],
|
||||
['value', 'string', 'The current value of the text area', 'Empty string']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Toggle
|
||||
icon: TbToggleRight
|
||||
image: /images/user-guide/table-views/table.png
|
||||
---
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { Toggle } from "@/ui/input/components/Toggle";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Toggle
|
||||
value = {true}
|
||||
onChange = {()=>console.log('On Change event')}
|
||||
color="green"
|
||||
toggleSize = "medium"
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['value', 'boolean', 'The current state of the toggle', '`false`'],
|
||||
['onChange', 'function', 'Callback function triggered when the toggle state changes', ''],
|
||||
['color', 'string', 'Color of the toggle when it\'s in the "on" state. If not provided, it uses the theme\'s blue color', ''],
|
||||
['toggleSize', 'string', 'Size of the toggle, affecting both height and weight. Has two options: `small` and `medium`', 'medium']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Navigation
|
||||
icon: IconUsers
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
---
|
||||
@ -0,0 +1,38 @@
|
||||
---
|
||||
title: Breadcrumb
|
||||
icon: TbSquareChevronsRight
|
||||
image: /images/user-guide/fields/field.png
|
||||
---
|
||||
Renders a breadcrumb navigation bar.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { BrowserRouter } from "react-router-dom";
|
||||
import { Breadcrumb } from "@/ui/navigation/bread-crumb/components/Breadcrumb";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const breadcrumbLinks = [
|
||||
{ children: "Home", href: "/" },
|
||||
{ children: "Category", href: "/category" },
|
||||
{ children: "Subcategory", href: "/category/subcategory" },
|
||||
{ children: "Current Page" },
|
||||
];
|
||||
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Breadcrumb className links={breadcrumbLinks} />
|
||||
</BrowserRouter>
|
||||
)
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['className', 'string', 'Optional class name for additional styling'],
|
||||
['links', 'array', '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)']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
@ -0,0 +1,163 @@
|
||||
---
|
||||
title: Links
|
||||
icon: TbLink
|
||||
image: /images/user-guide/what-is-twenty/20.png
|
||||
---
|
||||
|
||||
## Contact Link
|
||||
|
||||
A stylized link component for displaying contact information.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { BrowserRouter as Router } from 'react-router-dom';
|
||||
|
||||
import { ContactLink } from '@/ui/navigation/link/components/ContactLink';
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleLinkClick = (event) => {
|
||||
console.log('Contact link clicked!', event);
|
||||
};
|
||||
|
||||
return (
|
||||
<Router>
|
||||
<ContactLink
|
||||
className
|
||||
href="mailto:example@example.com"
|
||||
onClick={handleLinkClick}
|
||||
>
|
||||
example@example.com
|
||||
</ContactLink>
|
||||
</Router>
|
||||
);
|
||||
};`} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['className', 'string', 'Optional name for additional styling'],
|
||||
['href', 'string', 'The target URL or path for the link'],
|
||||
['onClick', 'function', 'Callback function to be triggered when the link is clicked'],
|
||||
['children', '`React.ReactNode`', 'The content to be displayed inside the link']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
|
||||
## Raw Link
|
||||
|
||||
A stylized link component for displaying links.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { RawLink } from "@/ui/navigation/link/components/RawLink";
|
||||
import { BrowserRouter as Router } from "react-router-dom";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleLinkClick = (event) => {
|
||||
console.log("Contact link clicked!", event);
|
||||
};
|
||||
|
||||
return (
|
||||
<Router>
|
||||
<RawLink className href="/contact" onClick={handleLinkClick}>
|
||||
Contact Us
|
||||
</RawLink>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
`} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['className', 'string', 'Optional name for additional styling'],
|
||||
['href', 'string', 'The target URL or path for the link'],
|
||||
['onClick', 'function', 'Callback function to be triggered when the link is clicked'],
|
||||
['children', '`React.ReactNode`', 'The content to be displayed inside the link']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
|
||||
## Rounded Link
|
||||
|
||||
A rounded-styled link with a Chip component for links.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { RoundedLink } from "@/ui/navigation/link/components/RoundedLink";
|
||||
import { BrowserRouter as Router } from "react-router-dom";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleLinkClick = (event) => {
|
||||
console.log("Contact link clicked!", event);
|
||||
};
|
||||
|
||||
return (
|
||||
<Router>
|
||||
<RoundedLink href="/contact" onClick={handleLinkClick}>
|
||||
Contact Us
|
||||
</RoundedLink>
|
||||
</Router>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['href', 'string', 'The target URL or path for the link'],
|
||||
['children', '`React.ReactNode`', 'The content to be displayed inside the link'],
|
||||
['onClick', 'function', 'Callback function to be triggered when the link is clicked']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
## Social Link
|
||||
|
||||
Stylized social links, with support for various social link types, such as URLs, LinkedIn, and X (or Twitter).
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { SocialLink } from "@/ui/navigation/link/components/SocialLink";
|
||||
import { BrowserRouter as Router } from "react-router-dom";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Router>
|
||||
<SocialLink
|
||||
type="twitter"
|
||||
href="https://twitter.com/twentycrm"
|
||||
></SocialLink>
|
||||
</Router>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['href', 'string', 'The target URL or path for the link'],
|
||||
['children', '`React.ReactNode`', 'The content to be displayed inside the link'],
|
||||
['type', 'string', 'The type of social links. Options include: `url`, `LinkedIn`, and `Twitter`'],
|
||||
['onClick', 'function', 'Callback function to be triggered when the link is clicked']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
@ -0,0 +1,452 @@
|
||||
---
|
||||
title: Menu Item
|
||||
icon: TbMenu
|
||||
image: /images/user-guide/kanban-views/kanban.png
|
||||
---
|
||||
|
||||
A versatile menu item designed to be used in a menu or navigation list.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { IconBell } from "@tabler/icons-react";
|
||||
import { IconAlertCircle } from "@tabler/icons-react";
|
||||
import { MenuItem } from "@/ui/navigation/menu-item/components/MenuItem";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleMenuItemClick = (event) => {
|
||||
console.log("Menu item clicked!", event);
|
||||
};
|
||||
|
||||
const handleButtonClick = (event) => {
|
||||
console.log("Icon button clicked!", event);
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItem
|
||||
LeftIcon={IconBell}
|
||||
accent="default"
|
||||
text="Menu item text"
|
||||
iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
|
||||
isTooltipOpen={true}
|
||||
testId="menu-item-1"
|
||||
onClick={handleMenuItemClick}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['LeftIcon', 'IconComponent', 'An optional left icon displayed before the text in the menu item', ''],
|
||||
['accent', 'string', 'Specifies the accent color of the menu item. Options include: `default`, `danger`, and `placeholder`', 'default'],
|
||||
['text', 'string', 'The text content of the menu item', ''],
|
||||
['iconButtons', 'array', 'An array of objects representing additional icon buttons associated with the menu item', ''],
|
||||
['isTooltipOpen', 'boolean', 'Controls the visibility of the tooltip associated with the menu item', ''],
|
||||
['testId', 'string', 'The data-testid attribute for testing purposes', ''],
|
||||
['onClick', 'function', 'Callback function triggered when the menu item is clicked', ''],
|
||||
['className', 'string', 'Optional name for additional styling', '']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
|
||||
## 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.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { IconBell } from "@tabler/icons-react";
|
||||
import { MenuItemCommand } from "@/ui/navigation/menu-item/components/MenuItemCommand";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleCommandClick = () => {
|
||||
console.log("Command clicked!");
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItemCommand
|
||||
LeftIcon={IconBell}
|
||||
text="First Option"
|
||||
firstHotKey="⌘"
|
||||
secondHotKey="1"
|
||||
isSelected={true}
|
||||
onClick={handleCommandClick}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['LeftIcon', 'IconComponent', 'An optional left icon displayed before the text in the menu item'],
|
||||
['text', 'string', 'The text content of the menu item'],
|
||||
['firstHotKey', 'string', 'The first keyboard shortcut associated with the command'],
|
||||
['secondHotKey', 'string', 'The second keyboard shortcut associated with the command'],
|
||||
['isSelected', 'boolean', 'Indicates whether the menu item is selected or highlighted'],
|
||||
['onClick', 'function', 'Callback function triggered when the menu item is clicked'],
|
||||
['className', 'string', 'Optional name for additional styling']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
### 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.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { IconBell } from "@tabler/icons-react";
|
||||
import { IconAlertCircle } from "@tabler/icons-react";
|
||||
import { MenuItemDraggable } from "@/ui/navigation/menu-item/components/MenuItemDraggable";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleMenuItemClick = (event) => {
|
||||
console.log("Menu item clicked!", event);
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItemDraggable
|
||||
LeftIcon={IconBell}
|
||||
accent="default"
|
||||
iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
|
||||
isTooltipOpen={false}
|
||||
onClick={handleMenuItemClick}
|
||||
text="Menu item draggable"
|
||||
isDragDisabled={false}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['LeftIcon', 'IconComponent', 'An optional left icon displayed before the text in the menu item', ''],
|
||||
['accent', 'string', 'The accent color of the menu item. It can either be `default`, `placeholder`, and `danger`', 'default'],
|
||||
['iconButtons', 'array', 'An array of objects representing additional icon buttons associated with the menu item', ''],
|
||||
['isTooltipOpen', 'boolean', 'Controls the visibility of the tooltip associated with the menu item', ''],
|
||||
['onClick', 'function', 'Callback function to be triggered when the link is clicked', ''],
|
||||
['text', 'string', 'The text content of the menu item', ''],
|
||||
['isDragDisabled', 'boolean', 'Indicates whether dragging is disabled', '`false`'],
|
||||
['className', 'string', 'Optional name for additional styling', '']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
|
||||
### Multi Select
|
||||
|
||||
Provides a way to implement multi-select functionality with an associated checkbox.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { IconBell } from "@tabler/icons-react";
|
||||
import { MenuItemMultiSelect } from "@/ui/navigation/menu-item/components/MenuItemMultiSelect";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
return (
|
||||
<MenuItemMultiSelect
|
||||
LeftIcon={IconBell}
|
||||
text="First Option"
|
||||
selected={false}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['LeftIcon', 'IconComponent', 'An optional left icon displayed before the text in the menu item'],
|
||||
['text', 'string', 'The text content of the menu item'],
|
||||
['selected', 'boolean', 'Indicates whether the menu item is selected (checked)'],
|
||||
['onSelectChange', 'function', 'Callback function triggered when the checkbox state changes'],
|
||||
['className', 'string', 'Optional name for additional styling']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
|
||||
### Multi Select Avatar
|
||||
|
||||
A multi-select menu item with an avatar, a checkbox for selection, and textual content.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { MenuItemMultiSelectAvatar } from "@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const imageUrl =
|
||||
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=";
|
||||
|
||||
return (
|
||||
<MenuItemMultiSelectAvatar
|
||||
avatar={<img src={imageUrl} alt="Avatar" />}
|
||||
text="First Option"
|
||||
selected={false}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['avatar', '`ReactNode`', 'The avatar or icon to be displayed on the left side of the menu item'],
|
||||
['text', 'string', 'The text content of the menu item'],
|
||||
['selected', 'boolean', 'Indicates whether the menu item is selected (checked)'],
|
||||
['onSelectChange', 'function', 'Callback function triggered when the checkbox state changes'],
|
||||
['className', 'string', 'Optional name for additional styling']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
|
||||
### Navigate
|
||||
|
||||
A menu item featuring an optional left icon, textual content, and a right-chevron icon.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { IconBell } from "@tabler/icons-react";
|
||||
import { MenuItemNavigate } from "@/ui/navigation/menu-item/components/MenuItemNavigate";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleNavigation = () => {
|
||||
console.log("Navigate to another page");
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItemNavigate
|
||||
LeftIcon={IconBell}
|
||||
text="First Option"
|
||||
onClick={handleNavigation}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['LeftIcon', 'IconComponent', 'An optional left icon displayed before the text in the menu item'],
|
||||
['text', 'string', 'The text content of the menu item'],
|
||||
['onClick', 'function', 'Callback function to be triggered when the menu item is clicked'],
|
||||
['className', 'string', 'Optional name for additional styling']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
|
||||
### Select
|
||||
|
||||
A selectable menu item, featuring optional left content (icon and text) and an indicator (check icon) for the selected state.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { IconBell } from "@tabler/icons-react";
|
||||
import { MenuItemSelect } from "@/ui/navigation/menu-item/components/MenuItemSelect";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleSelection = () => {
|
||||
console.log("Menu item selected");
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItemSelect
|
||||
LeftIcon={IconBell}
|
||||
text="First Option"
|
||||
selected={true}
|
||||
disabled={false}
|
||||
hovered={false}
|
||||
onClick={handleSelection}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['LeftIcon', 'IconComponent', 'An optional left icon displayed before the text in the menu item'],
|
||||
['text', 'string', 'The text content of the menu item'],
|
||||
['selected', 'boolean', 'Indicates whether the menu item is selected (checked)'],
|
||||
['disabled', 'boolean', 'Indicates whether the menu item is disabled'],
|
||||
['hovered', 'boolean', 'Indicates whether the menu item is currently being hovered over'],
|
||||
['onClick', 'function', 'Callback function to be triggered when the menu item is clicked'],
|
||||
['className', 'string', 'Optional name for additional styling']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
### 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.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { MenuItemSelectAvatar } from "@/ui/navigation/menu-item/components/MenuItemSelectAvatar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const imageUrl =
|
||||
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=";
|
||||
|
||||
const handleSelection = () => {
|
||||
console.log("Menu item selected");
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItemSelectAvatar
|
||||
avatar={<img src={imageUrl} alt="Avatar" />}
|
||||
text="First Option"
|
||||
selected={true}
|
||||
disabled={false}
|
||||
hovered={false}
|
||||
testId="menu-item-test"
|
||||
onClick={handleSelection}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
`} />
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['avatar', '`ReactNode`', 'The avatar or icon to be displayed on the left side of the menu item'],
|
||||
['text', 'string', 'The text content of the menu item'],
|
||||
['selected', 'boolean', 'Indicates whether the menu item is selected (checked)'],
|
||||
['disabled', 'boolean', 'Indicates whether the menu item is disabled'],
|
||||
['hovered', 'boolean', 'Indicates whether the menu item is currently being hovered over'],
|
||||
['testId', 'string', 'The data-testid attribute for testing purposes'],
|
||||
['onClick', 'function', 'Callback function to be triggered when the menu item is clicked'],
|
||||
['className', 'string', 'Optional name for additional styling']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
|
||||
### Select Color
|
||||
|
||||
A selectable menu item with a color sample for scenarios where you want users to choose a color from a menu.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { MenuItemSelectColor } from "@/ui/navigation/menu-item/components/MenuItemSelectColor";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleSelection = () => {
|
||||
console.log("Menu item selected");
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItemSelectColor
|
||||
color="green"
|
||||
selected={true}
|
||||
disabled={false}
|
||||
hovered={true}
|
||||
variant="default"
|
||||
onClick={handleSelection}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['color', 'string', '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`', ''],
|
||||
['selected', 'boolean', 'Indicates whether the menu item is selected (checked)', ''],
|
||||
['disabled', 'boolean', 'Indicates whether the menu item is disabled', ''],
|
||||
['hovered', 'boolean', 'Indicates whether the menu item is currently being hovered over', ''],
|
||||
['variant', 'string', 'The variant of the color sample. It can either be `default` or `pipeline`', 'default'],
|
||||
['onClick', 'function', 'Callback function to be triggered when the menu item is clicked', ''],
|
||||
['className', 'string', 'Optional name for additional styling', '']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
### Toggle
|
||||
|
||||
A menu item with an associated toggle switch to allow users to enable or disable a specific feature
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { IconBell } from '@tabler/icons-react';
|
||||
|
||||
import { MenuItemToggle } from '@/ui/navigation/menu-item/components/MenuItemToggle';
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
return (
|
||||
<MenuItemToggle
|
||||
LeftIcon={IconBell}
|
||||
text="First Option"
|
||||
toggled={true}
|
||||
toggleSize="small"
|
||||
className
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['LeftIcon', 'IconComponent', 'An optional left icon displayed before the text in the menu item'],
|
||||
['text', 'string', 'The text content of the menu item'],
|
||||
['toggled', 'boolean', 'Indicates whether the toggle switch is in the "on" or "off" state'],
|
||||
['onToggleChange', 'function', 'Callback function triggered when the toggle switch state changes'],
|
||||
['toggleSize', 'string', 'The size of the toggle switch. It can be either \'small\' or \'medium\''],
|
||||
['className', 'string', 'Optional name for additional styling']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
@ -0,0 +1,48 @@
|
||||
---
|
||||
title: Navigation Bar
|
||||
icon: TbRectangle
|
||||
image: /images/user-guide/table-views/table.png
|
||||
---
|
||||
|
||||
Renders a navigation bar that contains multiple `NavigationBarItem` components.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
|
||||
import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const navigationItems = [
|
||||
{
|
||||
name: "Home",
|
||||
Icon: IconHome,
|
||||
onClick: () => console.log("Home clicked"),
|
||||
},
|
||||
{
|
||||
name: "Profile",
|
||||
Icon: IconUser,
|
||||
onClick: () => console.log("Profile clicked"),
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
Icon: IconSettings,
|
||||
onClick: () => console.log("Settings clicked"),
|
||||
},
|
||||
];
|
||||
|
||||
return <NavigationBar activeItemName="Home" items={navigationItems}/>;
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['activeItemName', 'string', 'The name of the currently active navigation item'],
|
||||
['items', 'array', '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']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Step Bar
|
||||
icon: TbCircleCheckFilled
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<StepBar activeStep={2}>
|
||||
<StepBar.Step>Step 1</StepBar.Step>
|
||||
<StepBar.Step>Step 2</StepBar.Step>
|
||||
<StepBar.Step>Step 3</StepBar.Step>
|
||||
</StepBar>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['activeStep', 'number', 'The index of the currently active step. This determines which step should be visually highlighted']
|
||||
]} />
|
||||
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
title: Feedback
|
||||
icon: TbLoader2
|
||||
image: /images/user-guide/emails/emails_header.png
|
||||
---
|
||||
|
||||
Indicates progress or countdown and moves from right to left.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { ProgressBar } from "@/ui/feedback/progress-bar/components/ProgressBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<ProgressBar
|
||||
duration={6000}
|
||||
delay={0}
|
||||
easing="easeInOut"
|
||||
barHeight={10}
|
||||
barColor="#4bb543"
|
||||
autoStart={true}
|
||||
/>
|
||||
);
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['duration', 'number', 'The total duration of the progress bar animation in milliseconds', '3'],
|
||||
['delay', 'number', 'The delay in starting the progress bar animation in milliseconds', '0'],
|
||||
['easing', 'string', 'Easing function for the progress bar animation', 'easeInOut'],
|
||||
['barHeight', 'number', 'The height of the bar in pixels', '24'],
|
||||
['barColor', 'string', 'The color of the bar', 'gray80'],
|
||||
['autoStart', 'boolean', 'If `true`, the progress bar animation starts automatically when the component mounts', '`true`']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
</ArticleTabs>
|
||||
|
||||
|
||||
## Circular Progress Bar
|
||||
|
||||
Indicates the progress of a task, often used in loading screens or areas where you want to communicate ongoing processes to the user.
|
||||
|
||||
<ArticleTabs label1="Usage" label2="Props">
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<SandpackEditor content={`import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
|
||||
};`} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
<ArticlePropsTable options={[
|
||||
['size', 'number', 'The size of the circular progress bar', '50'],
|
||||
['barWidth', 'number', 'The width of the progress bar line', '5'],
|
||||
['barColor', 'string', 'The color of the progress bar', 'currentColor']
|
||||
]} />
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
Reference in New Issue
Block a user