Collapse 折叠面板 ​

<template>
  <div class="demo-collapse">
    <w-radio-group v-model="size" aria-label="size control">
      <w-radio-button value="large">large</w-radio-button>
      <w-radio-button value="default">default</w-radio-button>
      <w-radio-button value="small">small</w-radio-button>
    </w-radio-group>
    <w-checkbox-group v-model="style" style="margin: 16px 0">
      <w-checkbox :value="1">简洁风格</w-checkbox>
      <w-checkbox :value="2">描边</w-checkbox>
      <w-checkbox :value="3">圆角</w-checkbox>
    </w-checkbox-group>
    <w-collapse
      v-model="activeNames"
      :size="size"
      :plain="style.includes(1)"
      :border="style.includes(2)"
      :round="style.includes(3)"
      @change="handleChange"
    >
      <w-collapse-item title="主次分明" name="1">
        <div>合理区分信息，快速抓住用户眼球</div>
        <div>合理排布信息的优先级，突出主要信息，弱化次要信息</div>
      </w-collapse-item>
      <w-collapse-item disabled title="突出重点" name="2">
        <div>合理区分信息，快速抓住用户眼球</div>
        <div>合理排布信息的优先级，突出主要信息，弱化次要信息</div>
      </w-collapse-item>
      <w-collapse-item title="化繁为简" name="3">
        <div>合理区分信息，快速抓住用户眼球</div>
        <div>
          依据相似属性，划分同类信息，将繁杂的信息精简到几个分类，减少数量
        </div>
      </w-collapse-item>
      <w-collapse-item title="步步为营" name="4">
        <div>合理区分信息，快速抓住用户眼球</div>
        <div>对于有明确节点的任务，拆解步骤，一步一步进行，有条不紊</div>
      </w-collapse-item>
    </w-collapse>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { CollapseModelValue } from 'win-design-next'

const activeNames = ref(['1'])
const style = ref([2, 3])
const size = ref<'default' | 'large' | 'small'>('default')
const handleChange = (val: CollapseModelValue) => {
  console.log(val)
}
</script>

<template>
  <div class="demo-collapse">
    <w-collapse v-model="activeName" accordion>
      <w-collapse-item title="Consistency" name="1">
        <div>
          Consistent with real life: in line with the process and logic of real
          life, and comply with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such
          as: design style, icons and texts, position of elements, etc.
        </div>
      </w-collapse-item>
      <w-collapse-item title="Feedback" name="2">
        <div>
          Operation feedback: enable the users to clearly perceive their
          operations by style updates and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging
          elements of the page.
        </div>
      </w-collapse-item>
      <w-collapse-item title="Efficiency" name="3">
        <div>
          Simplify the process: keep operating process simple and intuitive;
        </div>
        <div>
          Definite and clear: enunciate your intentions clearly so that the
          users can quickly understand and make decisions;
        </div>
        <div>
          Easy to identify: the interface should be straightforward, which helps
          the users to identify and frees them from memorizing and recalling.
        </div>
      </w-collapse-item>
      <w-collapse-item title="Controllability" name="4">
        <div>
          Decision making: giving advices about operations is acceptable, but do
          not make decisions for the users;
        </div>
        <div>
          Controlled consequences: users should be granted the freedom to
          operate, including canceling, aborting or terminating current
          operation.
        </div>
      </w-collapse-item>
    </w-collapse>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeName = ref('1')
</script>

<template>
  <div class="demo-collapse">
    <w-collapse accordion>
      <w-collapse-item name="1">
        <template #title>
          Consistency<w-icon class="header-icon">
            <circle-info-filled />
          </w-icon>
        </template>
        <div>
          Consistent with real life: in line with the process and logic of real
          life, and comply with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such
          as: design style, icons and texts, position of elements, etc.
        </div>
      </w-collapse-item>
      <w-collapse-item title="Feedback" name="2">
        <div>
          Operation feedback: enable the users to clearly perceive their
          operations by style updates and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging
          elements of the page.
        </div>
      </w-collapse-item>
      <w-collapse-item title="Efficiency" name="3">
        <div>
          Simplify the process: keep operating process simple and intuitive;
        </div>
        <div>
          Definite and clear: enunciate your intentions clearly so that the
          users can quickly understand and make decisions;
        </div>
        <div>
          Easy to identify: the interface should be straightforward, which helps
          the users to identify and frees them from memorizing and recalling.
        </div>
      </w-collapse-item>
      <w-collapse-item title="Controllability" name="4">
        <div>
          Decision making: giving advices about operations is acceptable, but do
          not make decisions for the users;
        </div>
        <div>
          Controlled consequences: users should be granted the freedom to
          operate, including canceling, aborting or terminating current
          operation.
        </div>
      </w-collapse-item>
    </w-collapse>
  </div>
</template>

<script setup lang="ts">
import { CircleInfoFilled } from '@win-design-next/icons-vue'
</script>

<template>
  <div class="demo-collapse">
    <w-collapse v-model="activeNames" @change="handleChange">
      <w-collapse-item title="Consistency" name="1" :icon="CaretRight">
        <div>
          Consistent with real life: in line with the process and logic of real
          life, and comply with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such
          as: design style, icons and texts, position of elements, etc.
        </div>
      </w-collapse-item>
      <w-collapse-item title="Feedback" name="2">
        <template #icon="{ isActive }">
          <span class="icon-ele">
            {{ isActive ? 'Expanded' : 'Collapsed' }}
          </span>
        </template>
        <div>
          Operation feedback: enable the users to clearly perceive their
          operations by style updates and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging
          elements of the page.
        </div>
      </w-collapse-item>
      <w-collapse-item title="Efficiency" name="3">
        <div>
          Simplify the process: keep operating process simple and intuitive;
        </div>
        <div>
          Definite and clear: enunciate your intentions clearly so that the
          users can quickly understand and make decisions;
        </div>
        <div>
          Easy to identify: the interface should be straightforward, which helps
          the users to identify and frees them from memorizing and recalling.
        </div>
      </w-collapse-item>
      <w-collapse-item title="Controllability" name="4">
        <div>
          Decision making: giving advices about operations is acceptable, but do
          not make decisions for the users;
        </div>
        <div>
          Controlled consequences: users should be granted the freedom to
          operate, including canceling, aborting or terminating current
          operation.
        </div>
      </w-collapse-item>
    </w-collapse>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { CaretRight } from '@win-design-next/icons-vue'
import type { CollapseModelValue } from 'win-design-next'

const activeNames = ref(['1'])
const handleChange = (val: CollapseModelValue) => {
  console.log(val)
}
</script>

<style scoped>
.icon-ele {
  margin: 0 8px 0 auto;
  color: #2d5afa;
}
</style>