Provider

Ne zaman kullanılır

Provider, uygulamanın ya da bir bölümünün dilini, yazı yönünü ve hareket tercihini tek yerden vermek içindir. Çoğu uygulamada tek bir Provider, uygulama kökünü sarar.

Ne zaman kullanılmaz

• Tema ya da marka seçmek için: Tema ve marka Provider prop’u değildir; uygulama kökünde data-theme ve data-brand öznitelikleriyle verilir.
• Uygulama metinleri için: Provider yalnızca kütüphanenin kendi metinlerini (ui.*) çevirir; ekran başlıkları ve etiketler uygulamanın işidir.
• Her bileşenin çevresinde: Aynı ayarı tekrar etmeyin; ayar değişen bir bölüm yoksa tek Provider yeter.

Anatomi

Birincil butonYükleniyor

AçıkKoyu

Kodu kopyala

import { Button, Provider } from '@bigbang/ui';

export default function Locale() {
  return (
    <Provider locale="tr-TR">
      <Button loading>Birincil buton</Button>
    </Provider>
  );
}

1. Kapsayıcı: display: contents olan tek bir <div>; lang, dir ve data-motion öznitelikleri bunun üzerindedir. Kutu oluşturmaz, yerleşimi değiştirmez.
2. İçerik: children; ayarlar bu alana ve altındaki her şeye uygulanır.

Davranış

• locale varsayılanı tr-TR, direction varsayılanı ltr, reducedMotion varsayılanı systemdir. Provider olmadan da kütüphane Türkçe çalışır.
• locale: tr-TR ya da en-GB. Seçim, kütüphane metinlerini (yükleniyor, tamamlandı, zorunlu, isteğe bağlı) ve kapsayıcının lang değerini belirler.
• direction: kapsayıcıya dir verir ve Base UI’ın DirectionProvider’ını besler; ok tuşları ve açılır katmanlar yöne uyar.
• reducedMotion="reduce": kapsayıcıya data-motion="reduce" verir. Token CSS’i azaltılmış değerlere geçer ve useReducedMotion() true döner.
• reducedMotion="system" hareketi işletim sistemine bırakır. İkisi de hareketi geri açamaz: iç içe bir Provider, dıştaki reduce ayarını bozmaz.
• Provider hareket tercihini de, dil ve yönü de bağlam olarak taşır; iç içe Provider yalnızca kendi alanındaki dili ve yönü değiştirir.

Yönergeler

Tek Provider kullanın

Ayarı uygulama kökünde bir kez verin. Ayarı farklı olan bir bölüm varsa yalnızca o bölümü sarın.

Birincil butonİkincil buton

YapınTek Provider tüm içeriği kapsıyor.

Birincil buton

İkincil buton

YapmayınHer buton kendi Provider'ında; aynı ayar tekrar ediyor.

Metin dili ile ekran dilini eşleştirin

locale kütüphane metinlerini değiştirir, uygulama metinlerini değiştirmez. Uygulamanın kendi metinlerini de aynı dilde verin.

İçerik

• locale değeri bir dil etiketidir: tr-TR, en-GB. Başka bir dil için kütüphaneye metin katalogu eklenmesi gerekir.
• Kütüphane metinleri kısa tutulur: “Yükleniyor”, “Tamamlandı”, “zorunlu”, “isteğe bağlı”.
• Bir bileşenin metnini tek tek değiştirmek için ilgili prop’u (loadingLabel gibi) kullanın; Provider tüm alanı değiştirir.

Metin	tr-TR	en-GB
ui.button.loading	Yükleniyor	Loading
ui.button.success	Tamamlandı	Done
ui.field.required	zorunlu	required
ui.field.optional	isteğe bağlı	optional

Malzeme

material="glass" içerideki çerçeve yüzeylerini cama çevirir: üst çubuk, açılır paneller, menüler, bildirimler, araç çubukları ve segmentli kontroller. Tablolar, formlar, kartlar, grafikler, para alanları, ipuçları ve sayfa arka planı opak kalır. Varsayılan solid. Prop verilmeyen bir Provider çevresindekinin malzemesini korur; iç içe bir material="solid" sayfanın o bölümünü opak tutar. Sistem azaltılmış saydamlık istediğinde Provider opak çizer. Bkz. Malzeme.

İlgili bileşenler

• Button: Yükleniyor ve tamamlandı metinlerini Provider’ın dilinden okur.
• Icon: Yönü izleyen ikonlar dir="rtl" altında ters döner.
• Box: Provider yerleşim vermez; yerleşim için Box, Stack ve Grid kullanılır.