wxc-cc

MinUI 小程序组件 - 水平垂直居中

Install

  1. $ min install @minui/wxc-cc

Demos

默认示例

一个水平垂直居中的图片

水平垂直居中 cc - 图1

  1. <template>
  2.   <wxc-cc class="demo">
  3.     <image class="demo__pic" src="https://s10.mogucdn.com/mlcdn/c45406/171115_7eaee6469k5l0e1728j7aige52e81_352x352.png" mode="aspectFit"></image>
  4.   </wxc-cc>
  5. </template>
  7. <script>
  8. export default {
  9.   config: {
  10.     usingComponents: {
  11.       'wxc-cc': '@minui/wxc-cc'
  12.     }
  13.   },
  14.   data: {},
  15.   methods: {}
  16. }
  17. </script>
  19. <style>
  20.   .demo {
  21.     display: block;
  22.     width: 100%;
  23.     height: 400rpx;
  24.     background: #f2f2f2;
  25.   }
  26.   .demo__pic {
  27.     width: 200rpx;
  28.     height: 200rpx;
  29.   }
  30. </style>

多元素

水平垂直居中 cc - 图2

  1. <template>
  2.   <wxc-cc class="demo">
  3.     <image class="demo__pic" src="https://s10.mogucdn.com/mlcdn/c45406/171115_7eaee6469k5l0e1728j7aige52e81_352x352.png" mode="aspectFit"></image>
  4.     <image class="demo__pic" src="https://s10.mogucdn.com/mlcdn/c45406/171109_871803cbeajedk3fabb59jl4idl1c_356x356.png" mode="aspectFit"></image>
  5.   </wxc-cc>
  6. </template>
  8. <script>
  9. export default {
  10.   config: {
  11.     usingComponents: {
  12.       'wxc-cc': '@minui/wxc-cc'
  13.     }
  14.   },
  15.   data: {},
  16.   methods: {}
  17. }
  18. </script>
  20. <style>
  21.   .demo {
  22.     display: block;
  23.     width: 100%;
  24.     height: 400rpx;
  25.     background: #f2f2f2;
  26.   }
  27.   .demo__pic {
  28.     width: 200rpx;
  29.     height: 200rpx;
  30.     margin: 15rpx;
  31.   }
  32. </style>

图片加一换行的文字

水平垂直居中 cc - 图3

  1. <template>
  2.   <wxc-cc class="demo">
  3.     <view class="demo__wrapper">
  4.       <image class="demo__pic" src="https://s10.mogucdn.com/mlcdn/c45406/171115_7eaee6469k5l0e1728j7aige52e81_352x352.png" mode="aspectFit"></image>
  5.       <view class="demo__text">MinUI</view>
  6.     </view>
  7.   </wxc-cc>
  8. </template>
  10. <script>
  11. export default {
  12.   config: {
  13.     usingComponents: {
  14.       'wxc-cc': '@minui/wxc-cc'
  15.     }
  16.   },
  17.   data: {},
  18.   methods: {}
  19. }
  20. </script>
  22. <style>
  23.   .demo {
  24.     display: block;
  25.     width: 100%;
  26.     height: 400rpx;
  27.     background: #f2f2f2;
  28.   }
  29.   .demo__pic {
  30.     width: 200rpx;
  31.     height: 200rpx;
  32.     margin: 15rpx;
  33.   }
  34.   .demo__text {
  35.     text-align: center;
  36.   }
  37. </style>

API

CC【props】

none

地址
cc 组件文档 https://meili.github.io/min/docs/minui/index.html#cc
cc 组件源码 https://github.com/meili/minui/tree/master/packages/wxc-cc
MinUI 组件库 https://github.com/meili/minui

Preview

cc

ChangeLog

v1.0.0（2017-11-15）

  • 初始版本