FUICardView

@MainActor
open class FUICardView : FUICardBaseDrawingView

The card has five elements: media view FUICardMediaView, main header FUICardMainHeaderView, extended header FUICardExtHeaderView, body FUICardBaseDrawingView and footer FUICardFooterView. The main header FUICardMainHeaderView is the only mandatory element. All others are optional.

Example Initialization and Configuration:

let card = FUICardView()
// set up main header
card.mainHeader.detailImageView.image = UIImage(named: "imageName")
card.mainHeader.title.text = "Title"
card.mainHeader.subtitle.text = "Subtitle"
card.mainHeader.overflowAction.isHidden = false
card.mainHeader.counter.text = "3 of 36"
// set up the icon stack
let dot = FUIAttributedImage(image: FUIIconLibrary.indicator.dot.withRenderingMode(.alwaysTemplate))
let attachment = FUIAttributedImage(image: FUIIconLibrary.indicator.attachment.withRenderingMode(.alwaysTemplate))
card.mainHeader.iconImages = [dot, attachment, "1"]

// set up media view
card.mediaView.detailImageView.image = UIImage(named: "imageName")
card.mediaView.title.text = "Title"
// set a customized height if needed
card.mediaView.detailImageViewHeight = 300

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

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

// set up body
card.body.contents = [
   ...
]

// set up footer
card.footer.primaryAction.isHidden = false
card.footer.primaryAction.setTitle("Primary", for: .normal)
card.footer.secondaryAction.isHidden = false
card.footer.secondaryAction.setTitle("Secondary", for: .normal)

Theming

Supported Text class paths:

fdlFUICardMediaView_title {}
fdlFUICardMainHeaderView_title {}
fdlFUICardMainHeaderView_subtitle {}
fdlFUICardMainHeaderView_counter {}
fdlFUICardMainHeaderView_overflowAction {}
fdlFUICardExtHeaderView_label
fdlFUICardExtHeaderView_labelItem_label
fdlFUICardExtHeaderView_kpiFootnote
fdlFUICardFooterView_primaryAction {}
fdlFUICardFooterView_secondaryAction {}

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:

fdlFUICardMediaView_detailImageView {}
fdlFUICardMainHeaderView_detailImageView {}
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;