StylishHeader

fun StylishHeader(title: @Composable () -> Unit, navigation: @Composable () -> Unit? = null, actions: @Composable () -> Unit? = null, modifier: Modifier = Modifier, shape: Shape = RoundedCornerShape(StylishTheme.dimensions.floatingCornerRadius), containerColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh, contentColor: Color = MaterialTheme.colorScheme.onSurface, border: BorderStroke? = BorderStroke( StylishTheme.dimensions.outlineWidth, MaterialTheme.colorScheme.outlineVariant, ), tonalElevation: Dp = 4.dp, shadowElevation: Dp = StylishTheme.dimensions.floatingElevation, height: Dp = 56.dp, topPadding: Dp = StylishTheme.dimensions.itemSpacing, bottomPadding: Dp = StylishTheme.dimensions.contentSpacing, actionsSpacing: Dp = StylishTheme.dimensions.inlineSpacing, windowInsets: WindowInsets = WindowInsets.statusBars, visibilityState: VisibilityState = VisibilityState.AlwaysVisible)

A floating page header that hosts navigation, title, and action slots.

Renders a rounded, elevated Surface bar pinned to the top of the page with automatic status-bar inset padding. The title slot is centered and tagged with heading semantics; navigation aligns to the start edge and actions to the end edge. Typically placed inside the header slot of StylishPageContent or the topBar slot of StylishScaffold.

Parameters

title

Composable rendered at the horizontal center of the bar, usually a Text with the page title. Wrapped in a semantics heading node for accessibility.

navigation

Optional composable rendered at the start (leading) edge, typically a StylishIconButton for back or drawer navigation. When null, no leading content is shown.

actions

Optional composable rendered at the end (trailing) edge, typically one or more StylishIconButtons for search, settings, etc. When null, no trailing content is shown.

modifier

Modifier applied to the outer Column.

shape

Corner shape of the header surface. Defaults to RoundedCornerShape with StylishTheme.dimensions.floatingCornerRadius radius, matching the floating aesthetic.

containerColor

Background color of the header surface. Defaults to MaterialTheme.colorScheme.surfaceContainerHigh.

contentColor

Default content color propagated to child composables. Defaults to MaterialTheme.colorScheme.onSurface.

border

Optional BorderStroke drawn around the surface. Defaults to a stroke of StylishTheme.dimensions.outlineWidth (typically 0.4.dp) in MaterialTheme.colorScheme.outlineVariant. Pass null to remove.

tonalElevation

Tonal elevation of the surface. Defaults to 4.dp.

shadowElevation

Drop-shadow elevation of the surface. Defaults to StylishTheme.dimensions.floatingElevation (typically 2.dp).

height

Fixed height of the inner content area. Defaults to 56.dp (standard app-bar height).

topPadding

Space above the surface, after status-bar insets. Defaults to StylishTheme.dimensions.itemSpacing.

bottomPadding

Space below the surface, separating it from page content. Defaults to StylishTheme.dimensions.contentSpacing.

actionsSpacing

Horizontal gap between items inside the actions slot. Defaults to StylishTheme.dimensions.inlineSpacing.

windowInsets

WindowInsets consumed above the surface via Modifier.windowInsetsPadding, typically the status-bar insets. Defaults to WindowInsets.statusBars so the bar clears the system status area.

See also