Provider

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

Provider.tsx

Storybook

Provider · Playground

Provider, @bigbang/ui paketindedir. Kurulum ve stil dosyaları Button ile aynıdır; ayrıntılar için Button kod sekmesine bakın.

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

<Provider locale="en-GB" direction="ltr">
  <App />
</Provider>;

Özellikler

locale

Açıklama

Kütüphanenin kendi metinlerinin dili, ör. yükleniyor duyurusu ve zorunlu alan işareti, ve içindeki içeriğin lang değeri. Kaynak dil Türkçedir; Provider yoksa da Türkçe kullanılır.

Tür

'tr-TR' | 'en-GB'

Varsayılan

'tr-TR'

direction

Açıklama

İçindeki içeriğin yazı yönü: dir yazar ve Base UI parçalarına ok tuşlarının ve açılır öğelerin yönünü bildirir. Bileşenler mantıksal özellikler kullandığı için başka bir değişiklik gerekmeden aynalanır.

Tür

'ltr' | 'rtl'

Varsayılan

'ltr'

reducedMotion

Açıklama

'reduce', işletim sistemi izin verse de Provider içinde hareketi azaltır; ürün içi bir ayar içindir. 'system' işletim sistemini izler. Sistem daha az hareket istediğinde ikisi de hareketi geri açamaz (MOT-03).

Tür

'system' | 'reduce'

Varsayılan

'system'

material

Açıklama

İçerideki çerçeve yüzeylerinin malzemesi: üst çubuk, açılır paneller, menüler, bildirimler, araç çubukları ve segmentli kontroller. 'glass' bunları içeriğin üstünde yarı saydam, bulanık cama çevirir ve kırılma filtresini bir kez ekler; tablolar, formlar, kartlar, grafikler, para alanları ve ipuçları opak kalır. Verilmezse Provider, çevresindeki Provider'ın malzemesini korur.

Tür

'solid' | 'glass'

Varsayılan

'solid'

childrenZorunlu

Açıklama

Bu ayarların geçerli olduğu uygulama bölümü, genellikle uygulamanın tamamı.

Tür

ReactNode

Provider className, style ya da başka öznitelik almaz.

Veri öznitelikleri

• data-component="provider": kapsayıcı <div> üzerinde.
• data-motion="reduce": yalnızca reducedMotion="reduce" iken, aynı <div> üzerinde.

Tema ve marka

Tema ve marka Provider’ın prop’u değildir. Uygulama kökündeki bir öğeye öznitelik olarak verilir.

<html lang="tr" data-brand="neutral" data-theme="light">

JavaScript ile hareket

CSS token’ları hareketi kendiliğinden azaltır. Yalnızca JavaScript ile sürülen animasyonlarda useReducedMotion() kullanın.

import { useReducedMotion } from '@bigbang/ui';

function Chart() {
  const reduce = useReducedMotion();
  return <AnimatedChart duration={reduce ? 0 : 300} />;
}