Container – digital.sbb.ch

Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles Deutsch

English

Container

Info

Was macht die Komponente?

Ein Container gruppiert zusammengehörige Inhalte, definiert Abstände zum vorherigen und nächsten Container und kann einen Sticky-Footer enthalten.

Wann soll die Komponente eingesetzt werden?

Um Inhalte logisch zu gruppieren und zu strukturieren.
Um konsistente Abstände und Layouts innerhalb einer Seite oder Anwendung zu gewährleisten.
Wenn ein Sticky-Footer benötigt wird, der am unteren Rand des Containers bleibt.

Regeln

Jeglicher Inhalt (abgesehen von Header und Footer) ist in einem Container zu platzieren. Somit muss mindestens ein Container je Seite eingesetzt werden.
Die Abstände der Container können angepasst werden, sofern dies erforlderlich ist.

Enthaltene Komponenten

Sticky-Bar

Anatomie

Nummer	Typ	Beschreibung	Optional
1	Slot	Beliebiger Inhalt erlaubt	Nein
2	Komponente	`sbb-sticky-bar`	Ja
2a	Slot	z.B. für Action-Group	Nein

Demo

Beispiele

Default

Transparent

Milk

Expanded

Milk Background Expanded

HTML-Markup kopiert.

Implementation

The sbb-container is a component that displays its content with the default page spacing. It also supports the slotting of a sbb-sticky-bar.

<sbb-container>
  <!-- Any other kind of content. -->
  ...

  <!-- Sticky bar should go last. -->
  <sbb-sticky-bar> ... </sbb-sticky-bar>
</sbb-container>

Slots

The sbb-container content is provided via an unnamed slot.

Style

By default sbb-container uses the page spacing defined in the layout documentation. Optionally the user can use the expanded property (default: false) to switch to the page spacing expanded layout.
Spacing options are applied to all of the container's content, including the sbb-sticky-bar.
The component has also four color variants that can be set using the color property (default: white).

<sbb-container expanded variant="milk"> ... </sbb-container>

Properties

Name	Attribute	Privacy	Type	Default	Description
`backgroundExpanded`	`background-expanded`	public	`boolean`	`false`	Whether the background color is shown on full container width on large screens.
`color`	`color`	public	`'transparent' \| 'white' \| 'milk'`	`'white'`	Color of the container, like transparent, white etc.
`expanded`	`expanded`	public	`boolean`	`false`	Whether the container is expanded.

Slots

Name	Description
	Use the unnamed slot to add anything to the container.
`sticky-bar`	The slot used by the sbb-sticky-bar component.