<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 class="button-item">
<zk-button text="危险按钮" type="danger" />
</view>
<view class="button-item">
<zk-button text="信息按钮" type="info" />
</view>
</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="button-row">
<view class="button-item">
<zk-button text="朴素按钮" type="primary" plain />
</view>
<view class="button-item">
<zk-button text="朴素按钮" type="success" plain />
</view>
<view class="button-item">
<zk-button text="朴素按钮" type="warning" plain />
</view>
<view class="button-item">
<zk-button text="朴素按钮" type="danger" plain />
</view>
</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="button-row">
<view class="button-item">
<zk-button text="轻按钮" type="primary" light />
</view>
<view class="button-item">
<zk-button text="轻按钮" type="success" light />
</view>
<view class="button-item">
<zk-button text="轻按钮" type="warning" light />
</view>
<view class="button-item">
<zk-button text="轻按钮" type="danger" light />
</view>
</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="button-row">
<view class="button-item button-item--large">
<zk-button text="大号按钮" type="primary" size="large" />
</view>
<view class="button-item">
<zk-button text="默认按钮" type="primary" />
</view>
<view class="button-item button-item--small">
<zk-button text="小型按钮" type="primary" size="small" />
</view>
<view class="button-item button-item--mini">
<zk-button text="迷你按钮" type="primary" size="mini" />
</view>
</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="button-row">
<view class="button-item">
<zk-button text="圆角按钮" type="primary" round />
</view>
<view class="button-item">
<zk-button text="圆角按钮" type="success" round />
</view>
<view class="button-item">
<zk-button text="圆角按钮" type="warning" round />
</view>
<view class="button-item">
<zk-button text="圆角按钮" type="danger" round />
</view>
</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="button-row">
<view class="button-item">
<zk-button text="搜索" type="primary" icon="search-line" color="#fff" />
</view>
<view class="button-item">
<zk-button text="新增" type="success" icon="add-large-line" color="#fff" />
</view>
<view class="button-item button-item--circle">
<zk-button type="warning" icon="edit-line" circle color="#fff" />
</view>
<view class="button-item button-item--circle">
<zk-button type="danger" icon="delete-back-2-line" circle color="#fff" />
</view>
</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="button-row">
<view class="button-item">
<zk-button text="加载中..." type="primary" loading />
</view>
<view class="button-item">
<zk-button text="加载中..." type="success" loading />
</view>
<view class="button-item">
<zk-button text="加载中..." type="primary" loading plain />
</view>
</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="button-row">
<view class="button-item">
<zk-button text="禁用按钮" type="primary" disabled />
</view>
<view class="button-item">
<zk-button text="禁用按钮" type="success" disabled />
</view>
<view class="button-item">
<zk-button text="禁用按钮" type="primary" disabled plain />
</view>
</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="button-row">
<view class="button-item">
<zk-button text="紫色背景白字" background="#8b2671" color="#fff" />
</view>
<view class="button-item">
<zk-button text="灰色背景紫字" background="#f0f0f0" color="#8b2671" />
</view>
<view class="button-item">
<zk-button text="紫色边框" background="#8b2671" plain />
</view>
<view class="button-item">
<zk-button text="浅紫背景" background="#8b2671" light />
</view>
<view class="button-item button-item--gradient">
<zk-button text="渐变背景" background="linear-gradient(45deg, #ff6034, #ee0a24)" />
</view>
<view class="button-item button-item--gradient">
<zk-button text="自定义渐变" background="linear-gradient(45deg, #4CAF50, #2196F3)" color="#fff" round />
</view>
</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="button-row">
<view class="button-item button-item--custom-width">
<zk-button text="650rpx 宽度按钮" type="primary" width="600rpx" />
</view>
<view class="button-item">
<zk-button text="100rpx 高度按钮" type="success" height="100rpx" />
</view>
<view class="button-item button-item--custom-width">
<zk-button text="自定义宽高按钮" type="warning" width="300rpx" height="120rpx" />
</view>
</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="button-row button-row--custom">
<view class="button-item button-item--custom-width">
<zk-button text="加入购物车" background="#ff9800" width="300rpx" height="88rpx" icon="cart" round />
</view>
<view class="button-item button-item--custom-width">
<zk-button text="提交订单" background="linear-gradient(to right, #00b09b, #96c93d)" width="600rpx"
height="100rpx" round />
</view>
</view>
</zk-theme>
</zk-theme>
</template>
<script>
export default {
methods: {
click1() {
console.log("按钮点击")
}
}
}
</script>
<style>
/* 按钮行容器 */
.button-row {
/* #ifndef APP-NVUE */
display: flex;
flex-wrap: wrap;
margin: -10rpx;
/* width: calc(100% + 20rpx); */
/* #endif */
/* #ifdef APP-NVUE */
flex-direction: row;
flex-wrap: wrap;
margin: -10rpx;
/* #endif */
}
/* 按钮项容器 */
.button-item {
/* #ifndef APP-NVUE */
padding: 10rpx;
box-sizing: border-box;
/* #endif */
/* #ifdef APP-NVUE */
margin: 10rpx;
flex: 1;
/* #endif */
}
/* 大尺寸按钮容器 */
.button-item--large {
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
}
/* 小尺寸按钮容器 */
.button-item--small {
/* #ifndef APP-NVUE */
width: 33.333%;
/* #endif */
}
/* 迷你尺寸按钮容器 */
.button-item--mini {
/* #ifndef APP-NVUE */
width: 25%;
/* #endif */
}
/* 圆形按钮样式 */
.button-item--circle {
/* #ifndef APP-NVUE */
width: auto;
/* #endif */
}
/* 自定义宽度的按钮容器 */
.button-item--custom-width {
/* #ifndef APP-NVUE */
width: auto;
/* #endif */
}
/* 圆形按钮 */
.zenkuai-btn--circle {
width: 80rpx !important;
height: 80rpx !important;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
}
.zenkuai-btn--circle .btn-icon {
margin: 0 !important;
}
/* 响应式布局 */
@media screen and (min-width: 768px) {
.button-item {
/* #ifndef APP-NVUE */
width: 33.333%;
/* #endif */
}
.button-item--small {
/* #ifndef APP-NVUE */
width: 25%;
/* #endif */
}
.button-item--mini {
/* #ifndef APP-NVUE */
width: 20%;
/* #endif */
}
}
/* 特定场景的按钮样式 */
.button-row--custom {
/* #ifndef APP-NVUE */
justify-content: center;
/* #endif */
}
.button-row--custom .button-item {
/* #ifndef APP-NVUE */
width: auto;
/* #endif */
}
/* 渐变按钮容器 */
.button-item--gradient {
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
}
</style>