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>
149 lines
5.2 KiB
Plaintext
149 lines
5.2 KiB
Plaintext
---
|
|
title: Thẻ
|
|
image: /images/user-guide/github/github-header.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/github/github-header.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Một yếu tố hình ảnh mà bạn có thể sử dụng như một hộp chứa có thể nhấp hoặc không nhấp với một nhãn, các thành phần trái và phải tùy chọn, và nhiều tùy chọn kiểu dáng để hiển thị nhãn và thẻ.
|
|
|
|
<Tabs>
|
|
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { Chip } from 'twenty-ui/components';
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<Chip
|
|
size="large"
|
|
label="Clickable Chip"
|
|
clickable={true}
|
|
variant="highlighted"
|
|
accent="text-primary"
|
|
leftComponent
|
|
rightComponent
|
|
maxWidth="200px"
|
|
className
|
|
/>
|
|
);
|
|
};
|
|
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| Thuộc Tính | Loại | Mô tả |
|
|
| ------------ | ------------------------ | --------------------------------------------------------------------------------------------------------------------- |
|
|
| linkToEntity | string | Liên kết đến thực thể |
|
|
| entityId | string | Mã nhận dạng duy nhất cho thực thể |
|
|
| tên | string | Tên của thực thể |
|
|
| pictureUrl | string | hình ảnh", |
|
|
| avatarType | Loại Avatar | Loại avatar mà bạn muốn hiển thị. Has two options: `rounded` and `squared` |
|
|
| biến thể | `EntityChipVariant` enum | Loại chip thực thể mà bạn muốn hiển thị. Has two options: `regular` and `transparent` |
|
|
| LeftIcon | IconComponent | Một thành phần React đại diện cho một biểu tượng. Hiển thị ở phía bên trái của thẻ |
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## Ví dụ
|
|
|
|
### Thẻ Trong Suốt Bị Vô Hiệu
|
|
|
|
```jsx
|
|
import { Chip } from 'twenty-ui/components';
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<Chip
|
|
size="large"
|
|
label="Transparent Disabled Chip"
|
|
clickable={false}
|
|
variant="rounded"
|
|
accent="text-secondary"
|
|
leftComponent
|
|
rightComponent
|
|
maxWidth="200px"
|
|
className
|
|
/>
|
|
);
|
|
};
|
|
|
|
```
|
|
|
|
<br/>
|
|
|
|
### Thẻ Bị Vô Hiệu với Chú Thích Công cụ
|
|
|
|
```jsx
|
|
import { Chip } from "twenty-ui/components";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<Chip
|
|
size="large"
|
|
label="Disabled chip that triggers a tooltip when overflowing."
|
|
clickable={false}
|
|
variant="regular"
|
|
accent="text-primary"
|
|
leftComponent
|
|
rightComponent
|
|
maxWidth="200px"
|
|
className
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
## Thẻ Thực Thể
|
|
|
|
Một yếu tố giống như thẻ để hiển thị thông tin về một thực thể.
|
|
|
|
<Tabs>
|
|
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { BrowserRouter as Router } from 'react-router-dom';
|
|
import { IconTwentyStar } from 'twenty-ui/display';
|
|
import { Chip } from 'twenty-ui/components';
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<Router>
|
|
<Chip
|
|
linkToEntity="/entity-link"
|
|
entityId="entityTest"
|
|
name="Entity name"
|
|
pictureUrl=""
|
|
avatarType="rounded"
|
|
variant="regular"
|
|
LeftIcon={IconTwentyStar}
|
|
/>
|
|
</Router>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| Thuộc Tính | Loại | Mô tả |
|
|
| ------------ | ------------------------ | --------------------------------------------------------------------------------------------------------------------- |
|
|
| linkToEntity | string | Liên kết đến thực thể |
|
|
| entityId | string | Mã nhận dạng duy nhất cho thực thể |
|
|
| tên | string | Tên của thực thể |
|
|
| pictureUrl | string | hình ảnh", |
|
|
| avatarType | Loại Avatar | Loại avatar mà bạn muốn hiển thị. Has two options: `rounded` and `squared` |
|
|
| biến thể | `EntityChipVariant` enum | Loại chip thực thể mà bạn muốn hiển thị. Has two options: `regular` and `transparent` |
|
|
| LeftIcon | IconComponent | Một thành phần React đại diện cho một biểu tượng. Hiển thị ở phía bên trái của thẻ |
|
|
|
|
</Tab>
|
|
</Tabs>
|