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
20 KiB
Plaintext
489 lines
20 KiB
Plaintext
---
|
||
title: Düğmeler
|
||
image: /images/user-guide/views/filter.png
|
||
---
|
||
|
||
<Frame>
|
||
<img src="/images/user-guide/views/filter.png" alt="Header" />
|
||
</Frame>
|
||
|
||
Uygulamada kullanılan düğme ve düğme gruplarının bir listesi.
|
||
|
||
## Düğme
|
||
|
||
<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">
|
||
|
||
| Özellikler | Tür | Açıklama |
|
||
| ------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
||
| sınıfAdı | metin | Ek stil için isteğe bağlı sınıf adı |
|
||
| Simge | `React.ComponentType` | Düğme içinde görüntülenen isteğe bağlı bir simge bileşeni |
|
||
| başlık | metin | Düğmenin metin içeriği |
|
||
| tamGenişlik | boolean | Düğmenin konteynerinin tüm genişliğini kaplayıp kaplamayacağını tanımlar |
|
||
| variant | metin | Düğmenin görsel stil varyantı. Seçenekler `primary`, `secondary` ve `tertiary` içerir |
|
||
| boyut | metin | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta` |
|
||
| pozisyon | metin | Düğmenin, kardeşlerine göre konumu. Seçenekler şunları içerir: `tek başına`, `sol`, `sağ`, ve `orta` |
|
||
| vurgula | metin | Düğmenin vurgu rengi. Seçenekler şunları içerir: `varsayılan`, `mavi`, ve `tehlike` |
|
||
| yakında | boolean | Düğmenin "yakında" (örneğin gelecek özellikler için) olarak işaretlenip işaretlenmediğini belirtir |
|
||
| devre dışı | boolean | Düğmenin devre dışı olup olmadığını belirtir |
|
||
| odak | boolean | Düğmenin odaklanmış olup olmadığını belirler |
|
||
| tıklandığında | fonksiyon | Kullanıcı düğmeye tıkladığında tetiklenen bir geri çağırma fonksiyonu |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## Düğme Grubu
|
||
|
||
<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">
|
||
|
||
| Özellikler | Tür | Açıklama |
|
||
| --------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
|
||
| sınıfAdı | metin | Ek stil için isteğe bağlı ad |
|
||
| Simge | `React.ComponentType` | Düğme içinde görüntülenen isteğe bağlı bir simge bileşeni |
|
||
| başlık | metin | Düğmenin metin içeriği |
|
||
| boyut | metin | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta` |
|
||
| pozisyon | metin | Düğmenin, kardeşlerine göre konumu. Seçenekler şunları içerir: `tek başına`, `sol`, `orta`, `sağ` |
|
||
| gölgeUygula | boolean | Bir düğmeye gölge uygulayıp uygulamamayı belirler |
|
||
| bulanıklaştırmaUygula | boolean | Düğmeye bulanıklaştırma efekti uygulayıp uygulamamayı belirler |
|
||
| devre dışı | boolean | Düğmenin devre dışı olup olmadığını belirler |
|
||
| odak | boolean | Düğmenin odakta olup olmadığını belirtir |
|
||
|
||
</Tab>
|
||
</Tabs>
|
||
|
||
## Yüzer Düğme Grubu
|
||
|
||
<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">
|
||
|
||
| Özellikler | Tür | Açıklama | Varsayılan |
|
||
| ---------- | --------- | -------------------------------------------------------------------------------------- | ---------- |
|
||
| boyut | metin | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta` | küçük |
|
||
| çocuklar | ReactNode | Grup içindeki bireysel düğmeleri temsil eden bir dizi React elemanı | |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## Yüzer Simge Düğmesi
|
||
|
||
<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">
|
||
|
||
| Özellikler | Tür | Açıklama |
|
||
| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
||
| sınıfAdı | metin | Ek stil için isteğe bağlı ad |
|
||
| Simge | `React.ComponentType` | Düğme içinde görüntülenen isteğe bağlı bir simge bileşeni |
|
||
| boyut | metin | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta` |
|
||
| pozisyon | metin | Düğmenin, kardeşlerine göre konumu. Seçenekler şunları içerir: `tek başına`, `sol`, `sağ`, ve `orta` |
|
||
| gölgeUygula | boolean | Bir düğmeye gölge uygulayıp uygulamamayı belirler |
|
||
| bulanıklaştırmaUygula | boolean | Düğmeye bulanıklaştırma efekti uygulayıp uygulamamayı belirler |
|
||
| devre dışı | boolean | Düğmenin devre dışı olup olmadığını belirler |
|
||
| odak | boolean | Düğmenin odakta olup olmadığını belirtir |
|
||
| tıklandığında | fonksiyon | Kullanıcı düğmeye tıkladığında tetiklenen bir geri çağırma fonksiyonu |
|
||
| etkin | boolean | Düğmenin etkin durumda olup olmadığını belirler |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## Yüzer Simge Düğme Grubu
|
||
|
||
<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">
|
||
|
||
| Özellikler | Tür | Açıklama |
|
||
| ------------- | ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||
| sınıfAdı | metin | Ek stil için isteğe bağlı ad |
|
||
| boyut | metin | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta` |
|
||
| simgeDüğmeler | dizi | Her biri gruptaki bir simge düğmesini temsil eden nesnelerin bir dizisi. Her bir nesne, düğmede görüntülemek istediğiniz simge bileşenini, kullanıcı düğmeye tıkladığında çağırmak istediğiniz fonksiyonu ve düğmenin etkin olup olmadığını içermelidir. |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## Işık Düğmesi
|
||
|
||
<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">
|
||
|
||
| Özellikler | Tür | Açıklama |
|
||
| ------------- | ----------------- | ------------------------------------------------------------------------------------------------- |
|
||
| sınıfAdı | metin | Ek stil için isteğe bağlı ad |
|
||
| simge | `React.ReactNode` | Düğmede görüntülemek istediğiniz simge |
|
||
| başlık | metin | Düğmenin metin içeriği |
|
||
| vurgula | metin | Düğmenin vurgu rengi. Options include: `secondary` and `tertiary` |
|
||
| aktif | boolean | Düğmenin etkin durumda olup olmadığını belirler |
|
||
| devre dışı | boolean | Düğmenin devre dışı olup olmadığını belirler |
|
||
| odak | boolean | Düğmenin odakta olup olmadığını belirtir |
|
||
| tıklandığında | fonksiyon | Kullanıcı düğmeye tıkladığında tetiklenen bir geri çağırma fonksiyonu |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## Işık Simge Düğmesi
|
||
|
||
<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">
|
||
|
||
| Özellikler | Tür | Açıklama |
|
||
| ------------- | --------------------- | ------------------------------------------------------------------------------------------------- |
|
||
| sınıfAdı | metin | Ek stil için isteğe bağlı ad |
|
||
| testId | metin | Düğme için test tanımlayıcısı |
|
||
| Simge | `React.ComponentType` | Düğme içinde görüntülenen isteğe bağlı bir simge bileşeni |
|
||
| başlık | metin | Düğmenin metin içeriği |
|
||
| boyut | metin | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta` |
|
||
| vurgula | metin | Düğmenin vurgu rengi. Options include: `secondary` and `tertiary` |
|
||
| aktif | boolean | Düğmenin etkin durumda olup olmadığını belirler |
|
||
| devre dışı | boolean | Düğmenin devre dışı olup olmadığını belirler |
|
||
| odak | boolean | Düğmenin odakta olup olmadığını belirtir |
|
||
| tıklandığında | fonksiyon | Kullanıcı düğmeye tıkladığında tetiklenen bir geri çağırma fonksiyonu |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## Ana Düğme
|
||
|
||
<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">
|
||
|
||
| Özellikler | Tür | Açıklama |
|
||
| ------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
||
| başlık | metin | Düğmenin metin içeriği |
|
||
| tamGenişlik | boolean | Düğmenin konteynerinin tüm genişliğini kaplayıp kaplamayacağını tanımlar |
|
||
| variant | metin | Düğmenin görsel stil varyantı. Options include `primary` and `secondary` |
|
||
| yakında | boolean | Düğmenin "yakında" (örneğin gelecek özellikler için) olarak işaretlenip işaretlenmediğini belirtir |
|
||
| Simge | `React.ComponentType` | Düğme içinde görüntülenen isteğe bağlı bir simge bileşeni |
|
||
| React `düğme` özellikleri | `React.ComponentProps<'button'>` | Tüm standart HTML düğme özellikleri desteklenir |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## Yuvarlak Simge Düğmesi
|
||
|
||
<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">
|
||
|
||
| Özellikler | Tür | Açıklama |
|
||
| ------------------------- | ----------------------------------------------- | -------- |
|
||
| Simge | `React.ComponentType` | |
|
||
| React `düğme` özellikleri | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|