# Container

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: Hauptelement mit Bestandteilen; Bestandteile nur innerhalb des jeweiligen Elements verwenden
- Kategorien: Container
- Status: Gestaltungsrichtlinien vollständig

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/design-system/lyne/components/container/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-container--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/container/overview (API: https://lyne-angular.app.sbb.ch/angular/components/container/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-24
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/container

## Elemente

- `sbb-container`: It displays its content with the default page spacing.
  - `sbb-sticky-bar`, nur innerhalb von `sbb-container`: A container that sticks to the bottom of the page if slotted into `sbb-container`.

## Übersicht

### Was macht die Komponente?
Ein Container gruppiert zusammengehörige Inhalte und gibt ihnen den Seitenabstand vor. Er kann eine Sticky-Bar enthalten.

### Wann soll die Komponente eingesetzt werden?
* Um Inhalte logisch zu gruppieren und zu strukturieren.
* Um konsistente Abstände und Layouts auf einer Seite zu gewährleisten.
* Wenn eine Sticky-Bar am unteren Rand des Containers benötigt wird.

### Regeln.
* Jeder Inhalt ausser [Header](https://digital.sbb.ch/de/design-system/lyne/components/header/) und [Footer](https://digital.sbb.ch/de/design-system/lyne/components/footer/) steht in einem Container. Pro Seite gibt es mindestens einen.
* Der Standard-Seitenabstand kann bei Bedarf auf den erweiterten Abstand umgestellt werden.
* Die Sticky-Bar steht als letztes Element im Container.
* Bei dunklen Hintergrundfarben müssen Komponenten im Container selbst auf «negativ» gesetzt werden.

## Implementation (Web Components, Englisch)

The `<sbb-container>` is a component that displays its content with the default page spacing.

```html
<sbb-container>
  <sbb-title>My Title</sbb-title>
  <p>...</p>
  ...
</sbb-container>
```

It also supports the slotting of an `<sbb-sticky-bar>`.

```html
<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](https://lyne-elements.app.sbb.ch/?path=/docs/elements-image--docs#utility-classes)).

```html
<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](https://lyne-elements.app.sbb.ch/?path=/docs/guides-layout--docs).
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.

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

<sbb-container variant="midnight">
  <sbb-title negative>Title</sbb-title>
  <p>Text</p>
</sbb-container>
```

### Sticky Bar

The `<sbb-sticky-bar>` is a component meant to be slotted inside a `<sbb-container>` component.
It is displayed with sticky positioning at the bottom of the container that contains it.

```html
<sbb-container>
  <sbb-sticky-bar>
    <!-- Sticky bar content. -->
  </sbb-sticky-bar>
</sbb-container>
```

#### Animate from sticky to normal content flow and vice versa

By default, the sticky bar is set to `position: sticky`. In certain cases, the consumer needs
to control the sliding out (or sliding in) of the sticky bar.
By calling the `stick()` or `unstick()` methods, the position property is toggled
between `position: sticky` and `position: relative` by displaying a slide animation. When the sticky bar is `unstick`,
the `<sbb-sticky-bar>` will behave like a normal container without any sticky behavior.
Whenever the sticky bar is currently not sticky (e.g. scrolled down),
calling `stick()` or `unstick()` won't have any visual effect.

An example use case is to call `unstick()`, which visually slides out the sticky bar, and
then the consumer can remove it from the DOM by listening to the `unstick` event.

#### Style

The `<sbb-sticky-bar>` inherits its variant from the `<sbb-container>` it's placed in.
Optionally the user can set the `color` property on the `<sbb-sticky-bar>` in order to override the one inherited by the `<sbb-container>`.
The color is only applied when the sticky bar is sticking, and will become transparent once it settles on the bottom of the container.

The component has two sizes, `s` and `m`, that can be set using the `size` property.

## API (Web Components, Englisch)

Vollständige API-Tabellen (Attribute, Events, Slots, CSS-Eigenschaften): https://digital.sbb.ch/de/design-system/lyne/components/container/api.md