FUICardExtHeaderView

@MainActor
public class FUICardExtHeaderView : FUITintableDrawingView<FUIControlState>, FUIKPIComponent, FUIKPIFootnoteMultiLineComponent, FUIKPIAttributesConsumer, FUIKPIAttributesProvider

Card Extended Header
 The optional Extended Header block can contain up to 3 rows (row1, row2, and row3) and a KPI. A row can be optionally filled with the following UI components:

• Labels (for text, status or timestamp)
• star rating
• tags

Example Initialization and Configuration:

// set up extended view
let extHeader = FUICardExtHeaderView()
extHeader.row1.contents = [
    FUILabelItem(text: "Negative", image: UIImage(systemName: "exclamationmark.triangle.fill"), alignment: .leading),
    FUILabelItem(text: "Critical"),
    FUILabelItem(text: "label")
]
extHeader.row1.separatorStyle = .automatic
extHeader.row2.contents = [FUIRatingControl(style: .standard)]
extHeader.row3.contents = [...]

// set up kpi
let dollars = FUIKPIUnitItem(string: "$")
let metric = FUIKPIMetricItem(string: "888.88")
let unit = FUIKPIUnitItem(string: "M")
extHeader.kpiItems = [dollars, metric, unit]
extHeader.kpiFootnote.text = "Label"

Theming

Supported Text class paths:

fdlFUICardExtHeaderView_label
fdlFUICardExtHeaderView_labelItem_label
fdlFUICardExtHeaderView_kpiFootnote

Supported Text attributes: font-color (Color) font-name (FontName) font-style (UIFontTextStyle) font-size (Number) text-align (TextAlign) text-line-clamp (Integer)

Supported ImageView class paths:

fdlFUICardExtHeaderView_labelItem_imageView {}

Supported ImageView attributes: image-name (Image) tint-color (Color)

Supported TagView class paths:

fdlFUICardExtHeaderView_tagViewSubView {}

Supported TagView attributes: font-color (Color) font-name (FontName) font-style (UIFontTextStyle) font-size (Number) fill-color (Color) corner-radius (Float) border-width (Float) border-color (Color) content-insets (Box)

Supported FUIRatingControl class path:

fdlFUICardExtHeaderView_ratingControl

Supported RatingControl properties: on-color { -standard | -accented | -editable-disabled | -editable-disabled }: Color; off-color { -standard | -accented | -editable-disabled | -editable-disabled }: Color; on-image { -standard | -editable }: Image; off-image { -standard | -editable }: Image;