Temeller
Materyal
Yüzeyler varsayılan olarak opaktır. Cam, içeriğin üstünde duran çerçeve yüzeyleri için ikinci bir materyaldir; içeriğin kendisi her zaman opak kalır.
Nasıl çalışır
Bölüm başlığı “Nasıl çalışır”Her yüzeyin bir materyali vardır. Opak varsayılandır: yükselti seviyelerinden gelen dolu bir dolgu. Cam, arkadaki içeriğin bulanıklaştırılmış ve doygunlaştırılmış kopyası üstünde yarı saydam bir tondur; açık bir kenar, ince bir çizgi, yumuşak bir gölge ve üstte bir parlama taşır. Chromium’da camın kenarı arka planı hafifçe kırar.
Cam markanın değil uygulamanın özelliğidir. Her marka paketi iki materyalle de çalışır; cam renkleri aynı açık ve koyu mod token’larından gelir.
Provider üzerinde material="glass" verin. Provider data-material="glass" yazar ve içerideki çerçeve yüzeyleri Tailwind glass: varyantıyla cama döner. Provider kırılma filtresini de bir kez ekler; filtre kenar haritasını /assets/bigbang/glass-edge-map.svg adresinden okur, bu yüzden @bigbang/tokens/assets/* dosyalarını bu yoldan sunun.
<Provider material="glass"> <App /></Provider>Prop verilmeyen bir Provider çevresindekinin materyalini korur. İç içe bir <Provider material="solid"> sayfanın o bölümünü opak tutar.
Cam nerede kullanılır
Bölüm başlığı “Cam nerede kullanılır”Cam yalnızca çerçeve içindir: içeriğin üstünde duran kontroller ve gezinme.
| Yüzey | Cam | Not |
|---|---|---|
| AppShell üst çubuğu | Evet | Altında bulanık bir kaydırma kenarıyla |
| AppShell kenar çubuğu | inset varyantı |
Menü çekmecesi opak kalır |
| Popover, DropdownMenu, Select ve Combobox listeleri | Evet | Alanların kendisi opak kalır; InfoPopover opak kalır |
| CommandDialog | Evet | |
| Dialog, AlertDialog | Evet, daha yüksek kontrastlı ton | Uzun metin, üçten fazla alanlı formlar ve onay blokları için opak kullanın |
| Toast | Evet | |
| Toolbar, ActionBar, SaveBar | Evet | |
SegmentedControl, Tabs contained |
Evet | Seçili parça daha yüksek kontrastlı tonu alır |
Button glass, glass-prominent |
Her zaman | Medya üstündeki kontroller için |
Tablodaki her yüzey, cam bir Provider altında opak kalmak için material="solid" alır.
Hiçbir zaman cam olmayanlar
Bölüm başlığı “Hiçbir zaman cam olmayanlar”Table ve DataTable, grafikler, StatCard, form alanları, Card gövdeleri, para ve IBAN alanları, Tooltip ve sayfa arka planı her zaman opaktır. İnsanların okuduğu, karşılaştırdığı ya da yazdığı metin sabit bir zemin ister.
<Toolbar label=“Biçim”>…</Toolbar><Card className=“glass:material-glass”>Medya üstünde cam
Bölüm başlığı “Medya üstünde cam”Button variant="glass" ve variant="glass-prominent" cam bir Provider olmadan da camdır. Fotoğraf, video ya da hareketli bir arka plan üstündeki kontroller için kullanın. glass-prominent birincil renkle tonlanır ve parlama taşımaz.
Arkadaki içerik sayfa moduna uymuyorsa, ör. açık bir sayfada koyu bir fotoğraf, o bölgeyi data-backdrop="dark" ya da data-backdrop="light" ile işaretleyin. Bölge o modun renk token’larını alır; içindeki cam ve metin okunur kalır. data-backdrop="dark" içindeki yalnızca ikonlu bir cam buton şeffaf camı kullanır: karartma katmanı üstünde daha ince bir ton.
Camın opak çizildiği durumlar
Bölüm başlığı “Camın opak çizildiği durumlar”Cam şu durumlarda aynı metin renkleriyle opak yükseltilmiş yüzeye döner:
- kullanıcı daha fazla kontrast istediğinde (
prefers-contrast: more) ya da zorlanmış renkler açıkken; - kullanıcı azaltılmış saydamlık istediğinde ya da ekran yavaş güncellendiğinde;
- tarayıcı
backdrop-filterdesteklemediğinde; - uygulama
<html>üzerindedata-material-pref="solid"verdiğinde, ör. uygulama içi bir ayardan.
Azaltılmış harekette cam kontrollerin basma büyümesi ve hareketli parlaması kapanır.
Kontrast
Bölüm başlığı “Kontrast”Cam üstündeki metin ortalama değil en kötü arka plana karşı 4.5:1, ikonlar 3:1 sağlar. Token kontrolleri her cam tonunu beyaz, siyah, orta gri, saf mavi, sarı, kırmızı ve yeşil üstünde, materyalin doygunluk ve parlaklık ayarından sonra, parlamalı ve parlamasız olarak her marka ve iki mod için hesaplar. Bulanıklık arka planın yalnızca ortalamasını alır; gerçek bir arka plan bunlardan kötü olamaz.
Cam üstünde text-default, text-subtle ve açık modda text-subtlest kullanın. Anlam taşıyan ikonlar icon-default kullanır; aynı şeyi söyleyen bir etiketin yanındaki ikon daha soluk olabilir.
Token’lar
Bölüm başlığı “Token’lar”| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-material-glass-regular | rgba(255, 255, 255, 0.8)rgba(255, 255, 255, 0.8)rgba(255, 255, 255, 0.8) | rgba(30, 30, 30, 0.8392156862745098)rgba(30, 30, 30, 0.8392156862745098)rgba(30, 30, 30, 0.8392156862745098) | |
--bigbang-color-material-glass-regular-contrast | rgba(255, 255, 255, 0.9215686274509803)rgba(255, 255, 255, 0.9215686274509803)rgba(255, 255, 255, 0.9215686274509803) | rgba(30, 30, 30, 0.8784313725490196)rgba(30, 30, 30, 0.8784313725490196)rgba(30, 30, 30, 0.8784313725490196) | |
--bigbang-color-material-glass-clear | rgba(255, 255, 255, 0.2784313725490196)rgba(255, 255, 255, 0.2784313725490196)rgba(255, 255, 255, 0.2784313725490196) | rgba(30, 30, 30, 0.30196078431372547)rgba(30, 30, 30, 0.30196078431372547)rgba(30, 30, 30, 0.30196078431372547) | |
--bigbang-color-material-glass-dim | rgba(0, 0, 0, 0.34901960784313724)rgba(0, 0, 0, 0.34901960784313724)rgba(0, 0, 0, 0.34901960784313724) | rgba(0, 0, 0, 0.34901960784313724)rgba(0, 0, 0, 0.34901960784313724)rgba(0, 0, 0, 0.34901960784313724) | |
--bigbang-color-material-glass-rim | rgba(255, 255, 255, 0.7019607843137254)rgba(255, 255, 255, 0.7019607843137254)rgba(255, 255, 255, 0.7019607843137254) | rgba(255, 255, 255, 0.1803921568627451)rgba(255, 255, 255, 0.1803921568627451)rgba(255, 255, 255, 0.1803921568627451) | |
--bigbang-color-material-glass-edge | rgba(0, 0, 0, 0.058823529411764705)rgba(0, 0, 0, 0.058823529411764705)rgba(0, 0, 0, 0.058823529411764705) | rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549) | |
--bigbang-color-material-glass-shade | rgba(0, 0, 0, 0.0392156862745098)rgba(0, 0, 0, 0.0392156862745098)rgba(0, 0, 0, 0.0392156862745098) | rgba(0, 0, 0, 0.30196078431372547)rgba(0, 0, 0, 0.30196078431372547)rgba(0, 0, 0, 0.30196078431372547) | |
--bigbang-color-material-glass-specular | rgba(255, 255, 255, 0.5490196078431373)rgba(255, 255, 255, 0.5490196078431373)rgba(255, 255, 255, 0.5490196078431373) | rgba(255, 255, 255, 0.12156862745098039)rgba(255, 255, 255, 0.12156862745098039)rgba(255, 255, 255, 0.12156862745098039) |
| Token | Açık mod | Koyu mod |
|---|---|---|
--bigbang-blur-surface-glass | 16px16px16px | 20px20px20px |
--bigbang-blur-surface-glass-clear | 6px6px6px | 8px8px8px |
--bigbang-shadow-glass | 0px 8px 32px -8px rgba(0, 0, 0, 0.1607843137254902), 0px 2px 6px -2px rgba(0, 0, 0, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.1607843137254902), 0px 2px 6px -2px rgba(0, 0, 0, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.1607843137254902), 0px 2px 6px -2px rgba(0, 0, 0, 0.10196078431372549) | 0px 8px 32px -8px rgba(0, 0, 0, 0.47843137254901963), 0px 0px 0px 0.5px rgba(255, 255, 255, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.47843137254901963), 0px 0px 0px 0.5px rgba(255, 255, 255, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.47843137254901963), 0px 0px 0px 0.5px rgba(255, 255, 255, 0.10196078431372549) |
--bigbang-material-glass-saturate | 1.81.81.8 | 1.51.51.5 |
--bigbang-material-glass-brightness | 1.041.041.04 | 0.960.960.96 |
--bigbang-material-glass-scroll-edge | 24px24px24px | 24px24px24px |
--bigbang-motion-glass-press-scale | 1.021.021.02 | 1.021.021.02 |
Tailwind’de material-glass materyali çizer; material-glass-contrast, material-glass-clear, material-glass-prominent, material-glass-interactive ve material-glass-scroll-edge değiştiricileriyle kullanılır. Yalnızca camın açık olduğu yerde uygulanmaları için bunları glass: varyantının arkasına yazın.