Article
Indicators
Some components can be used for indicators.
Overview
Badge
The badge is a small UI element used to highlight status, notifications, or categorization within an interface.
Badge Count
An OUDSBadgeCount displays an integer value.
// Neutral badge in medium size with an image
OUDSBadgeIcon(status: .neutral(image: OUDSImage(asset: Image(decorative: "ic_heart"), accessibilityLabel: "Like"), size: .medium))
Badge Icon
An OUDSBadgeIcon displays only an icon and has specific colors.
// Neutral badge in medium size with an image
OUDSBadgeIcon(status: .neutral(image: OUDSImage(asset: Image(decorative: "ic_heart"), accessibilityLabel: "Like"), size: .medium))
Badge Standard
An OUDSBadgeStandard is an empty badge like a coloured pastille.
// Info badge in medium size without information
OUDSBadgeStandard(status: .info, size: .medium)
Progress Indicators
Circular Progress Indicator
An OUDSCircularProgressIndicator is a progress indicator which can be used to display determinate value or indeterminate value with animations.
// A circular gauge filled at 75% in neutral color with a track displayed with an animation
OUDSCircularProgressIndicator(progress: 0.75, status: .neutral)
// A circular gauge without defined value and an accent color
OUDSCircularProgressIndicator(status: .accent)
Linear Progress Indicator
An OUDSLinearProgressIndicator is a horizontal progress indicator which can be used to display determinate value or indeterminate value animations.
// A horizontal bar filled at 75% in neutral color with a track and reveal animation
OUDSLinearProgressIndicator(progress: 0.75, status: .neutral)
// A horizontal bar without defined value and an accent color
OUDSLinearProgressIndicator(status: .accent)
// A horizontal bar with a helper text center aligned, a stop indicator (determinate only) and no animations
OUDSLinearProgressIndicator(progress: 0.5, stopIndicator: true, helperText: .description("Uploading…"), animated: false)
// A horizontal bar with a helper text with progress information start aligned
// The percentage rendering (symbol, spacing, position) follows the localized wording key
// `core_progressIndicator_percent_value` (e.g. "75%" in English, "75 %" in French, "٪75" in Arabic).
OUDSLinearProgressIndicator(progress: 0.5, helperText: .percent(description: "Uploading…", alignment: .start))
// An indeterminate horizontal bar with a helper text start aligned
OUDSLinearProgressIndicator(status: .info, helperText: "Processing…", helperTextAlignment: .start)
Skeletons
A skeleton is a UI element that indicates when content is loading. The OUDSSkeleton enhances user experience by temporarily replacing content with gray areas or animations that simulate the visual structure of the forthcoming content.
Activate skeleton for OUDS components
Lot of components in OUDS library propose their own skeleton representation according to skeleton state set in the SwiftUI environment. Apply showSkeleton(isVisible:isAnimated:) to update the state on the view and its children to inform all components in the hierarchy to be displayed in skeleton.
@State var isLoading = false
var body: some View {
VStack {
OUDSHeading("My header")
OUDSAlertMessage(label: "Some text here", description: "You should read this text")
OUDSButton(text: "Do some action") { isLoading = true }
}
.showSkeleton(isVisible: isLoading)
}
Draw skeletons
It is possible to define a skeleton using OUDSSkeleton and a frame.
VStack {
// Heading skeleton
OUDSSkeleton(securityMargin: true).frame(width: 180, height: 48)
// Body skeleton
OUDSSkeleton(securityMargin: true).frame(width: 300, height: 150)
// Footer skeleton
OUDSSkeleton(securityMargin: true).frame(width: 180, height: 54)
}
Prepare Views for skeleton layout
The skeleton helper applies skeleton on top of a View; the skeleton layout will be rendered with showSkeleton(isVisible:).
var body: some View {
VStack(spacing: 20) {
Text("The title")
.skeleton()
Button {
} label: {
VStack {
Text("Title")
Label("Subtitle", systemImage: "phone")
}
}
.skeleton()
}
}
Tag
An OUDSTag is a small element that shows short information like a label, keyword, or category. It helps users quickly find, group, or understand content.
// Text only with neutral status, for emphasized appearance with rounded shape in default size
OUDSTag(label: "Label", status: .neutral(), appearance: .emphasized, shape: .rounded, size: .default)
// Or also
OUDSTag(label: "Label")
// Tag with negative status with bullet
OUDSTag(label: "Label", status: .negative(leading: .bullet)
// Tag with neutral status with a custom decorative icon
OUDSTag(label: "Label", status: .neutral(image: OUDSImage(asset: Image(decorative: "ic_heart"))))
// Flip the icon for RTL layouts using OUDSImage.flipped
OUDSTag(label: "Label", status: .neutral(image: OUDSImage(asset: Image(decorative: "ic_heart"), flipped: true)))
// Tag with neutral status with a raw image (not tinted)
OUDSTag(label: "Label", status: .neutral(image: OUDSImage(asset: Image("ic_brand"), renderingMode: .original)))
// Tag with accent status with a raw image (not tinted)
OUDSTag(label: "Label", status: .accent(image: OUDSImage(asset: Image("ic_brand"), renderingMode: .original)))
// Text with neutral status with bullet
OUDSTag(label: "Label", status: .neutral(bullet: true))
// Tag with indeterminate circular progress indicator, with rounded shape in small size
OUDSTag(loadingLabel: "Processing...", shape: .rounded, size: .small)
// Tag with determinate circular progress indicator, with rounded shape in default size
OUDSTag(loadingLabel: "Processing...", progress: 0.75)
Categorical Tag
An OUDSCategoricalTag is like an OUDSTag but without appearance notion and with categories instead of statuses.
// Text only with category 1, rounded shape, default size
OUDSCategoricalTag(label: "Label", category: .category1)
// Text with category 2 and bullet
OUDSCategoricalTag(label: "Label", category: .category2, leading: .bullet)
// Text with category 3 and custom icon
OUDSCategoricalTag(label: "Label", category: .category3, leading: .icon(OUDSImage(asset: Image(decorative: "ic_heart"))))
// Small size, square shape
OUDSCategoricalTag(label: "Label", category: .category4, shape: .square, size: .small)
Input Tag
An OUDSInputTag is a small element that shows short information like a label, keyword, or category, which can be removed or changed on tap.
// Create an input tag
OUDSInputTag("Label") {
// Do something, usually remove itself from a list
}
// Show in a list and remove when clicked
var names: [String] = [ "Foo", "Bar", "Wizz" ]
ForEach(names, id: \.self) { name in
OUDSInputTag(label: name) {
if let index = names.firstIndex(of: name) {
names.remove(at: index)
}
}
}