Collapse | Press UI

# Collapse

Place a group of content in multiple accordion panels, and click the title of a panel to expand or contract its content.

# Code Demo

# Basic usage

Control the expanded panel list through value, and activeNames is an array format.

<press-collapse :value="activeNames" @change="onChange">
   <press-collapse-item title="Title 1" name="1">
     Code is written to be read by humans, with the added bonus of being able to run on a machine
   </press-collapse-item>
   <press-collapse-item title="Title 2" name="2">
     Code is written to be read by humans, with the added bonus of being able to run on a machine
   </press-collapse-item>
   <press-collapse-item title="Title 3" name="3" disabled>
     Code is written to be read by humans, with the added bonus of being able to run on a machine
   </press-collapse-item>
</press-collapse>

export default {
   data() {
     return {
       activeNames: ['1'],
     }
   },
   methods: {
     onChange(event) {
       this.setData({
         activeNames: event.detail,
       });
     },
   }
};

# accordion

Through accordion, it can be set to accordion mode, and at most one panel can be expanded. At this time, activeName is in string format.

<press-collapse accordion :value="activeName" @change="onChange">
   <press-collapse-item title="Title 1" name="1">
     Code is written to be read by humans, with the added bonus of being able to run on a machine
   </press-collapse-item>
   <press-collapse-item title="Title 2" name="2">
     Code is written to be read by humans, with the added bonus of being able to run on a machine
   </press-collapse-item>
   <press-collapse-item title="Title 3" name="3">
     Code is written to be read by humans, with the added bonus of being able to run on a machine
   </press-collapse-item>
</press-collapse>

export default {
   data() {
     return {
       activeName: '1',
     }
   },
   methods: {
     onChange(event) {
       this.setData({
         activeName: event.detail,
       });
     },
   }
};

# Event Listener

press-collapse provides change, open and close events. The change event is fired when the panel is switched, the open event is fired when the panel is expanded, and the close event is fired when the panel is closed.

<press-collapse
   :value="activeNames"
   @change="onChange"
   @open="onOpen"
   @close="onClose"
>
   <press-collapse-item title="Title 1" name="1">
     Code is written to be read by humans, with the added bonus of being able to run on a machine
   </press-collapse-item>
   <press-collapse-item title="Title 2" name="2">
     Code is written to be read by humans, with the added bonus of being able to run on a machine
   </press-collapse-item>
   <press-collapse-item title="Title 3" name="3">
     Code is written to be read by humans, with the added bonus of being able to run on a machine
   </press-collapse-item>
</press-collapse>

export default {
   data() {
     return {
       activeNames: ['1'],
     }
   },
   methods: {
     onChange(event) {
       this.setData({
         activeNames: event.detail,
       });
     },
     onOpen(event) {
       Toast(`Expand: ${event.detail}`);
     },
     onClose(event) {
       Toast(`Close: ${event.detail}`);
     },
   }
};

# Customize header content

<press-collapse :value="activeNames" @change="onChange">
   <press-collapse-item name="1">
     <div slot="title">Title 1<press-icon name="question-o" /></div>
     Code is written to be read by humans, with the added bonus of being able to run on a machine
   </press-collapse-item>
   <press-collapse-item title="Title 2" name="2" icon="shop-o">
     Code is written to be read by humans, with the added bonus of being able to run on a machine
   </press-collapse-item>
</press-collapse>

export default {
   data() {
     return {
       activeNames: ['1'],
     }
   },
   methods: {
     onChange(event) {
       this.setData({
         activeNames: event.detail,
       });
     },
   }
};

# API

# Collapse Props

Parameter	Description	Type	Default
value	name of the currently expanded panel	non-accordion mode: (string \| number)[] accordion mode: string \| number	-
accordion	Whether to enable accordion mode	boolean	`false`
border	Whether to show the outer border	boolean	`true`

# Collapse Event

| Event Name | Description | Parameters | | ---------- | ----------- | ---------- || | change | Triggered when switching panels | activeNames: string | Array | | open | Triggered when the panel is expanded | currentName: string | number | | close | Triggered when the panel is closed | currentName: string | number |

# CollapseItem Props

| Parameter | Description | Type | Default | | --------- | ----------- | ---- | ------- || | name | unique identifier, default is index value | string | number | index | | title | content on the left side of the title bar | string | number | - | | size | The size of the title bar, the optional value is large | string | - | | icon | The icon name or image link on the left side of the title bar, see Icon Component for optional values | string | - | | value | content on the right side of the title bar | string | number | - | | label | title bar description | string | - | | border | Whether to show the inner border | boolean | true | | is-link | Whether to display the arrow on the right side of the title bar and enable click feedback | boolean | true | | clickable | Whether to enable click feedback | boolean | false | | disabled | Whether to disable the panel | boolean | false |

###CollapseItem Slot

Name	Description
-	Panel Contents
value	custom display content
icon	custom `icon`
title	custom `title`
right-icon	Customize the right button, the default is `arrow`

# Collapse external style class

class name	description
custom-class	root node style class

# CollapseItem external style class

class name	description
custom-class	root node style class
content-class	content style class

# Theme customization

--collapse-item-transition-duration：

--collapse-item-content-padding：

--collapse-item-content-font-size：

--collapse-item-content-line-height：

--collapse-item-content-text-color：

--collapse-item-content-background-color：

--collapse-item-title-disabled-color：

横屏

← Circle CountDown →