github-actions[bot]
e02c24bd3a
Created by Github action --------- Co-authored-by: Abdul Rahman <ar5438376@gmail.com> Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com> Co-authored-by: Charles Bochet <charles@twenty.com>
48 lines
1.9 KiB
Plaintext
48 lines
1.9 KiB
Plaintext
---
|
||
title: 複選框
|
||
image: /images/user-guide/tasks/tasks_header.png
|
||
---
|
||
|
||
<Frame>
|
||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||
</Frame>
|
||
|
||
當使用者需要從多個選項中選擇多個值時使用。
|
||
|
||
<Tabs>
|
||
<Tab title="Usage">
|
||
|
||
```jsx
|
||
import { Checkbox } from "twenty-ui/display";
|
||
|
||
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"
|
||
/>
|
||
);
|
||
};
|
||
```
|
||
|
||
</Tab>
|
||
<Tab title="Props">
|
||
|
||
| 屬性 | 類型 | 描述 |
|
||
| --------------- | -------- | --------------------------------------------------------------- |
|
||
| 選中 | 布爾值 | 表示複選框是否已選中 |
|
||
| 未決定 | 布爾值 | 表示複選框是否處於不確定狀態（既未選中也未未選中） |
|
||
| 變更事件 | function | 當複選框狀態更改時觸發的回調函數 |
|
||
| onCheckedChange | function | 當 `checked` 狀態更改時觸發的回調函數 |
|
||
| 變體 | 字串 | 複選框的視覺樣式變化。 複選框的視覺樣式變化。 選項包括：`primary`，`secondary` 和 `tertiary` |
|
||
| 大小 | 字串 | 複選框的大小。 複選框的大小。 有兩個選項：`small` 和 `large` |
|
||
| 形狀 | 字串 | 複選框的形狀。 複選框的形狀。 有兩個選項：`squared` 和 `rounded` |
|
||
|
||
</Tab>
|
||
</Tabs>
|