wxc-panel

panel - 小程序组件

Install

$ min install @minui/wxc-panel

Demos

无边框

<template>
  <wxc-panel border="{{false}}" >
    <view class="content">无边框模式</view>
  </wxc-panel>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-panel': '@minui/wxc-panel'
    }
  },
  data: { },
  /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  methods: {
    onClick(event) {
      console.log(event)
    }
  }
}
</script>
<style>
  .content {
    padding: 30rpx;
  }
</style>

设置标题

<template>
  <wxc-panel title="标题" bind:click="onClick">
    <view class="content">内容</view>
  </wxc-panel>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-panel': '@minui/wxc-panel'
    }
  },
  data: { },
  /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  methods: {
    onClick(event) {
      console.log(event)
    }
  }
}
</script>
<style>
  .content {
    padding: 30rpx;
  }
</style>

无上边距

<template>
  <wxc-panel margin="{{false}}" >
    <view class="content">无上边距模式</view>
  </wxc-panel>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-panel': '@minui/wxc-panel'
    }
  },
  data: { },
  /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  methods: {
    onClick(event) {
      console.log(event)
    }
  }
}
</script>
<style>
  .content {
    padding: 30rpx;
  }
</style>

API

Panel

ChangeLog

v1.0.0（2018-4-9）

• 初始版本