Skip to content

Section Header Footer

The Section Header Footer composable is designed to display a section header or footer with optional text and buttons. It provides flexibility in layout and styling, making it suitable for various sectional use cases in your Compose UI.

Anatomy

The header text is positioned at the start of the container, and the optional primary button (text button) is placed at the end. You can also swap the positions of the text and the button if required.

Section Header Footer Anatomy

Usage

The Section Header Footer and its variations can be implemented using a single API. All parameters are optional, and button actions can be any type of Composable. While any Composable can theoretically be passed into the Section Header Footer, buttons are strongly recommended by design.

@Composable
fun SectionHeaderFooter(
    modifier: Modifier = Modifier,
    text: String? = null,
    maxLines: Int = 3,
    buttonOne: @Composable (() -> Unit)? = null,
    buttonTwo: @Composable (() -> Unit)? = null,
    buttonOneAtStart: Boolean = false,
    buttonTwoAtStart: Boolean = false,
    styles: SectionHeaderFooterStyles = SectionHeaderFooterDefaults.styles()
)

Create a Simple Header

To create a simple header with text:

SectionHeaderFooter(
    text = "Simple Header"
)

Simple Section Header

Create a Simple Header with One or More Buttons

To create a header with one button:

SectionHeaderFooter(
    text = "Header with One Button",
    buttonOne = {
        FioriTextButton(
            onClick = {},
            buttonContent = FioriButtonContent("Button One")
        )
    }
)

Simple Section Header with Button

To create a header with two buttons:

SectionHeaderFooter(
    text = "Header with Two Buttons",
    buttonOne = {
        FioriTextButton(
            onClick = {},
            buttonContent = FioriButtonContent("Button One")
        )
    },
    buttonTwo = {
        FioriTextButton(
            onClick = {},
            buttonContent = FioriButtonContent("Button Two")
        )
    }
)

Simple Section Header with Two Buttons

Create a Header with Buttons on Opposing Sides (No Text)

To create a header with buttons on opposing sides without text:

SectionHeaderFooter(
    buttonOne = {
        FioriTextButton(
            onClick = {},
            buttonContent = FioriButtonContent("Button One")
        )
    },
    buttonTwo = {
        FioriTextButton(
            onClick = {},
            buttonContent = FioriButtonContent("Button Two")
        )
    },
    buttonOneAtStart = true
)

Section Header with Two Opposing Buttons

Create a Header with Long Text Overflowing Multiple Lines

To create a header with long text that overflows to multiple lines:

SectionHeaderFooter(
    text = "This is a very long header text that should overflow to multiple lines and then truncate with ellipsis.",
    buttonOne = {
        FioriTextButton(
            onClick = {},
            buttonContent = FioriButtonContent("Button One")
        )
    }
)

Section Header with Long Text and One Button

Create a Header with Long Text and Long Buttons Overflowing Multiple Lines

To create a header with long text and two buttons with long text, overflowing multiple lines:

  SectionHeaderFooter(
      text = "This is a very long header text that should overflow to multiple lines and then truncate with ellipsis. This is a very long header text that should overflow to multiple lines and then truncate with ellipsis.",
      buttonOne = {
          FioriTextButton(
              onClick = {},
              buttonContent = FioriButtonContent("Long Button Text")
          )
      },
      buttonTwo = {
          FioriTextButton(
              onClick = {},
              buttonContent = FioriButtonContent("Long Button Text")
          )
      }
  )

Long Section Header with Two Long Buttons


Last update: December 13, 2024