github-actions[bot]
2de681da72
Created by Github action <!-- This is an auto-generated description by cubic. --> <a href="https://cubic.dev/pr/twentyhq/twenty/pull/22317?utm_source=github" target="_blank" rel="noopener noreferrer" data-no-image-dialog="true"><picture><source media="(prefers-color-scheme: dark)" srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a> <!-- End of auto-generated description by cubic. --> Co-authored-by: github-actions <github-actions@twenty.com>
74 lines
1.2 KiB
Plaintext
74 lines
1.2 KiB
Plaintext
---
|
|
title: 对勾标记
|
|
icon: circle-check
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/tasks/tasks_header.png" alt="标题" />
|
|
</Frame>
|
|
|
|
表示一个成功或已完成的动作。
|
|
|
|
<Tabs>
|
|
<Tab title="**用法**">
|
|
|
|
```jsx
|
|
import { Checkmark } from 'twenty-ui/display';
|
|
|
|
export const MyComponent = () => {
|
|
return <Checkmark />;
|
|
};
|
|
```
|
|
|
|
|
|
</Tab>
|
|
|
|
<Tab title="属性">
|
|
|
|
扩展了 `React.ComponentPropsWithoutRef<'div'>`，并接受常规 `div` 元素的所有属性。
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## 动画对勾标记
|
|
|
|
表示一个带有动画特性的对勾图标。
|
|
|
|
<Tabs>
|
|
|
|
<Tab title="用法">
|
|
|
|
```jsx
|
|
import { AnimatedCheckmark } from 'twenty-ui/display';
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<AnimatedCheckmark
|
|
isAnimating={true}
|
|
color="green"
|
|
duration={0.5}
|
|
size={30}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="属性">
|
|
|
|
|
|
| 属性 | 类型 | 描述 | 默认 |
|
|
| ---- | --- | -------------- | ----- |
|
|
| 正在动画 | 布尔值 | 控制对勾标记是否在动画中 | 假 |
|
|
| 颜色 | 字符串 | 对勾标记的颜色 | |
|
|
| 持续时间 | 数字 | 动画的持续时间（以秒为单位） | 0.5 秒 |
|
|
| 大小 | 数字 | 对勾标记的大小 | 28 像素 |
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|