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 style="margin-bottom: 10px;" type="primary" title="内容片段" subtitle="副标题">
      <div style="height: 50px;">测试内容</div>
    </s-section>

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

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

样式主题

对齐方式:

lightdarkplain

内容片段

副标题

测试内容

内容片段

副标题

测试内容

点击查看代码

<template>
  <s-form showColon>
    <s-form-item label="对齐方式">
      <el-radio-group v-model="sectionTheme">
        <el-radio v-for="item in sectionThemeOptions" :key="item.value" :value="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </s-form-item>
  </s-form>

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

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

  const sectionTheme = ref<string>("light");

  const sectionThemeOptions = reactive<Record<string, any>>([
    { value: "light", label: "light" },
    { value: "dark", label: "dark" },
    { value: "plain", label: "plain" },
  ]);
</script>

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

不可折叠

内容片段

测试内容

点击查看代码

<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