Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles: Deutsch English Map-Container. Übersicht

Aperçu.

Inhalt
Karte

Was macht die Komponente?

Der Map-Container ist ein Layout für Seiten mit einer Karte. Er teilt die Seite in eine Seitenleiste für Inhalte und eine Fläche für die Karte. Auf grossen Bildschirmen stehen beide nebeneinander. Auf kleinen Bildschirmen bleibt die Karte oben stehen und die Inhalte scrollen darüber.

Wann soll die Komponente eingesetzt werden?

  • Für Seiten, auf denen eine Karte zusammen mit Inhalten oder einer Navigation gezeigt wird, z.B. eine Störungskarte.
 Anwendung

Regeln.

  • Der Map-Container füllt die Seite unterhalb des Headers aus. Pro Seite wird nur ein Map-Container eingesetzt.
  • In der Seitenleiste stehen die Inhalte, die zur Karte gehören, z.B. Listen, Filter oder Details zu einem Ort.
  • Inhalte und Karte sollen sich aufeinander beziehen: Was in der Seitenleiste ausgewählt wird, soll auf der Karte erkennbar sein.

Spécification.

Ouvrir dans Figma
Beispiele Map Container.
Auf Storybook ausprobieren HTML einblenden
HTML in Zwischenablage kopiert. Implementation

Web Components.

Le web component se trouve dans le paquet @sbb-esta/lyne-elements.

Storybook avec exemples interactifs Code source sur GitHub

Documentation.

This component is the layout container for the disruption map, the level 3 navigation and the future ATLAS.

Slots.

It provides two slots: one unnamed slot for the sidebar content, and one named map for the map.

<sbb-map-container>
  <div>Content</div>
  <div slot="map">Here comes the map.</div>
</sbb-map-container>

On mobile, the map is sticky above the sidebar, and the sidebar content is scrolling over the map.
On desktop, the sidebar and the map are shown in a two column layout side by side.

Angular.

Ce composant est également disponible pour Angular dans le paquet @sbb-esta/lyne-angular.

Aperçu Angular API Angular Exemples Angular API

class: SbbMapContainerElement, sbb-map-container.

Properties.

Name Attribute Privacy Type Default Description
hideScrollUpButton hide-scroll-up-button public boolean false Flag to show/hide the scroll up button inside the sidebar on mobile.

CSS Properties.

Name Default Description
--sbb-map-container-margin-start var(--sbb-header-vertical-spacing) The component comes along with a height calculation that subtracts the height of the header. For specific use cases, this variable can be used to modify the preset height.
--sbb-map-container-mobile-sticky-block-start 0 If e.g. a header with a fixed height is placed before the map-container, the map should be sticky respecting this offset from the document's top. Only applied on mobile views. Most commonly it can be set to var(--sbb-header-vertical-spacing).
--sbb-map-container-sidebar-width zero-large:400px;ultra:480px Can be used to modify the width of the left sidebar.

Slots.

Name Description
Use the unnamed slot to add content to the sidebar.
map Used for slotting the map.