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.
| Nummer | Typ | Beschreibung | Optional | Hinweis |
|---|---|---|---|---|
| 1 | Slot | Beliebiger Inhalt erlaubt | Nein | |
| 2 | Komponente | sbb-sticky-bar | Ja | |
| 2a | Slot | z.B. für Action-Group | Nein |
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.
The image slot can be used to place a background image. If you need to control the object position,
use CSS object-position for slotted img, or --sbb-image-object-position variable for slotted sbb-image.
If an image is present, the container receives a pre-defined padding.
It's possible to override the padding by using the CSS variable --sbb-container-padding.
Optionally, you can add an overlapping sbb-chip-label by wrapping the sbb-image in a figure tag (see sbb-image doc).
<sbb-container>
<figure class="sbb-figure" slot="image">
<sbb-image
image-src="https://cdn.img.sbb.ch/content/dam/internet/externe-assets/lyne/Bahnhof-Luzern.jpg"
alt="Station of Lucerne from outside"
></sbb-image>
<sbb-chip-label class="sbb-figure-overlap-start-start">...</sbb-chip-label>
</figure>
...
</sbb-container>
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 the container's content, including the sbb-sticky-bar.
The component has also five color variants that can be set using the color property (default: white).
In midnight and charcoal variants, the slotted content text color and the focus outline color change to white,
but it's up to the consumer to correctly set the negative property on slotted Lyne components, if needed.
<sbb-container expanded variant="milk"> ... </sbb-container>
<sbb-container variant="midnight">
<sbb-title negative>Title</sbb-title>
<p>Text</p>
</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' | 'midnight' | 'charcoal' | '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. | |
image | The slot used to slot an sbb-image to use as background. |
sticky-bar | The slot used by the sbb-sticky-bar component. |