EarthSDK UI

Appearance

下拉过渡 Collapse ​

通过折叠面板收纳内容区域

示例代码 ​

<script setup lang="ts">
import { ESCollapse, ESButton, ESFold } from "earthsdk-ui";
import { ref } from "vue";
const showRef = ref(false);
const showRef1 = ref(false);
</script>

<template>
  <div class="collapse">
    <div class="content">
      <ESButton status="info" @click="showRef = !showRef">{{
        showRef ? "关闭" : "展开"
      }}</ESButton>
      <ESCollapse>
        <div v-show="showRef" style="margin: 20px 0px">
          <div
            style="
              width: 100px;
              height: 100px;
              margin: 10px;
              border: 1px solid red;
            "
          ></div>
        </div>
      </ESCollapse>
    </div>

    <div class="content">
      <ESButton type="primary" @click="showRef1 = !showRef1">过渡fold</ESButton>
      <ESFold :show="showRef1">
        <div
          style="
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 1px solid red;
          "
        ></div>
      </ESFold>
    </div>
  </div>
</template>

<style scoped>
.collapse {
  width: 200px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
}
.content {
    margin: 5px 0;
}
</style>

Attributes ​

属性名说明类型默认值
duration过度时间number0.3