Collapsible

Default

collapsible-default

let iconSize: PBIcon.IconSize
let iconColor: CollapsibleIconColor
let text: String
@State private var isCollapsed = true
let lorem =
      "
      Group members... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit vive.
      Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo.
      Praesent lorem arcu. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis.
      "

PBCollapsible(isCollapsed: $isCollapsed, iconSize: iconSize, iconColor: iconColor) {
        CollapsibleDoc(text: "Main Section")
      } content: {
        Text(lorem).pbFont(.body)
      }

Sizes

collapsible-sizes

let iconSize: PBIcon.IconSize
let iconColor: CollapsibleIconColor
let text: String
@State private var isCollapsed = true
let lorem =
      "
      Group members... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit vive.
      Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo.
      Praesent lorem arcu. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis.
      "

PBCollapsible(isCollapsed: $isCollapsed, iconSize: iconSize, iconColor: iconColor) {
      VStack(spacing: Spacing.medium) {
            CollapsibleDoc(iconSize: .xSmall, text: "Extra Small Section")
            CollapsibleDoc(iconSize: .small, text: "Small Section")
            CollapsibleDoc(text: "Default Section")
            CollapsibleDoc(iconSize: .large, text: "Large Section")
          }
      } content: {
       Text(lorem).pbFont(.body)
      }

Colors

collapsible-colors

let iconSize: PBIcon.IconSize
let iconColor: CollapsibleIconColor
let text: String
@State private var isCollapsed = true
let lorem =
      "
      Group members... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit vive.
      Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo.
      Praesent lorem arcu. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis.
      "
PBCollapsible(isCollapsed: $isCollapsed, iconSize: iconSize, iconColor: iconColor) {
       VStack(spacing: Spacing.medium) {
            CollapsibleDoc(iconColor: .default, text: "Default Section")
            CollapsibleDoc(iconColor: .light, text: "Light Section")
            CollapsibleDoc(iconColor: .lighter, text: "Lighter Section")
            CollapsibleDoc(iconColor: .link, text: "Link Section")
            CollapsibleDoc(iconColor: .error, text: "Error Section")
            CollapsibleDoc(iconColor: .success, text: "Success Section")
          }
      } content: {
       Text(lorem).pbFont(.body)
      }

Props

Name Type Description Default Values
isCollapsed Bool Value for whether or not the dropdown is closed or open false true false
headerView View Title of dropdown
contentView View Content of dropdown
iconSize PBIcon.IconSize Sets size of chevron icon .small xSmall small large x1 x2 x3 x4 x5 x6 x7 x8 x9 x10
iconColor CollapsibleIconColor Sets color of chevron icon .default default light lighter link error success