Collapsible

Summary

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

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

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`

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat