快速上手
通过一个简单的按钮示例,快速了解 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>
组件说明
zk-theme
: 主题容器组件,用于设置页面布局和主题zk-text
: 文本组件,用于显示各类文本内容zk-button
: 按钮组件,支持多种类型和样式
注意事项
- 组件已全局注册,可直接使用
- 使用
zk-theme
作为页面容器可以获得统一的主题样式 - 组件支持事件绑定,如示例中的
@click
- 样式可以根据需要自定义调整