按钮

基础按钮

<template>
  	<div class="tdesign-demo-block-row">
		<t-button theme="default" variant="outline">描边按钮</t-button>
		<t-button theme="primary" variant="base">填充按钮</t-button>
		<t-button theme="primary" variant="outline">描边按钮</t-button>
		<t-button theme="danger" variant="base">描边按钮</t-button>
	</div>
</template>

显示代码 复制代码 复制代码

图标按钮(图标问题未解决)

<template>
	<div class="demo-block-column">
		<div class="demo-block-row">
			<t-button theme="default" variant="outline">
				<template #icon>
                   <i class="care-icon-add"></i>
                </template>
				描边按钮
			</t-button>
			<t-button theme="primary" variant="base">
				<template #icon>
                   <i class="care-icon-add"></i>
                </template>
				填充按钮
			</t-button>
			<t-button theme="primary" variant="outline">
				<template #icon>
                   <i class="care-icon-add"></i>
                </template>
				描边按钮
			</t-button>
		</div>
	</div>
</template>
<script>
export default {
    methods: {
        renderCartIcon() {
            return <i slot="icon" class="care-icon-add"></i>;
        },
    }
};
</script>

显示代码 复制代码 复制代码

不同尺寸的按钮

<template>
	<div class="demo-block-column">
		<div class="demo-block-row">
			<t-button size="small" theme="default" variant="outline">描边按钮</t-button>
			<t-button size="small" theme="primary" variant="base">填充按钮</t-button>
			<t-button size="small" theme="primary" variant="outline">描边按钮</t-button>
		</div>
		<div class="demo-block-row">
			<t-button size="medium" theme="default" variant="outline">描边按钮</t-button>
			<t-button size="medium" theme="primary" variant="base">填充按钮</t-button>
			<t-button size="medium" theme="primary" variant="outline">描边按钮</t-button>
		</div>
		<div class="demo-block-row">
			<t-button size="large" theme="default" variant="outline">描边按钮</t-button>
			<t-button size="large" theme="primary" variant="base">填充按钮</t-button>
			<t-button size="large" theme="primary" variant="outline">描边按钮</t-button>
		</div>
	</div>
</template>

显示代码 复制代码 复制代码

联合按钮

<template>
	<div class="demo-block-column">
		<div class="demo-block-row">
			<div class="care-btn-wrap">
				<div class="care-btn-group">
					<t-button theme="default" variant="base">填充按钮</t-button>
					<t-button variant="outline">描边按钮</t-button>
				</div>
			 </div>
		</div>
		<div class="demo-block-row">
			<div class="care-btn-group">
				<t-button theme="primary" variant="outline">描边按钮</t-button>
				<t-button theme="default" variant="outline">描边按钮</t-button>
			</div>
		</div>
		<div class="demo-block-row">
			<div class="care-btn-wrap">
				<div class="care-btn-group">
					<t-button theme="default" variant="base">填充按钮</t-button>
					<t-button theme="default" variant="base">描边按钮</t-button>
					<t-button theme="primary" variant="base">填充按钮</t-button>
				</div>
			</div>
		</div>
		<div class="demo-block-row">
		</div>
	</div>
</template>

显示代码 复制代码 复制代码