Dialog-Title

Info

Was macht die Komponente?

Sie ist Teil der Dialog-Komponente.

Wann soll die Komponente eingesetzt werden?

Nur innerhalb der Dialog-Komponente.

Übergeordnete Komponenten

Dialog

Anatomie

Nummer	Typ	Beschreibung	Optional	Hinweis
1	Komponente	`sbb-dialog-title`	Nein
1a	Komponente	`sbb-secondary-button`	Ja	Back-Button
1b	Komponente	`sbb-secondary-button`	Nein
1c	Komponente	`sbb-secondary-button`	Ja	Close-Action
2	Komponente	`sbb-title`	Nein
2a	Slot	Beliebiger Inhalt erlaubt	Nein
3	Komponente	`sbb-dialog-actions`	Ja
3a	Komponente	`sbb-secondary-button`	Ja	Auch Block-Links sind erlaubt
3b	Komponente	`sbb-button`	Ja	Auch Block-Links sind erlaubt

Implementation

The sbb-dialog-title component extends the sbb-title component. Use it in combination with the sbb-dialog to display a header in the dialog with a title, a close button and an optional back button.

<sbb-dialog>
  <sbb-dialog-title
    back-button
    accessibility-close-label="Close button"
    accessibility-back-label="Back button"
  >
    A describing title of the dialog
  </sbb-dialog-title>
</sbb-dialog>

States

The title can have a negative state which is automatically synchronized with the negative state of the dialog.

In addition, the title can be hidden when scrolling down the content, to provide more space for reading the content itself; this can be done thanks to the hide-on-scroll property, which can determine whether to hide the title and up to which breakpoint.

<sbb-dialog>
  <sbb-dialog-title hide-on-scroll="small">A describing title of the dialog</sbb-dialog-title>
</sbb-dialog>

Interactions

A close button is always displayed and can be used to close the dialog. Optionally, a back button can be shown with the property back-button (default is false). Note that setting an accessibilityBackLabel will also display a back button.

<sbb-dialog>
  <sbb-dialog-title back-button>A describing title of the dialog</sbb-dialog-title>
</sbb-dialog>

Events

If a back button is displayed it emits a requestBackAction event on click.

Properties

Name	Attribute	Privacy	Type	Default	Description
`accessibilityBackLabel`	`accessibility-back-label`	public	`\| string \| undefined`		This will be forwarded as aria-label to the back button element.
`accessibilityCloseLabel`	`accessibility-close-label`	public	`\| string \| undefined`		This will be forwarded as aria-label to the close button element.
`backButton`	`back-button`	public	`boolean`	`false`	Whether a back button is displayed next to the title.
`hideOnScroll`	`hide-on-scroll`	public	`Breakpoint \| boolean`	`false`	Whether to hide the title up to a certain breakpoint.
`level`	`level`	public	`SbbTitleLevel`	`'2'`	Title level
`negative`	`negative`	public	`boolean`	`false`	Negative coloring variant flag.
`visualLevel`	`visual-level`	public	`SbbTitleLevel \| undefined`	`'3'`	Visual level for the title. Optional, if not set, the value of level will be used.
`visuallyHidden`	`visually-hidden`	public	`boolean \| undefined`		Sometimes we need a title in the markup to present a proper hierarchy to the screen readers while we do not want to let that title appear visually. In this case we set visuallyHidden to true.

Events

Name	Type	Description	Inherited From
`requestBackAction`	`CustomEvent<void>`	Emits whenever the back button is clicked.

Slots

Name	Description
	Use the unnamed slot to display the title.