github-actions[bot]
cd73088be6
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
523 lines
19 KiB
Plaintext
523 lines
19 KiB
Plaintext
---
|
||
title: Düğmeler
|
||
icon: hand-pointer
|
||
---
|
||
|
||
<Frame>
|
||
<img src="/images/user-guide/views/filter.png" alt="Başlık" />
|
||
</Frame>
|
||
|
||
Uygulamada kullanılan düğme ve düğme gruplarının bir listesi.
|
||
|
||
## Düğme
|
||
|
||
<Tabs>
|
||
|
||
<Tab title="Kullanım">
|
||
|
||
```jsx
|
||
import { Button } from "@/ui/input/button/components/Button";
|
||
|
||
export const MyComponent = () => {
|
||
return (
|
||
<Button
|
||
className
|
||
Icon={null}
|
||
title="Başlık"
|
||
fullWidth={false}
|
||
variant="primary"
|
||
size="medium"
|
||
position="standalone"
|
||
accent="default"
|
||
soon={false}
|
||
disabled={false}
|
||
focus={true}
|
||
onClick={() => console.log("click")}
|
||
/>
|
||
);
|
||
};
|
||
```
|
||
</Tab>
|
||
|
||
<Tab title="Özellikler">
|
||
|
||
|
||
| Özellikler | Tür | Açıklama |
|
||
| ------------- | --------------------- | ---------------------------------------------------------------------------------------------------- |
|
||
| sınıfAdı | string | Ek stil için isteğe bağlı sınıf adı |
|
||
| Simge | `React.ComponentType` | Düğme içerisinde görüntülenen isteğe bağlı bir simge bileşeni |
|
||
| başlık | dize | Düğmenin metin içeriği |
|
||
| tamGenişlik | boolean | Düğmenin konteynerinin tüm genişliğine yayılması gerekip gerekmediğini tanımlar |
|
||
| varyant | dize | Düğmenin görsel stil varyantı. Seçenekler `primary`, `secondary` ve `tertiary` içerir |
|
||
| boyut | dize | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta` |
|
||
| pozisyon | dize | Düğmenin, kardeşlerine göre konumu. Seçenekler şunları içerir: `tek başına`, `sol`, `sağ` ve `orta` |
|
||
| vurgula | dize | Düğmenin vurgu rengi. Seçenekler şunları içerir: `varsayılan`, `mavi`, ve `tehlike` |
|
||
| yakında | boolean | Düğmenin "yakında" olarak işaretlenip işaretlenmediğini gösterir (örneğin, yaklaşan özellikler için) |
|
||
| 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 tetikleyen bir geri çağırma fonksiyonu |
|
||
|
||
|
||
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## Düğme Grubu
|
||
|
||
<Tabs>
|
||
<Tab title="Kullanım">
|
||
```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="Buton 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="Buton 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="Buton 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="Özellikler">
|
||
|
||
|
||
| Özellikler | Tür | Açıklama |
|
||
| ---------- | --------- | ----------------------------------------------------------------------------------------------------- |
|
||
| varyant | dize | Grup içindeki düğmelerin görsel stil varyantı. Seçenekler `primary`, `secondary` ve `tertiary` içerir |
|
||
| boyut | dize | Grup içindeki düğmelerin boyutu. İki seçenek vardır: `orta` ve `küçük` |
|
||
| vurgula | metin | Grup içindeki düğmelerin vurgu rengi. Seçenekler `varsayılan`, `mavi` ve `tehlike` içerir |
|
||
| sınıfAdı | dize | Ek stil için isteğe bağlı sınıf adı |
|
||
| çocuklar | ReactNode | Grup içindeki bireysel düğmeleri temsil eden bir dizi React elemanı |
|
||
|
||
|
||
|
||
</Tab>
|
||
</Tabs>
|
||
|
||
## Yüzer Düğme
|
||
|
||
<Tabs>
|
||
<Tab title="Kullanım">
|
||
|
||
```jsx
|
||
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
|
||
import { IconSearch } from "@tabler/icons-react";
|
||
|
||
export const MyComponent = () => {
|
||
return (
|
||
<FloatingButton
|
||
className
|
||
Icon={IconSearch}
|
||
title="Başlık"
|
||
size="medium"
|
||
position="standalone"
|
||
applyShadow={true}
|
||
applyBlur={true}
|
||
disabled={false}
|
||
focus={true}
|
||
/>
|
||
);
|
||
};
|
||
```
|
||
|
||
</Tab>
|
||
|
||
<Tab title="Özellikler">
|
||
|
||
|
||
| Özellikler | Tür | Açıklama |
|
||
| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------- |
|
||
| sınıfAdı | dize | 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 | dize | Düğmenin metin içeriği |
|
||
| boyut | dize | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta` |
|
||
| pozisyon | dize | 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 odaklanmış olup olmadığını gösterir |
|
||
|
||
|
||
|
||
</Tab>
|
||
</Tabs>
|
||
|
||
## Yüzer Düğme Grubu
|
||
|
||
<Tabs>
|
||
<Tab title="Kullanım">
|
||
|
||
```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="Özellikler">
|
||
|
||
|
||
| Özellikler | Tür | Açıklama | Varsayılan |
|
||
| ---------- | --------- | ------------------------------------------------------------------- | ---------- |
|
||
| boyut | dize | 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="Kullanım">
|
||
|
||
```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="Özellikler">
|
||
|
||
|
||
| Özellikler | Tür | Açıklama |
|
||
| --------------------- | --------------------- | ---------------------------------------------------------------------------------------------------- |
|
||
| sınıfAdı | dize | 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 | dize | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta` |
|
||
| pozisyon | dize | 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 odaklanmış olup olmadığını gösterir |
|
||
| tıklandığında | fonksiyon | Kullanıcı düğmeye tıkladığında tetikleyen bir geri çağırma fonksiyonu |
|
||
| etkin | boolean | Düğmenin etkin bir durumda olup olmadığını belirler |
|
||
|
||
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## Yüzer Simge Düğme Grubu
|
||
|
||
<Tabs>
|
||
<Tab title="Kullanım">
|
||
|
||
```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("Buton 1 tıklandı"),
|
||
isActive: true,
|
||
},
|
||
{
|
||
Icon: IconCheckbox,
|
||
onClick: () => console.log("Buton 2 tıklandı"),
|
||
isActive: true,
|
||
},
|
||
];
|
||
|
||
return (
|
||
<FloatingIconButtonGroup
|
||
className
|
||
size="small"
|
||
iconButtons={iconButtons} />
|
||
);
|
||
};
|
||
|
||
```
|
||
|
||
</Tab>
|
||
|
||
<Tab title="Özellikler">
|
||
|
||
|
||
| Özellikler | Tür | Açıklama |
|
||
| ------------- | ---- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||
| sınıfAdı | dize | Ek stil için isteğe bağlı ad |
|
||
| boyut | dize | 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="Kullanım">
|
||
|
||
```jsx
|
||
import { LightButton } from "@/ui/input/button/components/LightButton";
|
||
|
||
export const MyComponent = () => {
|
||
return <LightButton
|
||
className
|
||
icon={null}
|
||
title="Başlık"
|
||
accent="secondary"
|
||
active={false}
|
||
disabled={false}
|
||
focus={true}
|
||
onClick={()=>console.log('click')}
|
||
/>;
|
||
};
|
||
```
|
||
|
||
|
||
</Tab>
|
||
|
||
<Tab title="Özellikler">
|
||
|
||
|
||
| Özellikler | Tür | Açıklama |
|
||
| ------------- | ----------------- | -------------------------------------------------------------------------- |
|
||
| sınıfAdı | dize | Ek stil için isteğe bağlı ad |
|
||
| simge | `React.ReactNode` | Düğmede görüntülemek istediğiniz simge |
|
||
| başlık | dize | Düğmenin metin içeriği |
|
||
| vurgula | dize | Düğmenin vurgu rengi. Seçenekler şunları içerir: `secondary` ve `tertiary` |
|
||
| aktif | boolean | Düğmenin etkin bir 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="Kullanım">
|
||
|
||
```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="Başlık"
|
||
size="small"
|
||
accent="secondary"
|
||
active={true}
|
||
disabled={false}
|
||
focus={true}
|
||
onClick={() => console.log("click")}
|
||
/>
|
||
);
|
||
};
|
||
```
|
||
|
||
|
||
</Tab>
|
||
|
||
<Tab title="Özellikler">
|
||
|
||
|
||
| Özellikler | Tür | Açıklama |
|
||
| ------------- | --------------------- | -------------------------------------------------------------------------- |
|
||
| sınıfAdı | dize | Ek stil için isteğe bağlı ad |
|
||
| testId | dize | 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 | dize | Düğmenin metin içeriği |
|
||
| boyut | dize | Düğmenin boyutu. İki seçeneği vardır: `küçük` ve `orta` |
|
||
| vurgula | dize | Düğmenin vurgu rengi. Seçenekler şunları içerir: `secondary` ve `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="Kullanım">
|
||
|
||
```jsx
|
||
import { MainButton } from "@/ui/input/button/components/MainButton";
|
||
import { IconCheckbox } from "@tabler/icons-react";
|
||
|
||
export const MyComponent = () => {
|
||
return (
|
||
<MainButton
|
||
title="Onay kutusu"
|
||
fullWidth={false}
|
||
variant="primary"
|
||
soon={false}
|
||
Icon={IconCheckbox}
|
||
/>
|
||
);
|
||
};
|
||
```
|
||
|
||
|
||
</Tab>
|
||
|
||
<Tab title="Özellikler">
|
||
|
||
|
||
| Özellikler | Tür | Açıklama |
|
||
| ------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------- |
|
||
| başlık | dize | Düğmenin metin içeriği |
|
||
| tamGenişlik | boolean | Düğmenin konteynerinin tüm genişliğini kaplayıp kaplamayacağını tanımlar |
|
||
| varyant | dize | Düğmenin görsel stil varyantı. Seçenekler şunları içerir: `primary` ve `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="Kullanım">
|
||
|
||
```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="Özellikler">
|
||
|
||
|
||
| Özellikler | Tür | Açıklama |
|
||
| ------------------------- | ----------------------------------------------- | -------- |
|
||
| Simge | `React.ComponentType` | |
|
||
| React `düğme` özellikleri | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
||
|
||
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|