Class SubViewHeader

java.lang.Object

com.vaadin.flow.component.Component

com.vaadin.flow.component.HtmlComponent

com.vaadin.flow.component.HtmlContainer

com.vaadin.flow.component.html.Header

org.vaadin.firitin.layouts.SubViewHeader

All Implemented Interfaces:

com.vaadin.flow.component.AttachNotifier, com.vaadin.flow.component.ClickNotifier<com.vaadin.flow.component.html.Header>, com.vaadin.flow.component.DetachNotifier, com.vaadin.flow.component.HasComponents, com.vaadin.flow.component.HasComponentsOfType<com.vaadin.flow.component.Component>, com.vaadin.flow.component.HasElement, com.vaadin.flow.component.HasEnabled, com.vaadin.flow.component.HasOrderedComponents, com.vaadin.flow.component.HasSize, com.vaadin.flow.component.HasStyle, com.vaadin.flow.component.HasText, Serializable

@StyleSheet("context://assets/org/vaadin/firitin/components/sub-view-header.css")
public class SubViewHeader
extends com.vaadin.flow.component.html.Header

A floating header line for a sub-view: the way back at the left edge, the view's name in the middle, and room for the view's actions at the right edge.

A small mobile-first application often has no navigation shell: the front page is the menu, and every other view sits one level below it. What such a view needs at the top is a way up and its own name, and iOS settled the form years ago — a chevron in a circle of glass, the title beside it, floating over the content as it scrolls.

Only the arrow gets the glass. A first draft put the arrow and the title in one shared pill, and it read as a single button whose label was the name of the view you were already on — a back button to the place you are at. The title is bare text, as in iOS's current form language: the circle says "control", the undecorated word says "name", and the difference in dress is what keeps them apart.

The back control is an arrow alone. The word next to it ("Devices", "Back") is dead weight once the gesture is learned, which on a phone is the first time it is used — but a control with no text still has to say where it goes, so the destination's name travels as the link's aria-label instead of as pixels.

The bar is position: sticky: it scrolls away with the page until it would leave, then stays — its offset counts the safe area, so an installed PWA does not park the arrow under a phone's camera cutout — and the content slides underneath, dissolving into a veil of blur rather than hitting an edge. The bar itself takes no clicks; between the pieces, the page underneath does. On the Aura theme the glass is built from the theme's own surface tokens; on any other theme the fallbacks make a plain translucent circle and nothing breaks.

The title is an <h1>: on a view like this it is the page's main heading, and the document outline should say so.

NavigationView is the view around this bar, for the classes that would rather inherit the whole arrangement than compose it.

See Also:

• Serialized Form

Nested Class Summary

Nested classes/interfaces inherited from interface com.vaadin.flow.component.HasText

com.vaadin.flow.component.HasText.WhiteSpace

Constructor Summary

Constructors

Constructor	Description
SubViewHeader(Class<? extends com.vaadin.flow.component.Component> backTarget, String backLabel)
SubViewHeader(String title, Class<? extends com.vaadin.flow.component.Component> backTarget, String backLabel)

Method Summary

Modifier and Type	Method	Description
void	addAction(com.vaadin.flow.component.Component... components)	Puts the view's own controls at the right edge of the bar, mirroring the way back.
<T, C extends com.vaadin.flow.component.Component & com.vaadin.flow.router.HasUrlParameter<T>> void	setBackTarget(Class<? extends C> backTarget, T parameter)	The way back for a view more than one level down, where "up" is itself a parameterised route — a detail view's sub-view goes back to /thing/42, not to /thing.
void	setTitle(String text)	Separate from construction because a title from a URL parameter arrives later.

Methods inherited from class com.vaadin.flow.component.HtmlComponent

getTitle

Methods inherited from class com.vaadin.flow.component.Component

addListener, bindVisible, findAncestor, fireEvent, from, get, getChildren, getElement, getEventBus, getId, getListeners, getLocale, getParent, getTestId, getTranslation, getTranslation, getTranslation, getTranslation, getTranslation, getTranslation, getUI, hasListener, isAttached, isTemplateMapped, isVisible, onAttach, onDetach, onEnabledStateChanged, removeFromParent, scrollIntoView, scrollIntoView, set, setElement, setId, setTestId, setVisible

Methods inherited from class Object

clone, equals, finalize, getClass, hashCode, notify, notifyAll, toString, wait, wait, wait

Methods inherited from interface com.vaadin.flow.component.AttachNotifier

addAttachListener

Methods inherited from interface com.vaadin.flow.component.ClickNotifier

addClickListener, addClickShortcut, addDoubleClickListener, addSingleClickListener

Methods inherited from interface com.vaadin.flow.component.DetachNotifier

addDetachListener

Methods inherited from interface com.vaadin.flow.component.HasComponents

add

Methods inherited from interface com.vaadin.flow.component.HasComponentsOfType

add, add, addComponentAsFirst, addComponentAtIndex, bindChildren, getChildren, getComponentAt, getComponentCount, indexOf, remove, remove, removeAll, replace

Methods inherited from interface com.vaadin.flow.component.HasElement

getElement

Methods inherited from interface com.vaadin.flow.component.HasEnabled

bindEnabled, isEnabled, setEnabled

Methods inherited from interface com.vaadin.flow.component.HasSize

bindHeight, bindWidth, getHeight, getHeightUnit, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getWidth, getWidthUnit, setHeight, setHeight, setHeightFull, setMaxHeight, setMaxHeight, setMaxWidth, setMaxWidth, setMinHeight, setMinHeight, setMinWidth, setMinWidth, setSizeFull, setSizeUndefined, setWidth, setWidth, setWidthFull

Methods inherited from interface com.vaadin.flow.component.HasStyle

addClassName, addClassNames, bindClassName, bindClassNames, getClassName, getClassNames, getStyle, hasClassName, removeClassName, removeClassNames, setClassName, setClassName

Methods inherited from interface com.vaadin.flow.component.HasText

bindText, getText, getWhiteSpace, setText, setWhiteSpace

Constructor Details

SubViewHeader

public SubViewHeader(Class<? extends com.vaadin.flow.component.Component> backTarget,
 String backLabel)

Parameters:

backTarget - the view one level up

backLabel - where the arrow goes, for whoever cannot see that it is an arrow — read out as the link's accessible name

SubViewHeader

public SubViewHeader(String title,
 Class<? extends com.vaadin.flow.component.Component> backTarget,
 String backLabel)

Method Details

setTitle

public void setTitle(String text)

Separate from construction because a title from a URL parameter arrives later.

Overrides:

setTitle in class com.vaadin.flow.component.HtmlComponent

setBackTarget

public <T, C extends com.vaadin.flow.component.Component & com.vaadin.flow.router.HasUrlParameter<T>>
void setBackTarget(Class<? extends C> backTarget,
 T parameter)

The way back for a view more than one level down, where "up" is itself a parameterised route — a detail view's sub-view goes back to /thing/42, not to /thing. Separate from construction for the same reason as the title: the parameter comes from the URL, which the view only sees later.

addAction

public void addAction(com.vaadin.flow.component.Component... components)

Puts the view's own controls at the right edge of the bar, mirroring the way back. Icon-only buttons arrive dressed by the stylesheet as the arrow's twin; ones with text become pills.