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>
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 | محتوى نصي للزر |
|
|
| عرض كامل | قيمة منطقية | يحدد ما إذا كان الزر يجب أن يمتد على كامل عرض الحاوية |
|
|
| التنوع | string | النمط البصري للزر. Options include `primary`, `secondary`, and `tertiary` |
|
|
| الحجم | string | حجم الزر. يوجد خياران: `صغير` و `متوسط` |
|
|
| الموقع | string | موقع الزر بالنسبة لأخوته. Options include: `standalone`, `left`, `right`, and `middle` |
|
|
| accent | string | موقع الزر بالنسبة لأخوته. Options include: `standalone`, `left`, `right`, and `middle` |
|
|
| قريباً | قيمة منطقية | يشير إلى ما إذا كان الزر معلمًا "قريبًا" (مثل الميزات القادمة) |
|
|
| معطل | قيمة منطقية | يحدد إذا كان الزر معطل أم لا |
|
|
| تركيز | قيمة منطقية | يحدد إذا كان الزر في وضع التركيز |
|
|
| عند_النقر | function | وظيفة رد فعل تنطلق عند نقر المستخدم على الزر |
|
|
|
|
</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 | حجم الزر. يوجد خياران: `صغير` و `متوسط` |
|
|
| الموقع | string | موقع الزر بالنسبة لأخوته. Options include: `standalone`, `left`, `middle`, `right` |
|
|
| تطبيق الظل | قيمة منطقية | يحدد إذا ما سيتم تطبيق الظلال على الزر |
|
|
| تطبيق الضباب | قيمة منطقية | يحدد ما إذا كان ينبغي تطبيق تأثير الضباب على الزر |
|
|
| معطل | قيمة منطقية | يحدد ما إذا كان الزر معطل |
|
|
| تركيز | قيمة منطقية | يحدد إذا كان الزر في وضع التركيز |
|
|
|
|
</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 | حجم الزر. يوجد خياران: `صغير` و `متوسط` | صغير |
|
|
| الأبناء | مكون React | مجموعة من عناصر 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 | string | اسم اختياري لتنسيقات إضافية |
|
|
| أيقونة | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر |
|
|
| الحجم | string | حجم الزر. يوجد خياران: `صغير` و `متوسط` |
|
|
| الموقع | string | موقع الزر بالنسبة لأخوته. Options include: `standalone`, `left`, `right`, and `middle` |
|
|
| تطبيق الظل | قيمة منطقية | يحدد إذا ما سيتم تطبيق الظلال على الزر |
|
|
| تطبيق الضباب | قيمة منطقية | يحدد ما إذا كان ينبغي تطبيق تأثير الضباب على الزر |
|
|
| معطل | قيمة منطقية | يحدد ما إذا كان الزر معطل |
|
|
| تركيز | قيمة منطقية | يحدد إذا كان الزر في وضع التركيز |
|
|
| عند_النقر | function | وظيفة رد فعل تنطلق عند نقر المستخدم على الزر |
|
|
| فعّال | قيمة منطقية | يحدد إذا كان الزر في وضع فعّال |
|
|
|
|
</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 | string | اسم اختياري لتنسيقات إضافية |
|
|
| الحجم | string | حجم الزر. يوجد خياران: `صغير` و `متوسط` |
|
|
| أزرار الرموز | array | مجموعة من الكائنات، يمثل كل منها زر رمز في المجموعة. يجب أن يشمل كل كائن مكون الرمز الذي تريد عرضه في الزر، الوظيفة التي ترغب في استدعائها عند نقر المستخدم على الزر، وما إذا كان الزر ينبغي أن يكون نشطًا أم لا. |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Light Button
|
|
|
|
<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` | الرمز الذي تريد عرضه في الزر |
|
|
| العنوان | string | محتوى نصي للزر |
|
|
| accent | string | النمط البصري للزر. تشمل الخيارات `أساسي` و `ثانوي` |
|
|
| نشط | قيمة منطقية | يحدد إذا كان الزر في وضع فعّال |
|
|
| معطل | قيمة منطقية | يحدد ما إذا كان الزر معطل |
|
|
| تركيز | قيمة منطقية | يحدد إذا كان الزر في وضع التركيز |
|
|
| عند النقر | وظيفة | وظيفة رد فعل تنطلق عند نقر المستخدم على الزر |
|
|
|
|
</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 | لون الزر المميز لون الزر المميز تشمل الخيارات: `ثانوي` و `ثالثي` |
|
|
| نشط | قيمة منطقية | يحدد إذا كان الزر في وضع فعّال |
|
|
| معطل | قيمة منطقية | يحدد ما إذا كان الزر معطل |
|
|
| تركيز | قيمة منطقية | يحدد إذا كان الزر في وضع التركيز |
|
|
| عند النقر | 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 | محتوى نصي للزر |
|
|
| عرض كامل | قيمة منطقية | يحدد ما إذا كان الزر يجب أن يمتد على كامل عرض الحاوية |
|
|
| التنوع | string | النمط البصري للزر. لون الزر المميز تشمل الخيارات: `ثانوي` و `ثالثي` |
|
|
| قريباً | قيمة منطقية | يشير إلى ما إذا كان الزر معلمًا "قريبًا" (مثل الميزات القادمة) |
|
|
| أيقونة | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر |
|
|
| خصائص زر 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` | |
|
|
| خصائص زر React | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|