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)
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 loader with rounded shape in small size
OUDSTag(loadingLabel: "Label", shape: .rounded, 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)
}
}
}