Навігація

Tabs

Складніший компонент — variant × tone × size × isFitted × overflow + active/inactive state. Експлорер: палітра → hue → stop, далі всі комбінації в обраному кольорі. Active-таб тримає той самий gradient-recipe, що й solid-Badge (S → S+1 у Tabs, бо ширша «пігулка»), plate face — S-2 → S-3, base wall — S; tone=soft зсуває все на 1 tier світліше. Цю сторінку рендерить **той самий** `<Tabs>` із glass-ui, через `ramp` + `stop` escape-hatch — тому що ти тут бачиш = те, що отримає `/printforms/templates` чи будь-яка інша сторінка бухгалтерії.

import { Tabs } from "@residence/glass-ui"

Палітра + Відтінок

3 кроки: палітра (16 + 20 + 18) → hue → stop. Нижче — все, що тільки вміє Tabs, рендериться в обраному кольорі.

01 · Палітра

02 · Hue · Смарагд

03 · Stop · 500

Прев'ю · emerald-500

Variant / tone / size / icons / counts / fitted / overflow — всі рендеряться в обраному hue × stop. Окремий ряд знизу показує цей самий hue у всіх 11 стопах одночасно — щоб обрати найкращий stop для tab-strip'а.

Optionsопційні відхилення від канонічного recipe

Invert active button on very dark plates(plate avg lum < 0.25 → active стає світлою пігулкою)

Variantsglass-solid (default) / glass-soft / block

glass · solid

glass · soft

block (flat)

Sizessm 28px / md 36px / lg 44px · glass-solid

md (default)

Icons & countsicon liva від label / count-пігулка справа

з іконками

з лічильниками

isFittedкожен сегмент розтягується на рівну частку — strip займає всю ширину контейнера

isFitted=true

Overflowwrap (default) — перенос на новий рядок (+ роздільник між рядками) · fillRows — кожен рядок розтягується на всю ширину · scroll — горизонтальний скрол з native scrollbar

overflow=wrap

overflow=wrap + fillRows

overflow=scroll

All stops · emeraldтой самий hue у 11 стопах — клік по підпису stop'а перемикає picker

#E9F9EF

#BFEFD2

#80DDA8

#41C77C

#1AA859

#0F8945

#0B6F37

#08552A

#053D1F

#032712

#011608

Recipeglass-solid · emerald-500

plate face:    linear-gradient(180deg, #41C77C 0%, #80DDA8 100%)   (soft tone: #80DDA8 → #BFEFD2)
plate avg lum: 0.513   isDark=false   isVeryDark=false
base wall:     #0F8945   (soft tone: #41C77C)
face border:   rgba(26,168,89,0.7)
divider:       rgba(26,168,89,0.45)

active button: linear-gradient(180deg, #1AA859 0%, #0B6F37 100%)   [default — relative S-1 → S+1]
active text:   #011608   threshold=0.5
inactive text: #011608 @ 72%   (auto — white on plate avg lum < 0.5)

invertActiveOnDark = false   (UI toggle: OFF)