快速上手

通过一个简单的按钮示例,快速了解 Zenkuai UI 的使用方法。

基础示例

				
<template>
    <zk-theme type="page" :padding="30" showBack navbarTitle="Button按钮">
        <!-- 基础按钮 -->
        <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="button-row">
                <view class="button-item">
                    <zk-button text="主要按钮" @click="click1" type="primary" />
                </view>
                <view class="button-item">
                    <zk-button text="成功按钮" type="success" />
                </view>
                <view class="button-item">
                    <zk-button text="警告按钮" type="warning" />
                </view>
            </view>
        </zk-theme>
    </zk-theme>
</template>

<script>
export default {
    methods: {
        click1() {
            console.log("按钮点击")
        }
    }
}
</script>

<style>
.button-row {
    display: flex;
    flex-wrap: wrap;
    margin: -10rpx;
}

.button-item {
    padding: 10rpx;
    box-sizing: border-box;
}
</style> 
			

组件说明

注意事项