XHeader 标题头

示例

基础用法

主标题文本我是副标题

添加

管理

主标题文本我是副标题

添加

管理

主标题文本我是副标题

<template>
  <div>
    <XHeader
      size="large"
      :icon="VtjIconBug"
      content="主标题文本"
      subtitle="我是副标题"
      more
      @click="onClick">
      <template #actions>
        <XAction
          :icon="VtjIconPlus"
          label="添加"
          mode="text"
          size="small"></XAction>
        <XAction
          :icon="VtjIconSetting"
          label="管理"
          mode="text"
          size="small"></XAction>
      </template>
    </XHeader>

    <XHeader :icon="VtjIconBug" content="主标题文本" subtitle="我是副标题" more>
      <template #actions>
        <XAction
          :icon="VtjIconPlus"
          label="添加"
          mode="text"
          size="small"></XAction>
        <XAction
          :icon="VtjIconSetting"
          label="管理"
          mode="text"
          size="small"></XAction>
      </template>
    </XHeader>

    <XHeader
      size="small"
      :icon="VtjIconBug"
      content="主标题文本"
      subtitle="我是副标题"
      border
      more
      @clickIcon="onClickIcon"
      @click="onClick">
      <template #actions>
        <XAction
          :icon="VtjIconPlus"
          mode="icon"
          size="small"
          background="hover"></XAction>
        <XAction
          :icon="VtjIconSetting"
          mode="icon"
          size="small"
          background="hover"></XAction>
      </template>
    </XHeader>
  </div>
</template>

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

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

  const onClick = () => {
    console.log('clicked!');
  };

  const onClickIcon = () => {
    console.log('onClickIcon!');
  };
</script>

<style scoped></style>

API

属性

属性名	说明	类型	默认值
size	尺寸	string	default
content	内容	string	''
subtitle	二级标题	string	-
icon	图标	string | object	-
border	边框	boolean	-
more	-	boolean	-

事件

名称	说明	参数
click	点击事件	-
clickIcon	点击图标事件	-