XPanel 面板

示例

基本用法

面板标题

Body

<template>
  <div>
    <XPanel header="面板标题" size="large" shadow="hover"> Body</XPanel>
  </div>
</template>

<script lang="ts" setup>
  import { XPanel } from '@vtj/ui';
</script>

<style lang="scss" scoped>
  .x-panel {
    margin: 10px 0;
  }
</style>

定义尺寸

面板主要标题副标题内容

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

面板标题

Body

面板标题

Body

<template>
  <div>
    <XPanel
      card
      :header="header"
      shadow="always"
      width="600px"
      height="200px"
      :body="{ padding: false }"
      :footer="{ padding: false }">
      <div v-for="n in 20">{{ n }}</div>
      <template #actions>
        <XAction :icon="VtjIconPlus" mode="icon" background="hover"></XAction>
        <XAction
          :icon="VtjIconSetting"
          mode="icon"
          background="hover"></XAction>
      </template>
    </XPanel>

    <XPanel card header="面板标题" size="large" shadow="hover">
      Body

      <template #actions>
        <XAction :icon="VtjIconPlus" mode="icon"></XAction>
        <XAction :icon="VtjIconSetting" mode="icon"></XAction>
      </template>
    </XPanel>

    <XPanel card header="面板标题" size="small">
      Body

      <template #actions>
        <XAction :icon="VtjIconPlus" mode="icon" size="small"></XAction>
        <XAction :icon="VtjIconSetting" mode="icon" size="small"></XAction>
      </template>
    </XPanel>
  </div>
</template>

<script lang="ts" setup>
  import { XPanel, XAction } from '@vtj/ui';

  import { VtjIconPlus, VtjIconSetting } from '@vtj/icons';

  const header = {
    content: '面板主要标题',
    subtitle: '副标题内容',
    more: true,
    icon: {
      icon: VtjIconSetting,
      color: 'var(--el-color-primary)'
    },
    onClick() {
      console.log('header clicked!');
    }
  };
</script>

<style lang="scss" scoped>
  .x-panel {
    margin: 10px 0;
  }
</style>

定义 header

面板主要标题副标题内容

添加

设置

Body

面板标题

选项卡一

选项卡二

<template>
  <div>
    <XPanel :header="header" shadow="always">
      Body
      <template #actions>
        <XAction :icon="VtjIconPlus" mode="text" label="添加"></XAction>
        <XAction :icon="VtjIconSetting" mode="text" label="设置"></XAction>
      </template>
    </XPanel>

    <XPanel header="面板标题" size="small">
      <ElTabs>
        <ElTabPane label="选项卡一"></ElTabPane>
        <ElTabPane label="选项卡二"></ElTabPane>
      </ElTabs>
    </XPanel>
  </div>
</template>

<script lang="ts" setup>
  import { XPanel, XAction } from '@vtj/ui';

  import { VtjIconPlus, VtjIconSetting } from '@vtj/icons';

  import { ElTabs, ElTabPane } from 'element-plus';

  const header = {
    content: '面板主要标题',
    subtitle: '副标题内容',
    more: true,
    icon: {
      icon: VtjIconSetting,
      color: 'var(--el-color-primary)'
    },
    onClick() {
      console.log('header clicked!');
    }
  };
</script>

<style lang="scss" scoped>
  .x-panel {
    margin: 10px 0;
  }
</style>

API

属性

属性名	说明	类型	默认值
fit	宽高自适应	boolean	false
height	指定高度，fit 为true 失效	string | number	-
width	指定宽度，fit 为true 失效	string | number	-
border	显示边框	boolean	true
radius	圆角	boolean	true
card	卡片模式	boolean	-
size	尺寸	string	-
shadow	阴影设置	string < 'none' | 'always' | 'hover'>	-
header	头部设置	string | object	-
body	body设置	object	-
footer	尾部设置	object	-

暴露

名称	说明	类型
bodyRef	body实例	-