Toolbar 工具条

代码演示

基础用法

<script setup></script>

<template>
  <x-toolbar>
    <a-button type="primary">
      新建数据
    </a-button>

    <template #extra>
      <a-space>
        <a-input />
        <a-button
          ghost
          type="primary"
        >
          查询
        </a-button>
      </a-space>
    </template>
  </x-toolbar>
</template>

<style lang="less" scoped></style>

带边框

<script setup></script>

<template>
  <x-toolbar bordered>
    <a-button type="primary">
      新建数据
    </a-button>

    <template #extra>
      <a-space>
        <a-input />
        <a-button
          ghost
          type="primary"
        >
          查询
        </a-button>
      </a-space>
    </template>
  </x-toolbar>
</template>

<style lang="less" scoped></style>

API

Props

名称	说明	类型	默认值
bordered	是否显示边框，显示边框时将会使用 Card 组件包裹	boolean	true

Slots

名称	说明
default	内容
extra	扩展内容，显示在右侧