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: כפתורים
|
||
image: /images/user-guide/views/filter.png
|
||
---
|
||
|
||
<Frame>
|
||
<img src="/images/user-guide/views/filter.png" alt="Header" />
|
||
</Frame>
|
||
|
||
רשימת כפתורים וקבוצות כפתורים הנמצאות ברחבי האפליקציה.
|
||
|
||
## כפתור
|
||
|
||
<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">
|
||
|
||
| תכונות | סוג | תיאור |
|
||
| --------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
||
| className | string | שם מחלקה אופציונלי לעיצוב נוסף |
|
||
| סמל | `React.ComponentType` | רכיב אייקון אופציונלי שמוצג בתוך הכפתור |
|
||
| כותרת | string | תוכן הטקסט של הכפתור |
|
||
| fullWidth | בוליאני | מגדיר האם הכפתור יכסה את כל הרוחב של המיכל שלו |
|
||
| גרסה | string | הסגנון החזותי השונה של הכפתור. האופציות כוללות `primary`, `secondary`, ו- `tertiary` |
|
||
| גודל | מחרוזת | הגודל של הכפתור. יש שתי אפשרויות: `קטן` ו- `בינוני` |
|
||
| תפקיד | string | המיקום של הכפתור ביחס לאחיו. האופציות כוללות: `standalone`, `left`, `right`, ו- `middle` |
|
||
| accent | string | צבע ההדגשה של הכפתור. Options include: `default`, `blue`, and `danger` |
|
||
| בקרוב | בוליאני | מציין אם הכפתור מסומן כ"בקרוב" (כמו לפיצ'רים בקרוב) |
|
||
| לא פעיל | בוליאני | מגדיר אם הכפתור מושבת או לא |
|
||
| focus | בוליאני | מגדיר אם הכפתור ממוקד |
|
||
| onClick | פונקציה | פונקציה שמפעילה בעת לחיצה על הכפתור על ידי המשתמש |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## קבוצת כפתורים
|
||
|
||
<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">
|
||
|
||
| תכונות | סוג | תיאור |
|
||
| ----------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
||
| className | string | שם אופציונלי לעיצוב נוסף |
|
||
| סמל | `React.ComponentType` | רכיב אייקון אופציונלי שמופיע בתוך הכפתור |
|
||
| כותרת | string | תוכן הטקסט של הכפתור |
|
||
| גודל | מחרוזת | הגודל של הכפתור. יש שתי אפשרויות: `קטן` ו- `בינוני` |
|
||
| תפקיד | string | המיקום של הכפתור ביחס לאחיו. האופציות כוללות: `standalone`, `left`, `right`, ו- `middle` |
|
||
| applyShadow | בוליאני | מגדיר האם להחיל צל על הכפתור |
|
||
| applyBlur | בוליאני | מגדיר האם להחיל אפקט טשטוש על הכפתור |
|
||
| לא פעיל | בוליאני | מגדיר האם הכפתור מושבת |
|
||
| focus | בוליאני | מציין אם הכפתור ממוקד |
|
||
|
||
</Tab>
|
||
</Tabs>
|
||
|
||
## קבוצת כפתורים מרחפים
|
||
|
||
<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">
|
||
|
||
| תכונות | סוג | תיאור | ברירת מחדל |
|
||
| -------- | --------- | ----------------------------------------------------------------------------------- | ---------- |
|
||
| גודל | string | הגודל של הכפתור. יש שתי אפשרויות: `קטן` ו- `בינוני` | קטן |
|
||
| children | ReactNode | מערך של רכיבי React המייצגים את הכפתורים האישיים בתוך הקבוצה | |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## כפתור אייקון מרחף
|
||
|
||
<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">
|
||
|
||
| תכונות | סוג | תיאור |
|
||
| ----------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
||
| className | מחרוזת | שם אופציונלי לעיצוב נוסף |
|
||
| סמל | `React.ComponentType` | רכיב אייקון אופציונלי שמופיע בתוך הכפתור |
|
||
| גודל | string | הגודל של הכפתור. יש שתי אפשרויות: `קטן` ו- `בינוני` |
|
||
| תפקיד | string | המיקום של הכפתור ביחס לאחיו. האופציות כוללות: `standalone`, `left`, `right`, ו- `middle` |
|
||
| applyShadow | בוליאני | מגדיר האם להחיל צל על הכפתור |
|
||
| applyBlur | בוליאני | מגדיר האם להחיל אפקט טשטוש על הכפתור |
|
||
| לא פעיל | בוליאני | מגדיר האם הכפתור מושבת |
|
||
| focus | בוליאני | מציין אם הכפתור ממוקד |
|
||
| onClick | פונקציה | פונקציה שמפעילה בעת לחיצה על הכפתור על ידי המשתמש |
|
||
| isActive | בוליאני | מגדיר האם הכפתור במצב פעיל |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## קבוצת כפתורי אייקונים מרחפים
|
||
|
||
<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">
|
||
|
||
| תכונות | סוג | תיאור |
|
||
| --------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||
| className | מחרוזת | שם אופציונלי לעיצוב נוסף |
|
||
| גודל | מחרוזת | הגודל של הכפתור. יש שתי אפשרויות: `קטן` ו- `בינוני` |
|
||
| כפתורי אייקונים | מַעֲרָךְ | מערך של אובייקטים, כל אחד מייצג כפתור אייקון בקבוצה. כל אובייקט צריך לכלול את רכיב האייקון שברצונך להציג בכפתור, את הפונקציה שתרצה להפעיל כאשר המשתמש לוחץ על הכפתור, והאם הכפתור אמור להיות פעיל או לא. |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## כפתור בהיר
|
||
|
||
<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">
|
||
|
||
| תכונות | סוג | תיאור |
|
||
| --------- | ----------------- | ------------------------------------------------------------------------------------------------- |
|
||
| className | string | שם אופציונלי לעיצוב נוסף |
|
||
| סמל | `React.ReactNode` | האייקון שתרצה להציג בכפתור |
|
||
| כותרת | מחרוזת | תוכן הטקסט של הכפתור |
|
||
| accent | string | צבע ההדגשה של הכפתור. Options include: `secondary` and `tertiary` |
|
||
| פעיל | בוליאני | מגדיר האם הכפתור במצב פעיל |
|
||
| לא פעיל | בוליאני | מגדיר האם הכפתור מושבת |
|
||
| focus | בוליאני | מציין אם הכפתור ממוקד |
|
||
| onClick | function | פונקציה שמפעילה בעת לחיצה על הכפתור על ידי המשתמש |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## כפתור אייקון בהיר
|
||
|
||
<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">
|
||
|
||
| תכונות | סוג | תיאור |
|
||
| --------- | --------------------- | ------------------------------------------------------------------------------------------------- |
|
||
| className | string | שם אופציונלי לעיצוב נוסף |
|
||
| testId | string | זיהוי בדיקה לכפתור |
|
||
| סמל | `React.ComponentType` | רכיב אייקון אופציונלי שמוצג בתוך הכפתור |
|
||
| כותרת | string | תוכן הטקסט של הכפתור |
|
||
| גודל | string | הגודל של הכפתור. יש שתי אפשרויות: `קטן` ו- `בינוני` |
|
||
| accent | string | צבע ההדגשה של הכפתור. Options include: `secondary` and `tertiary` |
|
||
| פעיל | בוליאני | מגדיר האם הכפתור במצב פעיל |
|
||
| לא פעיל | בוליאני | מגדיר האם הכפתור מושבת |
|
||
| focus | בוליאני | מציין אם הכפתור ממוקד |
|
||
| onClick | function | פונקציה שמפעילה בעת לחיצה על הכפתור על ידי המשתמש |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## כפתור ראשי
|
||
|
||
<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">
|
||
|
||
| תכונות | סוג | תיאור |
|
||
| ------------------------ | -------------------------------- | ------------------------------------------------------------------------------ |
|
||
| כותרת | string | תוכן הטקסט של הכפתור |
|
||
| fullWidth | בוליאני | מגדיר האם הכפתור יכסה את כל הרוחב של המיכל שלו |
|
||
| גרסה | string | הסגנון החזותי השונה של הכפתור. אפשרויות כוללות `ראשי` ו-`משני` |
|
||
| בקרוב | בוליאני | מציין אם הכפתור מסומן כ"בקרוב" (כמו לפיצ'רים בקרוב) |
|
||
| סמל | `React.ComponentType` | רכיב אייקון אופציונלי שמוצג בתוך הכפתור |
|
||
| תכונות `button` של React | `React.ComponentProps<'button'>` | כל תכונות הכפתור HTML הסטנדרטיות נתמכות |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## כפתור אייקון מעוגל
|
||
|
||
<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">
|
||
|
||
| תכונות | סוג | תיאור |
|
||
| ------------------------ | ----------------------------------------------- | ----- |
|
||
| סמל | `React.ComponentType` | |
|
||
| תכונות `button` של React | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|