Przegląd stylizacji
Każdy badge ma własne pola stylizacji. Cokolwiek zostawisz puste, fallbackuje na slot, potem rozmieszczenie, potem globalne ustawienia domyślne. Ta strona dokumentuje dostępne pola i kolejność rozwiązywania.
Dostępne pola stylu
Dział zatytułowany „Dostępne pola stylu”Ten sam zestaw pól istnieje na badge’u, slocie, rozmieszczeniu i globalnych ustawieniach domyślnych:
| Pole | Efekt |
|---|---|
| Kolor tła | Wypełnienie tła (dowolny kolor CSS). |
| Kolor tekstu | Kolor tekstu i ikony inline. |
| Rozmiar fontu | Rozmiar tekstu badge’a. |
| Line height | Odstęp pionowy tekstu badge’a. |
| Padding | Wewnętrzny odstęp między tekstem a krawędzią badge’a. |
| Margin | Zewnętrzny odstęp wokół badge’a. |
| Gap | Odstęp między tekstem a ikoną. |
| Promień zaokrąglenia | Zaokrąglenie narożników (ustaw na 0 dla wstążek). |
| Backdrop filter | CSS backdrop-filter (np. blur(8px)) dla efektu szronionego szkła. |
| Rozmiar ikony | Rozmiar ikony SVG, jeśli obecna. |
| Kierunek flex | Kolejność tekstu i ikony (row, row-reverse, column, column-reverse). |
Wszystkie wartości używają wewnętrznie CSS custom properties — czysto integrują się z dowolnym motywem.
Kolejność dziedziczenia
Dział zatytułowany „Kolejność dziedziczenia”Style są rozwiązywane od najwyższego priorytetu do najniższego. Pierwszy poziom z niepustą wartością wygrywa:
- Sam badge — jego stylizacja nadpisuje wszystko.
- Rozmieszczenie — gdy badge używa rozmieszczenia innego niż nakładka (nad/pod boksem zakupowym, nad/pod informacjami o produkcie), domyślne rozmieszczenia stosują się następnie.
- Slot — gdy badge używa nakładki na zdjęciu, domyślne Lewego lub Prawego slotu stosują się następnie.
- Globalne ustawienia domyślne — wartości z zakładki Domyślne badge w konfiguracji globalnej stosują się ostatecznie.
Ustawienie wartości na poziomie badge’a nadpisuje wszystko inne — nawet jeśli slot i globalne ustawienia domyślne nie zgadzają się, badge wygrywa.
Kiedy ustawiać ustawienia domyślne vs. wartości per badge
Dział zatytułowany „Kiedy ustawiać ustawienia domyślne vs. wartości per badge”- Globalne ustawienia domyślne — wybierz wartości pasujące do języka wizualnego sklepu. Większość badge powinna wyglądać “wystarczająco dobrze” bez stylizacji per badge.
- Ustawienia domyślne slotu — używaj gdy jedna strona zdjęcia potrzebuje odrębnego stylu (np. wstążki po prawej z grubym paddingiem, płaskie naklejki po lewej z ciasnym paddingiem).
- Ustawienia domyślne rozmieszczenia — ustaw gdy badge nad-boksem i pod-boksem potrzebują różnych wizualnych (np. większy nad, mniejszy pod).
- Per badge — nadpisuj tylko co jest faktycznie specyficzne dla badge’a (kolor marki kampanii, ponadwymiarowy font dla promocji hero).
Łączenie kolorów z backdrop filter
Dział zatytułowany „Łączenie kolorów z backdrop filter”Dla efektów szronionego szkła paruj backdrop filter taki jak blur(8px) z półprzezroczystym tłem jak rgba(255, 255, 255, 0.6). Plugin emituje to jako CSS custom properties, więc efekt działa na dowolnym tle obrazu.
Podgląd na żywo
Dział zatytułowany „Podgląd na żywo”Formularz edycji badge’a ma panel Podgląd (przełącznik w nagłówku). Re-renderuje się w czasie rzeczywistym gdy edytujesz dowolne pole stylu. Przełączaj podgląd między rozmieszczeniami żeby sprawdzić jak badge wygląda w każdej pozycji.
Zobacz Wskazówki o podglądzie na żywo po więcej.