mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
40 lines
1.2 KiB
Vue
40 lines
1.2 KiB
Vue
<template><section class="demo-tag"><h1 class="demo-title">tag</h1><example-block title="基础用法">
|
|
<div class="tags-container">
|
|
<zan-tag>返现</zan-tag>
|
|
<zan-tag :plain="true">返现</zan-tag>
|
|
</div>
|
|
<div class="tags-container">
|
|
<zan-tag type="danger">返现</zan-tag>
|
|
<zan-tag type="danger">四字标签</zan-tag>
|
|
<zan-tag type="danger">一</zan-tag>
|
|
</div>
|
|
|
|
</example-block><example-block title="高级用法">
|
|
<div class="tags-container">
|
|
<zan-tag type="danger">返现</zan-tag>
|
|
<zan-tag :plain="true" type="danger">返现</zan-tag>
|
|
</div>
|
|
<div class="tags-container">
|
|
<zan-tag type="primary">返现</zan-tag>
|
|
<zan-tag :plain="true" type="primary">返现</zan-tag>
|
|
</div>
|
|
<div class="tags-container">
|
|
<zan-tag type="success">返现</zan-tag>
|
|
<zan-tag :plain="true" type="success">返现</zan-tag>
|
|
</div>
|
|
<div class="tags-container">
|
|
<zan-tag type="danger" :mark="true">返现</zan-tag>
|
|
</div>
|
|
|
|
</example-block></section></template>
|
|
<style>
|
|
.tags-container {
|
|
padding: 5px 15px;
|
|
|
|
.zan-tag + .zan-tag {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script> |