mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-06-08 06:53:17 +08:00
xiaogang
ColorUI 源代码
This commit is contained in:
weilanwl
@@ -0,0 +1,5 @@
|
||||
// pages/element/button/button.js
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "按钮/Button"
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
<view class="bar solid-bottom">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>形状</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class='flex flex-wrap '>
|
||||
<button class='gray btn'>默认</button>
|
||||
<button class='gray btn round ml-sm'>椭圆</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>尺寸</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class='flex flex-wrap justify-between align-center'>
|
||||
<button class='gray btn xs'>最小</button>
|
||||
<button class='gray btn sm round'>小尺寸</button>
|
||||
<button class='gray btn'>默认</button>
|
||||
<button class='gray btn lg round'>大尺寸</button>
|
||||
<button class='gray btn xl'>最大</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>颜色</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class='flex flex-wrap justify-between'>
|
||||
<button class='primary btn'>蔚蓝</button>
|
||||
<button class='secondary btn round'>天青</button>
|
||||
<navigator class='success btn'>森绿</navigator>
|
||||
<button class='warning btn round'>鲜橙</button>
|
||||
<button class='danger btn'>嫣红</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>幽灵按钮</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class='flex flex-wrap justify-between align-center'>
|
||||
<button class='gray btn hollow xs'>默认</button>
|
||||
<button class='primary btn hollow sm'>蔚蓝</button>
|
||||
<button class='secondary btn hollow round'>天青</button>
|
||||
<navigator class='success btn hollow'>森绿</navigator>
|
||||
<button class='warning btn hollow lg round'>鲜橙</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>块状按钮</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class='flex flex-direction'>
|
||||
<button class='gray btn block lg'>默认</button>
|
||||
<button class='primary btn mt-sm block lg'>主键</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>带图标的按钮</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class='flex justify-center align-center'>
|
||||
<button class='secondary btn block hollow round'>
|
||||
<text class='iconfont icon-appreciate mr-xs'></text> 次级键
|
||||
</button>
|
||||
<button class='primary btn ml-sm'>
|
||||
<text class='iconfont icon-loading iconfont-spin mr-xs'></text> 主键
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>带图标的圆形按钮</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class='flex justify-center align-center'>
|
||||
<button class='primary btn xs iconfont icon-appreciate'>
|
||||
</button>
|
||||
<button class='secondary btn sm ml-sm iconfont icon-discoverfill'>
|
||||
</button>
|
||||
<button class='success btn ml-sm iconfont icon-locationfill'>
|
||||
</button>
|
||||
<button class='warning btn lg ml-sm iconfont icon-weibo'>
|
||||
</button>
|
||||
<button class='danger btn xl ml-sm iconfont icon-presentfill'>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>固定在底部</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<navigator class='btn success block lg' url='sub?ctype=foot'> 预览
|
||||
<text class='iconfont icon-roundright ml-xs'></text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>悬浮按钮</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<navigator class='btn warning block lg mb-sm' url='sub?ctype=fixed'> 预览
|
||||
<text class='iconfont icon-roundright ml-xs'></text>
|
||||
</navigator>
|
||||
</view>
|
||||
@@ -0,0 +1,6 @@
|
||||
page{
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.doc-example > button{
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
// pages/element/button/foot.js
|
||||
Page({
|
||||
data: {
|
||||
ctype: '',
|
||||
clist: [],
|
||||
glo_is_load: true
|
||||
},
|
||||
onLoad: function (options) {
|
||||
var that = this
|
||||
var ctype = options.ctype;
|
||||
that.setData({
|
||||
ctype: ctype,
|
||||
})
|
||||
var this_title = '';
|
||||
if (ctype == 'foot') {
|
||||
this_title = '固定在底部'
|
||||
} else if (ctype == 'fixed') {
|
||||
this_title = '悬浮按钮'
|
||||
}
|
||||
wx.setNavigationBarTitle({
|
||||
title: this_title
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {
|
||||
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<image src='/images/skin.jpg' mode='widthFix'></image>
|
||||
<view class='foot-btn' wx:if="{{ctype == 'foot'}}">
|
||||
<button class='danger btn hollow'><text class='iconfont icon-delete mr-xs'></text> 删除</button>
|
||||
<button class='success btn round'><text class='iconfont icon-upload mr-xs'></text> 上传</button>
|
||||
</view>
|
||||
<button class='warning btn iconfont lg fixed icon-add' style='bottom:40rpx' wx:if="{{ctype == 'fixed'}}"></button>
|
||||
@@ -0,0 +1,4 @@
|
||||
image{
|
||||
width: 100%;
|
||||
display:block;
|
||||
}
|
||||
Reference in New Issue
Block a user