Appearance

On this page

Button 按钮 ​

基础按钮 ​

展开查看
vue
<template>
    <div>
        <!-- 需要嵌套一层，内部放任何元素都可以 -->
        <button class="biz-btn"><span>按钮</span></button>
    </div>
</template>
<script setup></script>

<style>
.biz-btn {
    padding: 5px 20px;
    font-size: 18px;
}
</style>

弹窗按钮 ​

按钮类型 ​

展开查看
vue
<template>
    <div>
      <label>默认按钮</label>
      <button class="biz-dialog-btn"><span>主要按钮</span></button>
      <button class="biz-dialog-btn" type="secondary"><span>次要按钮</span></button>
      <button class="biz-dialog-btn" type="frameless"><span>无框按钮</span></button>
      <label>选中按钮</label>
      <button class="biz-dialog-btn active"><span>主要按钮</span></button>
      <button class="biz-dialog-btn active" type="secondary"><span>次要按钮</span></button>
      <button class="biz-dialog-btn active" type="frameless"><span>无框按钮</span></button>
      <label>禁用按钮</label>
      <button class="biz-dialog-btn disabled"><span>主要按钮</span></button>
      <button class="biz-dialog-btn disabled" type="secondary"><span>次要按钮</span></button>
      <button class="biz-dialog-btn disabled" type="frameless"><span>无框按钮</span></button>
    </div>
</template>
<script setup></script>

<style>
.biz-dialog-btn {
    margin: var(--gap-sm);
}
</style>

不同尺寸按钮 ​

展开查看
vue
<template>
    <div>
      <label>按钮尺寸</label>
      <button class="biz-dialog-btn" size="spacious"><span>宽松按钮</span></button>
      <button class="biz-dialog-btn"><span>默认按钮</span></button>
      <button class="biz-dialog-btn" size="small"><span>紧凑按钮</span></button>
    </div>
</template>
<script setup></script>

<style>
.biz-dialog-btn {
    margin: var(--gap-sm);
}
</style>

高亮按钮 ​

 

展开查看
vue
<template>
    <div>
        <label>高亮按钮</label>
        <button class="biz-dialog-btn" light><span>按钮</span></button>

        <label>高亮禁用按钮</label>
        <button class="biz-dialog-btn" disabled light><span>按钮</span></button>
        <button class="biz-dialog-btn disabled" light><span>按钮</span></button>
    </div>
</template>
<script setup></script>

<style>
.biz-dialog-btn {
    margin: var(--gap-sm);
}
</style>

功能按钮 ​

展开查看
vue
<template>
    <div class="example">
        <label>基础按钮</label>
        <button class="biz-business-btn">
            <span>功能<br />按钮</span>
        </button>

        <label>选中按钮</label>
        <button class="biz-business-btn active">
            <span>功能<br />按钮</span>
        </button>
    </div>
</template>
<script setup></script>

<style>
.biz-business-btn {
    width: 66px;
    height: 64px;
}
</style>

按钮组 ​

48小时
24小时
12小时
1小时
当前
vue
<template>
    <div class="example">
        <div class="biz-btn-group">
            <div class="biz-btn-item active"><span>48小时</span></div>
            <div class="biz-btn-item"><span>24小时</span></div>
            <div class="biz-btn-item"><span>12小时</span></div>
            <div class="biz-btn-item"><span>1小时</span></div>
            <div class="biz-btn-item"><span>当前</span></div>
        </div>
    </div>
</template>

<style>
.biz-btn-group {
    width: 400px;
    height: 64px;
}
</style>

导航按钮 ​

展开查看
vue
<template>
    <div class="example">
        <label>基础</label>
        <button class="biz-nav-btn"><span>按钮</span></button>
        <label>选中</label>
        <button class="biz-nav-btn active"><span>按钮</span></button>
        <label>禁选</label>
        <button class="biz-nav-btn disabled"><span>按钮</span></button>
        <button class="biz-nav-btn" disabled><span>按钮</span></button>
    </div>
</template>

<script setup></script>

<style>
.biz-nav-btn {
    width: 110px;
    height: 40px;
    margin: var(--gap-sm);
}
</style>