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.
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"
)
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")
)
}
)
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")
)
}
)
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
)
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")
)
}
)
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")
)
}
)