Matches Arco Collapse: arrows default to the right; left arrows match Arco's default. See the Element Plus docs for props.
Click a header to expand or collapse it; arrows appear on the right by default.
<script setup lang="ts">
import { ref } from 'vue'
const value = ref(['design'])
</script>
<template>
<el-collapse v-model="value" style="width: 100%">
<el-collapse-item title="Design" name="design">Shared tokens keep the interface consistent.</el-collapse-item>
<el-collapse-item title="Engineering" name="engineering">Components make interfaces easier to maintain.</el-collapse-item>
<el-collapse-item title="Unavailable" name="disabled" disabled>Unavailable content.</el-collapse-item>
</el-collapse>
</template>Left arrows match Arco's default; accordion keeps one panel open at a time.
<script setup lang="ts">
import { ref } from 'vue'
const value = ref('overview')
</script>
<template>
<el-collapse v-model="value" expand-icon-position="left" accordion style="width: 100%">
<el-collapse-item title="Overview" name="overview">Project overview.</el-collapse-item>
<el-collapse-item title="Details" name="details">Project details.</el-collapse-item>
</el-collapse>
</template>