Kontener

Kontener centruje swoją zawartość, ogranicza szerokość, żeby wiersze tekstu pozostały czytelne, i trzyma margines, by nic nie dotykało krawędzi ekranu telefonu. Zwykle jest pierwszą rzeczą wewnątrz body().

Podstawowy kontener

Wszystko w środku zostaje wyśrodkowane i przestaje rosnąć przy limicie rozmiaru.

container(
  text({ variant: 'lead' }, 'Wszystko w środku zostaje wyśrodkowane i przestaje rosnąć przy limicie rozmiaru.'),
)

Rozmiary

Pięć stopni, od jednej czytelnej kolumny po brak jakiegokolwiek limitu. sm to około 40rem — mniej więcej szerokość, jakiej chce proza.

sm — 40rem

md — 56rem

lg — 72rem (domyślnie)

stack({ gap: 'sm' },
  container({ size: 'sm', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'sm — 40rem'),
  ),
  container({ size: 'md', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'md — 56rem'),
  ),
  container({ size: 'lg', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'lg — 72rem (domyślnie)'),
  ),
)

Własna szerokość

width przyjmuje dowolną długość CSS i nadpisuje size — dla tej jednej strony, która potrzebuje czegoś spoza skali.

width: 30rem

container({ width: '30rem', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
  text({ variant: 'small', align: 'center' }, 'width: 30rem'),
)

Margines boczny

Margines boczny to odstęp trzymany między treścią a krawędzią widocznego obszaru. Przyjmuje token odstępu, liczbę jednostek odstępu albo surową długość.

Szerszy margines, dla strony, której treść nie powinna dobijać do krawędzi na tablecie.

container({ size: 'sm', gutter: 'xl', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
  text({ variant: 'small' }, 'Szerszy margines, dla strony, której treść nie powinna dobijać do krawędzi na tablecie.'),
)

Jako inny element

as zmienia znacznik, nie zmieniając niczego innego — przydatne, gdy kontener jest zarazem <main> strony albo <section>.

Element main

Ten sam układ, właściwy punkt orientacyjny.

container({ as: 'main', size: 'md' },
  heading({ level: 2, size: 'h4' }, 'Element main'),
  text({ tone: 'muted' }, 'Ten sam układ, właściwy punkt orientacyjny.'),
)

Propsy

Prop	Typ	Domyślnie	Opis
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'lg'`	Który limit szerokości zastosować.
`width`	`string`	—	Surowa max-width, nadpisuje size.
`gutter`	`Space`	`'md'`	Wewnętrzny odstęp trzymany przy krawędzi widocznego obszaru.
`as`	`string`	`'div'`	Element do wyrenderowania, np. main albo section.