Anatomy
The anatomy of an app bar has no visual elements but rather is an empty container that has a built-in utility to make positioning on a layout easier.
Options
Position
The following position are available sticky relative absolute fixed. The behavior of the different options are described in the MDN web docs.
API Reference
AppBar
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| position | App bar's position in time and space | "fixed" | "absolute" | "relative" | "sticky" | ({ "@sm"?: "fixed" | "absolute" | "relative" | "sticky"; "@md"?: "fixed" | "absolute" | "relative" | "sticky"; "@lg"?: "fixed" | "absolute" | "relative" | "sticky"; ... 21 more ...; "@initial"?: "fixed" | ... 2 more ... | "sticky"; } & { ...; }) | ---- | False |
| shadow | App bar's shadow in time and space | boolean | "true" | ({ "@sm"?: boolean | "true"; "@md"?: boolean | "true"; "@lg"?: boolean | "true"; "@xl"?: boolean | "true"; "@xxl"?: boolean | "true"; "@notSm"?: boolean | "true"; "@notMd"?: boolean | "true"; ... 17 more ...; "@initial"?: boolean | "true"; } & { ...; }) | ---- | False |
| as | WPDS provides an as prop for changing which tag a component outputs. | never | ---- | False |
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | CSS<{ sm: `(max-width: ${string})`; md: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; lg: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xxl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; notS... | ---- | False |