mirror of
https://github.com/lingble/twenty.git
synced 2025-10-30 20:27:55 +00:00
a5989a470c
* Begin docs improvement * Keep improving documentation * Upgrade Docusarus * Fix broken links
95 lines
1.8 KiB
Plaintext
95 lines
1.8 KiB
Plaintext
---
|
|
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> |