LivaButton
DevExtreme'in Button bileşeni üzerine kurulu; variant, size, type (renk)
ve loading prop'larıyla genişletilmiş bir butondur.
import { LivaButton } from "@dataliva/livalib";
Varyantlar
Dolu, çerçeveli ve düz stiller arasında geçiş için variant kullanılır.
Renkler
type prop'u anlamsal renklere karşılık gelir: default, success, danger,
normal, back.
Boyutlar
size butonun yüksekliğini, iç boşluğunu, ikonunu ve yazı boyutunu birlikte
ölçekler: xxs 22px, xs 26px, sm 29px, md 32px, lg 38px, xl 44px.
size verilmezse temanın varsayılanı geçerlidir; bu md ile birebir aynıdır.
Eski small / medium / large değerleri sm / md / lg karşılığına
çevrilir. Ölçüler kullanıcının yazı boyutu tercihiyle birlikte büyür.
Kullanıcı Erişilebilirlik panelinde Buton ve sekme boyutu için bir değer
seçtiyse (varsayılan "Otomatik" dışında) bu tercih uygulamadaki tüm butonlara
uygulanır ve size prop'u yok sayılır — tablolardaki satır yoğunluğu
tercihiyle aynı kural. Aynı ölçeği LivaIconButton ve
LivaTabPanel de kullanır.
Durumlar
loading bir spinner gösterir ve tıklamayı engeller; spinner butonun boyutuna
göre ölçeklenir. disabled butonu soluklaştırır.
Tüm prop'lar aşağıda listelenmiştir. ᴰˣ ile işaretli olanlar LivaButton'ın
kendi prop'ları değildir; alttaki DevExtreme Button'dan (IButtonOptions ve
temel Widget zincirinden) miras alınır ve ...props ile doğrudan aktarılır.
| Prop | Tip | Varsayılan |
|---|---|---|
text | string | — |
variant | 'contained' | 'outlined' | 'text' | 'contained' |
size | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'small' | 'medium' | 'large' | — (tema varsayılanı, md) |
type | 'default' | 'success' | 'danger' | 'normal' | 'back' | 'default' |
loading | boolean | false |
disabled | boolean | false |
className | string | '' |
onClick | (e) => void | — |
icon ᴰˣ | string | — |
stylingMode ᴰˣ | 'text' | 'outlined' | 'contained' | — |
template ᴰˣ | template | ((data: { text; icon }, element) => string | Element) | — |
useSubmitBehavior ᴰˣ | boolean | — |
validationGroup ᴰˣ | string | — |
activeStateEnabled ᴰˣ | boolean | — |
focusStateEnabled ᴰˣ | boolean | — |
hoverStateEnabled ᴰˣ | boolean | — |
visible ᴰˣ | boolean | — |
hint ᴰˣ | string | — |
accessKey ᴰˣ | string | — |
tabIndex ᴰˣ | number | — |
rtlEnabled ᴰˣ | boolean | — |
height ᴰˣ | number | string | — |
width ᴰˣ | number | string | — |
elementAttr ᴰˣ | Record<string, any> | — |
id ᴰˣ | string | — |
style ᴰˣ | CSSProperties | — |
children ᴰˣ | ReactNode | — |
render ᴰˣ | (...params) => ReactNode | — |
component ᴰˣ | ComponentType<any> | — |
onContentReady ᴰˣ | (e) => void | — |
onInitialized ᴰˣ | (e) => void | — |
onDisposing ᴰˣ | (e) => void | — |
onOptionChanged ᴰˣ | (e) => void | — |
ᴰˣ = DevExtreme Button'dan miras alınan (inherited) seçenek — LivaButton özel
olarak tanımlamaz, ...props üzerinden Button bileşenine geçer.