Panel 通用面板

AuPanel 只提供材质表面、边框、深度、尺寸、滚动能力和三个渲染插槽，不定义标题、状态、菜单或业务数据结构。

基础用法

工作区设置

界面、通知与成员偏好

最近操作：尚未选择

<template>
  <AuPanel width="368px" depth="overlay">
    <template #header>
      <div class="panel-demo__header">
        <h3>工作区设置</h3>
        <p>界面、通知与成员偏好</p>
      </div>
    </template>
    <AuMenuList :divided="false" :elevated="false">
      <AuMenuListItem
        title="界面偏好"
        description="调整主题与内容密度"
        :leading-icon="IconAdjustmentsHorizontal"
        leading-variant="tinted"
        accessory="chevron"
        clickable
        @click="lastAction = '界面偏好'"
      />
      <AuMenuListItem
        title="成员管理"
        description="查看成员与访问权限"
        :leading-icon="IconUsers"
        leading-variant="tinted"
        accessory="chevron"
        clickable
        @click="lastAction = '成员管理'"
      />
    </AuMenuList>
    <template #footer>
      <span class="panel-demo__result">最近操作：{{ lastAction || '尚未选择' }}</span>
    </template>
  </AuPanel>
</template>
<script setup>
import { ref } from 'vue';
import { AuMenuList, AuMenuListItem, AuPanel } from 'aurora-plus';
import { IconAdjustmentsHorizontal, IconUsers } from 'aurora-plus/icons';
const lastAction = ref('');
</script>
<style scoped>
.panel-demo__header {
  display: grid;
  gap: 5px;
}
.panel-demo__header h3,
.panel-demo__header p {
  margin: 0;
}
.panel-demo__header h3 {
  margin-top: 10px;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.panel-demo__header p,
.panel-demo__result {
  color: var(--au-color-text-secondary);
  font-size: var(--au-font-size-small);
}
</style>

Attributes

属性	说明	类型	默认值
tag	根元素或动态组件	string / Component	section
padding	内容留白，可选 none / compact / default / comfortable	string	default
depth	深度，可选 none / surface / overlay	string	surface
bordered	是否显示材质边框	boolean	true
scrollable	主体区域是否独立滚动	boolean	false
width	面板宽度，数字自动转为 px	string / number	''
maxHeight	最大高度，数字自动转为 px	string / number	''

Slots

插槽名	说明
header	用户自定义头部内容
default	用户自定义主体内容
footer	用户自定义尾部内容