Improve Documentation (#3795)
* Begin docs improvement * Keep improving documentation * Upgrade Docusarus * Fix broken links
This commit is contained in:
Félix Malfait
@ -0,0 +1,9 @@
|
||||
{
|
||||
"label": "Display",
|
||||
"position": 1,
|
||||
"collapsible": true,
|
||||
"collapsed": false,
|
||||
"customProps": {
|
||||
"icon": "TbAppWindow"
|
||||
}
|
||||
}
|
||||
139
packages/twenty-docs/docs/ui-components/display/app-tooltip.mdx
Normal file
139
packages/twenty-docs/docs/ui-components/display/app-tooltip.mdx
Normal file
@ -0,0 +1,139 @@
|
||||
---
|
||||
title: App Tooltip
|
||||
sidebar_position: 6
|
||||
sidebar_custom_props:
|
||||
icon: TbTooltip
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import appTooltipCode from '!!raw-loader!@site/src/ui/display/appTooltipCode.js'
|
||||
import overflowingTextWithTooltipCode from '!!raw-loader!@site/src/ui/display/overflowingTextWithTooltipCode.js'
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
|
||||
A brief message that displays additional information when a user interacts with an element.
|
||||
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/display/tooltip/AppTooltip']}
|
||||
componentCode={appTooltipCode}
|
||||
/>
|
||||
|
||||
</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 CSS class for additional styling</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>anchorSelect</td>
|
||||
<td>CSS selector</td>
|
||||
<td>Selector for the tooltip anchor (the element that triggers the tooltip)</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>content</td>
|
||||
<td>string</td>
|
||||
<td>The content you want to display within the tooltip</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>delayHide</td>
|
||||
<td>number</td>
|
||||
<td>The delay in seconds before hiding the tooltip after the cursor leaves the anchor</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>offset</td>
|
||||
<td>number</td>
|
||||
<td>The offset in pixels for positioning the tooltip</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>noArrow</td>
|
||||
<td>boolean</td>
|
||||
<td>If `true`, hides the arrow on the tooltip</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>isOpen</td>
|
||||
<td>boolean</td>
|
||||
<td>If `true`, the tooltip is open by default</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>place</td>
|
||||
<td>`PlacesType` string from `react-tooltip`</td>
|
||||
<td>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`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>positionStrategy</td>
|
||||
<td>`PositionStrategy` string from `react-tooltip`</td>
|
||||
<td>Position strategy for the tooltip. Has two values: `absolute` and `fixed`</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Overflowing Text with Tooltip
|
||||
|
||||
Handles overflowing text and displays a tooltip when the text overflows.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/display/tooltip/OverflowingTextWithTooltip']}
|
||||
componentCode={overflowingTextWithTooltipCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>text</td>
|
||||
<td>string</td>
|
||||
<td>The content you want to display in the overflowing text area</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
@ -0,0 +1,95 @@
|
||||
---
|
||||
title: Checkmark
|
||||
sidebar_position: 1
|
||||
sidebar_custom_props:
|
||||
icon: TbCheck
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import checkmarkCode from '!!raw-loader!@site/src/ui/display/checkmarkCode.js'
|
||||
import animatedCheckmarkCode from '!!raw-loader!@site/src/ui/display/animatedCheckmarkCode.js'
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
|
||||
Represents a successful or completed action.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/display/checkmark/components/Checkmark']}
|
||||
componentCode={checkmarkCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
Extends `React.ComponentPropsWithoutRef<'div'>` and accepts all the props of a regular `div` element.
|
||||
|
||||
</TabItem >
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Animated Checkmark
|
||||
|
||||
Represents a checkmark icon with the added feature of animation.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/display/checkmark/components/AnimatedCheckmark']}
|
||||
componentCode={animatedCheckmarkCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props" default>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>isAnimating</td>
|
||||
<td>boolean</td>
|
||||
<td>Controls whether the checkmark is animating</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>color</td>
|
||||
<td>string</td>
|
||||
<td>Color of the checkmark</td>
|
||||
<td>Theme's gray0</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>duration</td>
|
||||
<td>number</td>
|
||||
<td>The duration of the animation in seconds</td>
|
||||
<td>0.5 seconds</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>size</td>
|
||||
<td>number</td>
|
||||
<td>The size of the checkmark</td>
|
||||
<td>28 pixels</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
252
packages/twenty-docs/docs/ui-components/display/chip.mdx
Normal file
252
packages/twenty-docs/docs/ui-components/display/chip.mdx
Normal file
@ -0,0 +1,252 @@
|
||||
---
|
||||
title: Chip
|
||||
sidebar_position: 2
|
||||
sidebar_custom_props:
|
||||
icon: TbLayoutList
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import chipCode from '!!raw-loader!@site/src/ui/display/chipCode.js'
|
||||
import entityChipCode from '!!raw-loader!@site/src/ui/display/entityChipCode.js'
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
|
||||
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.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/display/chip/components/Chip']}
|
||||
componentCode={chipCode}
|
||||
/>
|
||||
</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>size</td>
|
||||
<td>`ChipSize` enum</td>
|
||||
<td>Specifies the size of the chip. Has two options: `large` and `small`</td>
|
||||
<td>small</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether the chip is disabled</td>
|
||||
<td>false</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>clickable</td>
|
||||
<td>boolean</td>
|
||||
<td>Specifies whether the chip is clickable</td>
|
||||
<td>true</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>label</td>
|
||||
<td>string</td>
|
||||
<td>Represents the text content or label inside the chip</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>maxWidth</td>
|
||||
<td>string</td>
|
||||
<td>Specifies the maximum width of the chip</td>
|
||||
<td>200px</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>variant</td>
|
||||
<td>`ChipVariant` enum</td>
|
||||
<td>Specifies the visual style or variant of the chip. Has four options: `regular`, `highlighted`, `transparent`, and `rounded`</td>
|
||||
<td>regular</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>accent</td>
|
||||
<td>`ChipAccent` enum</td>
|
||||
<td>Determines the text color or accent color of the chip. Has two options: `text-primary` and `text-secondary`</td>
|
||||
<td>text-primary</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>leftComponent</td>
|
||||
<td>`React.ReactNode`</td>
|
||||
<td>An optional React/node component that you can place on the left side of the chip</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>rightComponent</td>
|
||||
<td>`React.ReactNode`</td>
|
||||
<td>An optional React/node component that you can place on the right side of the chip</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>An optional class name to apply additional custom styles to the chip</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
## Examples
|
||||
|
||||
### Transparent Disabled Chip
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/display/chip/components/Chip']}
|
||||
componentCode={`import { Chip } from "@/ui/display/chip/components/Chip";
|
||||
|
||||
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
|
||||
availableComponentPaths={['@/ui/display/chip/components/Chip']}
|
||||
componentCode={`import { Chip } from "@/ui/display/chip/components/Chip";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Chip
|
||||
size="large"
|
||||
label="This is a very long label for a 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.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/display/chip/components/EntityChip', '@/ui/display/icon/types/IconComponent']}
|
||||
componentCode={entityChipCode}
|
||||
/>
|
||||
</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>linkToEntity</td>
|
||||
<td>string</td>
|
||||
<td>The link to the entity</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>entityId</td>
|
||||
<td>string</td>
|
||||
<td>The unique identifier for the entity</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>name</td>
|
||||
<td>string</td>
|
||||
<td>The name of the entity</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>pictureUrl</td>
|
||||
<td>string</td>
|
||||
<td>The URL of the entity's picture</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>avatarType</td>
|
||||
<td>Avatar Type</td>
|
||||
<td>The type of avatar you want to display. Has two options: `rounded` and `squared`</td>
|
||||
<td>rounded</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>variant</td>
|
||||
<td>`EntityChipVariant` enum</td>
|
||||
<td>Variant of the entity chip you want to display. Has two options: `regular` and `transparent`</td>
|
||||
<td>regular</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>LeftIcon</td>
|
||||
<td>IconComponent</td>
|
||||
<td>A React component representing an icon. Displayed on the left side of the chip</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
134
packages/twenty-docs/docs/ui-components/display/icons.mdx
Normal file
134
packages/twenty-docs/docs/ui-components/display/icons.mdx
Normal file
@ -0,0 +1,134 @@
|
||||
---
|
||||
title: Icons
|
||||
sidebar_position: 3
|
||||
sidebar_custom_props:
|
||||
icon: TbIcons
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import tablerIconExampleCode from '!!raw-loader!@site/src/ui/display/tablerIconExampleCode.js'
|
||||
import iconAddressBookCode from '!!raw-loader!@site/src/ui/display/iconAddressBookCode.js'
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
|
||||
A list of icons used throughout our app.
|
||||
|
||||
## Tabler Icons
|
||||
|
||||
We use Tabler icons for React throughout the app.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<TabItem value="installation" label="Installation">
|
||||
|
||||
```
|
||||
yarn add @tabler/icons-react
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
You can import each icon as a component. Here's an example:
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/display/icon/components/IconAddressBook']}
|
||||
componentCode={tablerIconExampleCode}
|
||||
/>
|
||||
|
||||
</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>size</td>
|
||||
<td>number</td>
|
||||
<td>The height and width of the icon in pixels</td>
|
||||
<td>24</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>color</td>
|
||||
<td>string</td>
|
||||
<td>The color of the icons</td>
|
||||
<td>currentColor</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>stroke</td>
|
||||
<td>number</td>
|
||||
<td>The stroke width of the icon in pixels</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
|
||||
## Custom Icons
|
||||
|
||||
In addition to Tabler icons, the app also uses some custom icons.
|
||||
|
||||
### Icon Address Book
|
||||
|
||||
Displays an address book icon.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/display/icon/components/IconAddressBook']}
|
||||
componentCode={iconAddressBookCode}
|
||||
/>
|
||||
|
||||
</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>size</td>
|
||||
<td>number</td>
|
||||
<td>The height and width of the icon in pixels</td>
|
||||
<td>24</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>stroke</td>
|
||||
<td>number</td>
|
||||
<td>The stroke width of the icon in pixels</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
@ -0,0 +1,49 @@
|
||||
---
|
||||
title: Soon Pill
|
||||
sidebar_position: 4
|
||||
sidebar_custom_props:
|
||||
icon: TbPill
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import soonPillCode from '!!raw-loader!@site/src/ui/display/soonPillCode.js'
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
|
||||
A small badge or "pill" to indicate something is coming soon.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/display/pill/components/SoonPill']}
|
||||
componentCode={soonPillCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
68
packages/twenty-docs/docs/ui-components/display/tag.mdx
Normal file
68
packages/twenty-docs/docs/ui-components/display/tag.mdx
Normal file
@ -0,0 +1,68 @@
|
||||
---
|
||||
title: Tag
|
||||
sidebar_position: 5
|
||||
sidebar_custom_props:
|
||||
icon: TbTag
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import tagCode from '!!raw-loader!@site/src/ui/display/tagCode.js'
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
|
||||
Component to visually categorize or label content.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/display/tag/components/Tag']}
|
||||
componentCode={tagCode}
|
||||
/>
|
||||
|
||||
</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>color</td>
|
||||
<td>string</td>
|
||||
<td>Color of the tag. Options include: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow`, `gray`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>text</td>
|
||||
<td>string</td>
|
||||
<td>The content of the tag</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onClick</td>
|
||||
<td>function</td>
|
||||
<td>Optional function called when a user clicks on the tag</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
Reference in New Issue
Block a user