github-actions[bot]
8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
489 lines
21 KiB
Plaintext
489 lines
21 KiB
Plaintext
---
|
|
title: Nút bấm
|
|
image: /images/user-guide/views/filter.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/views/filter.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Danh sách các nút bấm và nhóm nút được sử dụng trong toàn bộ ứng dụng.
|
|
|
|
## Nút
|
|
|
|
<Tabs>
|
|
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { Button } from "@/ui/input/button/components/Button";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<Button
|
|
className
|
|
Icon={null}
|
|
title="Title"
|
|
fullWidth={false}
|
|
variant="primary"
|
|
size="medium"
|
|
position="standalone"
|
|
accent="default"
|
|
soon={false}
|
|
disabled={false}
|
|
focus={true}
|
|
onClick={() => console.log("click")}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| Thuộc Tính | Loại | Mô tả |
|
|
| --------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
|
|
| className | string | Optional class name for additional styling |
|
|
| Biểu tượng | `React.ComponentType` | Một thành phần biểu tượng tùy chọn được hiển thị trong nút |
|
|
| tiêu đề | string | Nội dung văn bản của nút |
|
|
| Toàn chiều rộng | boolean | Định nghĩa liệu nút có nên chiếm toàn bộ chiều rộng của vùng chứa không |
|
|
| biến thể | string | Biến thể phong cách trực quan của nút. Options include `primary`, `secondary`, and `tertiary` |
|
|
| kích cỡ | string | Kích thước của nút. Có hai tùy chọn: `nhỏ` và `trung bình` |
|
|
| vị trí | string | Vị trí của nút so với các nút liền kề. Các tùy chọn bao gồm: `độc lập`, `trái`, `phải`, và `giữa` |
|
|
| accent | string | The accent color of the button. Các tùy chọn bao gồm: `mặc định`, `xanh dương`, và `nguy hiểm` |
|
|
| sớm | boolean | Chỉ định nếu nút được đánh dấu là "sắp tới" (chẳng hạn cho các tính năng sắp tới) |
|
|
| vô hiệu hóa | boolean | Xác định liệu nút có bị vô hiệu hóa hay không |
|
|
| tập trung | boolean | Determines if the button has focus |
|
|
| onClick | hàm | Một hàm gọi lại được kích hoạt khi người dùng nhấp vào nút |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Nhóm Nút
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
```jsx
|
|
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>
|
|
);
|
|
};
|
|
|
|
````
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
|
|
| Props | Type | Description |
|
|
|-------|------|-------------|
|
|
| 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 |
|
|
|
|
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
|
|
## Floating Button
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
|
|
import { IconSearch } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<FloatingButton
|
|
className
|
|
Icon={IconSearch}
|
|
title="Title"
|
|
size="medium"
|
|
position="standalone"
|
|
applyShadow={true}
|
|
applyBlur={true}
|
|
disabled={false}
|
|
focus={true}
|
|
/>
|
|
);
|
|
};
|
|
````
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| Thuộc Tính | Loại | Mô tả |
|
|
| ----------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
|
|
| className | string | Tên tùy chọn cho kiểu dáng bổ sung |
|
|
| Biểu tượng | `React.ComponentType` | Một thành phần biểu tượng tùy chọn được hiển thị trong nút |
|
|
| tiêu đề | string | Nội dung văn bản của nút |
|
|
| kích cỡ | string | Kích thước của nút. Có hai tùy chọn: `nhỏ` và `trung bình` |
|
|
| vị trí | string | Vị trí của nút so với các nút liền kề. Các tùy chọn bao gồm: `độc lập`, `trái`, `giữa`, `phải` |
|
|
| applyShadow | boolean | Xác định có hay không nên áp dụng bóng cho nút |
|
|
| applyBlur | boolean | Xác định có hay không nên áp dụng hiệu ứng mờ cho nút |
|
|
| vô hiệu hóa | boolean | Xác định có hay không nút bị vô hiệu hóa |
|
|
| tập trung | boolean | Chỉ định nếu nút có tiêu điểm |
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## Nhóm Nút Trôi Nổi
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
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>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| Thuộc Tính | Loại | Mô tả | Mặc định |
|
|
| ---------- | --------- | ------------------------------------------------------------------------------------------ | -------- |
|
|
| kích cỡ | string | Kích thước của nút. Có hai tùy chọn: `nhỏ` và `trung bình` | nhỏ |
|
|
| children | ReactNode | An array of React elements representing the individual buttons within the group | |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Nút Biểu Tượng Trôi Nổi
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
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}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| Thuộc Tính | Loại | Mô tả |
|
|
| ----------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
|
|
| className | string | Tên tùy chọn cho kiểu dáng bổ sung |
|
|
| Biểu tượng | `React.ComponentType` | Một thành phần biểu tượng tùy chọn được hiển thị trong nút |
|
|
| kích cỡ | string | Kích thước của nút. Có hai tùy chọn: `nhỏ` và `trung bình` |
|
|
| vị trí | string | Vị trí của nút so với các nút liền kề. Các tùy chọn bao gồm: `độc lập`, `trái`, `phải`, và `giữa` |
|
|
| applyShadow | boolean | Xác định có hay không nên áp dụng bóng cho nút |
|
|
| applyBlur | boolean | Xác định có hay không nên áp dụng hiệu ứng mờ cho nút |
|
|
| vô hiệu hóa | boolean | Xác định có hay không nút bị vô hiệu hóa |
|
|
| tập trung | boolean | Chỉ định nếu nút có tiêu điểm |
|
|
| onClick | hàm | Một hàm gọi lại được kích hoạt khi người dùng nhấp vào nút |
|
|
| isActive | boolean | Xác định nếu nút đang ở trạng thái hoạt động |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Nhóm Nút Biểu Tượng Trôi Nổi
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
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} />
|
|
);
|
|
};
|
|
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| Thuộc Tính | Loại | Mô tả |
|
|
| ----------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| className | string | Tên tùy chọn cho kiểu dáng bổ sung |
|
|
| kích cỡ | string | Kích thước của nút. Có hai tùy chọn: `nhỏ` và `trung bình` |
|
|
| iconButtons | mảng | Một mảng các đối tượng, mỗi đối tượng đại diện cho một nút biểu tượng trong nhóm. Mỗi đối tượng nên bao gồm thành phần biểu tượng bạn muốn hiển thị trong nút, chức năng bạn muốn gọi khi người dùng nhấp vào nút và liệu nút có nên được hoạt động hay không. |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Nút Nhẹ
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { LightButton } from "@/ui/input/button/components/LightButton";
|
|
|
|
export const MyComponent = () => {
|
|
return <LightButton
|
|
className
|
|
icon={null}
|
|
title="Title"
|
|
accent="secondary"
|
|
active={false}
|
|
disabled={false}
|
|
focus={true}
|
|
onClick={()=>console.log('click')}
|
|
/>;
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| Thuộc Tính | Loại | Mô tả |
|
|
| ----------- | ----------------- | ----------------------------------------------------------------------------------------------------------- |
|
|
| className | string | Tên tùy chọn cho kiểu dáng bổ sung |
|
|
| biểu tượng | `React.ReactNode` | Biểu tượng bạn muốn hiển thị trong nút |
|
|
| tiêu đề | string | Nội dung văn bản của nút |
|
|
| accent | string | The accent color of the button. Options include: `secondary` and `tertiary` |
|
|
| hoạt động | boolean | Xác định nếu nút đang ở trạng thái hoạt động |
|
|
| vô hiệu hóa | boolean | Xác định có hay không nút bị vô hiệu hóa |
|
|
| tập trung | boolean | Chỉ định nếu nút có tiêu điểm |
|
|
| onClick | function | Một hàm gọi lại được kích hoạt khi người dùng nhấp vào nút |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Nút Biểu Tượng Nhẹ
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
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="Title"
|
|
size="small"
|
|
accent="secondary"
|
|
active={true}
|
|
disabled={false}
|
|
focus={true}
|
|
onClick={() => console.log("click")}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| Thuộc Tính | Loại | Mô tả |
|
|
| ------------- | --------------------- | ----------------------------------------------------------------------------------------------------------- |
|
|
| className | string | Tên tùy chọn cho kiểu dáng bổ sung |
|
|
| mã thử nghiệm | string | Trình nhận dạng thử nghiệm cho nút |
|
|
| Biểu tượng | `React.ComponentType` | Một thành phần biểu tượng tùy chọn được hiển thị trong nút |
|
|
| tiêu đề | string | Nội dung văn bản của nút |
|
|
| kích cỡ | string | Kích thước của nút. Có hai tùy chọn: `nhỏ` và `trung bình` |
|
|
| accent | string | The accent color of the button. Options include: `secondary` and `tertiary` |
|
|
| hoạt động | boolean | Xác định nếu nút đang ở trạng thái hoạt động |
|
|
| vô hiệu hóa | boolean | Xác định có hay không nút bị vô hiệu hóa |
|
|
| tập trung | boolean | Chỉ định nếu nút có tiêu điểm |
|
|
| onClick | hàm | Một hàm gọi lại được kích hoạt khi người dùng nhấp vào nút |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Nút Chính
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
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}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| Thuộc Tính | Loại | Mô tả |
|
|
| ----------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
|
| tiêu đề | string | Nội dung văn bản của nút |
|
|
| Toàn chiều rộng | boolean | Định nghĩa liệu nút có nên chiếm toàn bộ chiều rộng của vùng chứa không |
|
|
| biến thể | string | Biến thể phong cách trực quan của nút. Các tùy chọn bao gồm `chính` và `phụ` |
|
|
| sớm | boolean | Chỉ định nếu nút được đánh dấu là "sắp tới" (chẳng hạn cho các tính năng sắp tới) |
|
|
| Biểu tượng | `React.ComponentType` | Một thành phần biểu tượng tùy chọn được hiển thị trong nút |
|
|
| Thuộc tính `button` của React | `React.ComponentProps<'button'>` | Tất cả các thuộc tính nút HTML tiêu chuẩn đều được hỗ trợ |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Nút Biểu Tượng Tròn
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
|
|
import { IconSearch } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<RoundedIconButton
|
|
Icon={IconSearch}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| Thuộc Tính | Loại | Mô tả |
|
|
| ----------------------------- | ----------------------------------------------- | ----- |
|
|
| Biểu tượng | `React.ComponentType` | |
|
|
| Thuộc tính `button` của React | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|