mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
73 lines
1.9 KiB
Vue
73 lines
1.9 KiB
Vue
<template>
|
|
<div class="page-button">
|
|
<h1 class="page-title">Button</h1>
|
|
<h2 class="page-sub-title">按钮功能</h2>
|
|
<div class="zan-button-group">
|
|
<div class="zan-button-1">
|
|
<zan-button>default</zan-button>
|
|
</div>
|
|
<div class="zan-button-1">
|
|
<zan-button type="primary">primary</zan-button>
|
|
</div>
|
|
<div class="zan-button-1">
|
|
<zan-button type="danger">danger</zan-button>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="page-sub-title">禁用状态</h2>
|
|
<div class="zan-button-group">
|
|
<div class="zan-button-1">
|
|
<zan-button disabled>diabled</zan-button>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="page-sub-title">按钮尺寸</h2>
|
|
<div class="zan-button-group">
|
|
<div class="zan-button-1">
|
|
<zan-button size="large">large</zan-button>
|
|
</div>
|
|
</div>
|
|
<div class="zan-button-group">
|
|
<div class="zan-button-3">
|
|
<zan-button type="primary">normal</zan-button>
|
|
</div>
|
|
<div class="zan-button-3">
|
|
<zan-button size="small">small</zan-button>
|
|
</div>
|
|
<div class="zan-button-3">
|
|
<zan-button size="mini">mini</zan-button>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="page-sub-title">自定义按钮标签</h2>
|
|
<div class="zan-button-group">
|
|
<div class="zan-button-1">
|
|
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="page-sub-title">button group</h2>
|
|
<div class="zan-button-group">
|
|
<zan-button type="primary" size="small">确认付款</zan-button>
|
|
<zan-button size="small">确认收货</zan-button>
|
|
<zan-button size="small">取消订单</zan-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
@component-namespace page {
|
|
@b button {
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
@component-namespace zan {
|
|
@b button-group {
|
|
.zan-button-1 {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|