Header

Screen Title

Properties

mode: opaque | transparent

Default: opaque

• opaque — The header background is not transparent. It is displayed above the visible area of the screen. This is the default value.

• transparent — The header background is absent. It is displayed over the screen content. It does not allow displaying title, subTitle, and arbitrary content, except for rightButton.

title: string

Header text.

subTitle: string

Subtitle text.

rightButton: <button>

Button displayed on the right edge of the header.

style

Modifying the appearance, position, and geometry of the block.

• width, maxWidth, minWidth
  Width of the block. More details.

• height, maxHeight, minHeight
  Height of the block. More details.

• overflow
  How to display child elements when they take up excess space outside the container. More details.

• padding, paddingHorizontal, paddingVertical, paddingTop, paddingRight, paddingBottom, paddingLeft
  Internal padding of the container. More details.

• margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft
  External margins of the block. More details.

• color
  Text color. More details.

• fontFamily
  Font family name. More details.

• fontSize
  Font size. More details.

• fontStyle
  Ability to set the font to italic. More details.

• fontWeight
  Font weight. More details.

• fontVariant
  Ability to use monospaced digits. More details.

• letterSpacing
  Letter spacing of the font. More details.

• lineClamp
  Limiting the height of the text by the number of lines. More details.

• lineHeight
  The amount of space allocated for one line of text in height. More details.

• textAlign
  Principle of text alignment. More details.

• textDecorationLine
  Adding underline or strikethrough to the text. More details.

• textOverflow
  How to truncate text when it exceeds the boundaries of the container. More details.

• border
  Setting borders for the block on all four sides: thickness, style, and color. More details.

• borderTop, borderRight, borderBottom, borderLeft
  Setting individual borders for the sides of the block: thickness and color. More details.

• borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius
  Rounding the corners of the borders. More details.

• borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth
  Thickness of the borders. More details.

• borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor
  Color of the borders. More details.

• backgroundColor
  Background color of the block. More details.

• backgroundGradient
  Background gradient of the block. More details.

• opacity
  Opacity of the entire block with its content. More details.

• transform
  Transforming the geometry of blocks and containers in 2D and 3D space. More details.

Examples

<header> with a title and subtitle. Colored in gray background.

<header> with a menu. No background and title.

<header> with arbitrary content.

<header> with an arbitrary icon button.