xiaogang

ColorUI 源代码

pages/layout/layout.js

@@ -0,0 +1,66 @@
+// pages/document/layout/layout.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+  
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+  
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+  
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+  
+  }
+})

pages/layout/layout.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "布局/Layout"
+}

pages/layout/layout.wxml

@@ -0,0 +1,134 @@
+<view class="bar solid-bottom">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>Flex 布局</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view>
+    <text class='iconfont icon-title success-text'></text> 固定尺寸
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm flex-wrap">
+    <view class='basis-xs doc-box-sub p-sm m-xs'>xs(20%)</view>
+    <view class='basis-df'></view>
+    <view class='basis-sm doc-box-sub p-sm m-xs'>sm(40%)</view>
+    <view class='basis-df'></view>
+    <view class='basis-df doc-box-sub p-sm m-xs'>sub(50%)</view>
+    <view class='basis-lg doc-box-sub p-sm m-xs'>lg(60%)</view>
+    <view class='basis-xl doc-box-sub p-sm m-xs'>xl(80%)</view>
+  </view>
+  <view>
+    <text class='iconfont icon-title success-text'></text> 比例
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm">
+    <view class='flex-sub doc-box-sub p-sm m-xs'>1</view>
+    <view class='flex-sub doc-box-sub p-sm m-xs'>1</view>
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm">
+    <view class='flex-sub doc-box-sub p-sm m-xs'>1</view>
+    <view class='flex-twice doc-box-sub p-sm m-xs'>2</view>
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm">
+    <view class='flex-sub doc-box-sub p-sm m-xs'>1</view>
+    <view class='flex-twice doc-box-sub p-sm m-xs'>2</view>
+    <view class='flex-treble doc-box-sub p-sm m-xs'>3</view>
+  </view>
+  <view>
+    <text class='iconfont icon-title success-text'></text> 水平对齐
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm justify-start">
+    <view class='doc-box-sub p-sm m-xs'>start</view>
+    <view class='doc-box-sub p-sm m-xs'>start</view>
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm justify-end">
+    <view class='doc-box-sub p-sm m-xs'>end</view>
+    <view class='doc-box-sub p-sm m-xs'>end</view>
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm justify-center">
+    <view class='doc-box-sub p-sm m-xs'>center</view>
+    <view class='doc-box-sub p-sm m-xs'>center</view>
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm justify-between">
+    <view class='doc-box-sub p-sm m-xs'>between</view>
+    <view class='doc-box-sub p-sm m-xs'>between</view>
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm justify-around">
+    <view class='doc-box-sub p-sm m-xs'>around</view>
+    <view class='doc-box-sub p-sm m-xs'>around</view>
+  </view>
+  <view>
+    <text class='iconfont icon-title success-text'></text> 垂直对齐
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm align-start">
+    <view class='doc-box-sub big-sub p-sm m-xs'>ColorUi</view>
+    <view class='doc-box-sub p-sm m-xs'>start</view>
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm align-end">
+    <view class='doc-box-sub big-sub p-sm m-xs'>ColorUi</view>
+    <view class='doc-box-sub p-sm m-xs'>end</view>
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm align-center">
+    <view class='doc-box-sub big-sub p-sm m-xs'>ColorUi</view>
+    <view class='doc-box-sub p-sm m-xs'>center</view>
+  </view>
+</view>
+<view class="bar mt-sm 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>{size}的尺寸有xs/sm/df/lg/xl</view>
+  <view class='doc-box flex flex-wrap pv-xs ph-df mt-sm'>
+    <view class="basis-df">外边距</view>
+    <view class="basis-df">内边距</view>
+    <view class="basis-df">.m-{size}</view>
+    <view class="basis-df">.p-{size}</view>
+  </view>
+  <view class='doc-box flex flex-wrap mt-sm  pv-xs ph-df'>
+    <view class="basis-df">水平方向外边距</view>
+    <view class="basis-df">水平方向内边距</view>
+    <view class="basis-df">.mh-{size}</view>
+    <view class="basis-df">.ph-{size}</view>
+  </view>
+  <view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
+    <view class="basis-df">垂直方向外边距</view>
+    <view class="basis-df">垂直方向内边距</view>
+    <view class="basis-df">.mv-{size}</view>
+    <view class="basis-df">.pv-{size}</view>
+  </view>
+  <view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
+    <view class="basis-df">上外边距</view>
+    <view class="basis-df">上内边距</view>
+    <view class="basis-df">.mt-{size}</view>
+    <view class="basis-df">.pt-{size}</view>
+  </view>
+  <view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
+    <view class="basis-df">右外边距</view>
+    <view class="basis-df">右内边距</view>
+    <view class="basis-df">.mr-{size}</view>
+    <view class="basis-df">.pr-{size}</view>
+  </view>
+  <view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
+    <view class="basis-df">下外边距</view>
+    <view class="basis-df">下内边距</view>
+    <view class="basis-df">.mb-{size}</view>
+    <view class="basis-df">.pb-{size}</view>
+  </view>
+  <view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
+    <view class="basis-df">左外边距</view>
+    <view class="basis-df">左内边距</view>
+    <view class="basis-df">.ml-{size}</view>
+    <view class="basis-df">.pl-{size}</view>
+  </view>
+</view>
+<view class="bar mt-sm 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="doc-box cf p-sm">
+    <view class='doc-box-sub fl p-sm'>ColorUi fl</view>
+    <view class='doc-box-sub fr p-sm'>ColorUi fr</view>
+  </view>
+</view>

pages/layout/layout.wxss

@@ -0,0 +1,3 @@
+page{
+  background: #f5f5f5;
+}