Section 段落容器

段落容器，可用于标识某些需要特别提示的内容片段。

基本用法

内容片段

内容片段

内容片段

内容片段

内容片段

点击查看代码

<template>
  <div class="section-demos">
    <s-section v-for="type in sectionTypes" :key="type" :type="type" title="内容片段">
      <div style="height: 50px;">测试内容</div>
    </s-section>
  </div>
</template>

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

  const sectionTypes = ref<string[]>(["primary", "success", "warning", "info", "error"]);
</script>

<style scoped>
  .section-demos {
    & :deep(.el-pro-section-wrapper) {
      &:not(:last-child) {
        margin-bottom: 10px;
      }
    }
  }
</style>

深色主题

内容片段

内容片段

内容片段

内容片段

内容片段

点击查看代码

<template>
  <div class="section-demos">
    <s-section v-for="type in sectionTypes" :key="type" :type="type" title="内容片段" dark>
      <div style="height: 50px;">测试内容</div>
    </s-section>
  </div>
</template>

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

  const sectionTypes = ref<string[]>(["primary", "success", "warning", "info", "error"]);
</script>

<style scoped>
  .section-demos {
    & :deep(.el-pro-section-wrapper) {
      &:not(:last-child) {
        margin-bottom: 10px;
      }
    }
  }
</style>

副标题

内容片段

副标题

内容片段

副标题

点击查看代码

<template>
  <div class="section-demos">
    <s-section style="margin-bottom: 10px;" type="primary" title="内容片段" subtitle="副标题">
      <div style="height: 50px;">测试内容</div>
    </s-section>

    <s-section title="内容片段" type="primary" subtitle="副标题" dark>
      <div style="height: 50px;">测试内容</div>
    </s-section>
  </div>
</template>

<script setup lang="ts">
</script>

不可折叠

内容片段

测试内容

点击查看代码

<template>
  <s-section type="primary" title="内容片段" :collapsible="false">
    <div style="height: 50px;">测试内容</div>
  </s-section>
</template>

<script setup lang="ts">
</script>

受控折叠

内容片段

测试内容

点击查看代码

<template>
  <s-section v-model:collapsed="sectionCollapsed" type="primary" title="内容片段" >
    <div style="height: 50px;">测试内容</div>
  </s-section>
</template>

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

  const sectionCollapsed = ref<boolean>(false);
</script>

Props

Slots