Tag 标签

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="skeleton骨架屏">
		<!-- 基础用法 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" />
			<view class="demo-row">
				<zk-tag text="标签" />
				<zk-tag text="标签" type="primary" />
				<zk-tag text="标签" type="success" />
				<zk-tag text="标签" type="warning" />
				<zk-tag text="标签" type="danger" />
			</view>
		</zk-theme>

		<!-- 空心样式 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="空心样式" />
			<view class="demo-row">
				<zk-tag text="标签" plain />
				<zk-tag text="标签" type="primary" plain />
				<zk-tag text="标签" type="success" plain />
				<zk-tag text="标签" type="warning" plain />
				<zk-tag text="标签" type="danger" plain />
			</view>
		</zk-theme>

		<!-- 圆角样式 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="圆角样式" />
			<view class="demo-row">
				<zk-tag text="标签" round />
				<zk-tag text="标签" type="primary" round />
				<zk-tag text="标签" type="success" round />
				<zk-tag text="标签" type="warning" round />
				<zk-tag text="标签" type="danger" round />
			</view>
		</zk-theme>

		<!-- 标记样式 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="标记样式" />
			<view class="demo-row">
				<zk-tag text="标签" mark />
				<zk-tag text="标签" type="primary" mark />
				<zk-tag text="标签" type="success" mark />
				<zk-tag text="标签" type="warning" mark />
				<zk-tag text="标签" type="danger" mark />
			</view>
		</zk-theme>

 
		<!-- 自定义颜色 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义颜色" />
			<view class="demo-row">
				<zk-tag text="标签" color="#f2826a" />
				<zk-tag text="标签" color="#7232dd" />
				<zk-tag text="标签" color="#7232dd" plain />
				<zk-tag text="标签" color="#ffe1e1" text-color="#ad0000" />
			</view>
		</zk-theme>

		<!-- 标签大小 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="标签大小" />
			<view class="demo-row">
				<zk-tag text="大号标签" type="primary" size="large" />
				<zk-tag text="默认标签" type="primary" />
				<zk-tag text="小号标签" type="primary" size="small" />
				<zk-tag text="迷你标签" type="primary" size="mini" />
			</view>
		</zk-theme>

		<!-- 可关闭标签 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="可关闭标签" />
			<view class="demo-row">
				<zk-tag v-for="(tag, index) in tags" :key="index" :text="tag.text" :type="tag.type" closeable
					@close="onClose(index)" />
			</view>
		</zk-theme>

		<!-- 带图标的标签 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="带图标的标签" />
			<view class="demo-row">
				<zk-tag text="标签" type="primary" left-icon="star-line" />
				<zk-tag text="标签" type="success" left-icon="check-line" />
				<zk-tag text="标签" type="warning" left-icon="notification-line" />
				<zk-tag text="标签" type="danger" left-icon="heart-line" />
			</view>
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				tags: [{
						type: 'primary',
						text: '标签1'
					},
					{
						type: 'success',
						text: '标签2'
					},
					{
						type: 'danger',
						text: '标签3'
					}
				]
			}
		},



		methods: {
			onClose(index) {
				this.tags.splice(index, 1)
			}
		}
	}
</script>

<style>
	.demo-row {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
	}

	.zk-tag {
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	/* #ifdef APP-NVUE */
	.demo-row {
		flex-direction: row;
		flex-wrap: wrap;
	}

	/* #endif */
</style>