ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-20 10:44:59 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

zanui demos

Browse Source
This commit is contained in:
cookfront
2017-02-27 16:54:37 +08:00
parent 650dc01906
commit 8cc5fa5007
46 changed files with 1130 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
docs/examples/button.vue
View File

@@ -1,10 +1,70 @@
<template>
<div class="button-demos">
<div class="page-button">
<h1 class="page-title">Button</h1>
<h2 class="page-sub-title">按钮功能</h2>
<div class="page-button__group">
<div class="z-button-1">
<z-button>default</z-button>
</div>
<div class="z-button-1">
<z-button type="primary">primary</z-button>
</div>
<div class="z-button-1">
<z-button type="danger">danger</z-button>
</div>
</div>
<h2 class="page-sub-title">禁用状态</h2>
<div class="page-button__group">
<div class="z-button-1">
<z-button disabled>diabled</z-button>
</div>
</div>
<h2 class="page-sub-title">按钮尺寸</h2>
<div class="page-button__group">
<div class="z-button-1">
<z-button size="large">large</z-button>
</div>
</div>
<div class="page-button__group">
<div class="z-button-3">
<z-button type="primary">normal</z-button>
</div>
<div class="z-button-3">
<z-button size="small">small</z-button>
</div>
<div class="z-button-3">
<z-button size="mini">mini</z-button>
</div>
</div>
<h2 class="page-sub-title">自定义按钮标签</h2>
<div class="page-button__group">
<div class="z-button-1">
<z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
</div>
</div>
<h2 class="page-sub-title">button group</h2>
<div class="page-button__group">
<z-button type="primary" size="small">确认付款</z-button>
<z-button size="small">确认收货</z-button>
<z-button size="small">取消订单</z-button>
</div>
</div>
</template>
<script>
export default {
<style>
@component-namespace page {
@b button {
padding: 0 20px;
};
</script>
@e group {
.z-button-1 {
margin-bottom: 10px;
}
}
}
}
</style>