API Documentation
Documentation for developing SailfishOS applicationsSectionHeader QML Type
Heading text for the start of a section on a page More...
| Import Statement: | import Sailfish.Silica 1.0 |
| Inherits: |
Detailed Description
The SectionHeader type provides a Sailfish-styled heading for sections within a page.
It is simply a styled Label with a specific color, size and alignment. Set the label text value to set the header text.
Section headers are typically used in Sailfish OS to:
- Group user content on a page (for example, a Mail app might show emails from "Today", "Yesterday", "Last week", etc.)
- Clearly divide different sections on a page (for example, a contacts app might show "Favorite contacts" followed by "Recent contacts")
- Divide pages with long lists into separate categories (for example, a page of system settings might have 30+ settings that should be grouped into 4-5 categories so that it is more easily browseable)
For example, a page of system settings might be divided by section headers like this:
import QtQuick 2.2
import Sailfish.Silica 1.0
ApplicationWindow {
initialPage: Component {
Page {
Column {
width: parent.width
PageHeader { title: "Settings" }
SectionHeader { text: "Connectivity" }
TextSwitch { text: "WLAN" }
TextSwitch { text: "Mobile data" }
TextSwitch { text: "Bluetooth" }
TextSwitch { text: "USB" }
SectionHeader { text: "Sounds" }
Slider { label: "Volume"; width: parent.width }
TextSwitch { text: "Vibration" }
ValueButton { label: "Ringtone"; value: "Default" }
SectionHeader { text: "Security" }
ValueButton { label: "Device lock"; value: "Active" }
ValueButton { label: "PIN code"; value: "Active" }
}
}
}
}