feat: collapse

didi · Jan 17, 2025 · 961f48d · 961f48d
1 parent bc04f39
commit 961f48d
Show file tree

Hide file tree

Showing 11 changed files with 414 additions and 2 deletions.
diff --git a/example/app.mpx b/example/app.mpx
@@ -15,6 +15,7 @@
     "pages": [
       "./pages/index",
       "./pages/button/index",
+      "./pages/collapse/index",
       "./pages/icon/index",
       "./pages/button-group/index",
       "./pages/divider/index",

diff --git a/example/common/config.ts b/example/common/config.ts
@@ -3,6 +3,7 @@ export default {
     'default': [
       'button',
       'button-group',
+      'collapse',
       'icon',
       'radio',
       'radio-group',
@@ -40,7 +41,8 @@ export default {
           'button-group',
           'icon',
           'divider',
-          'float-ball'
+          'float-ball',
+          'collapse'
         ]
       },
       {

diff --git a/example/pages/collapse/basic-collapse.mpx b/example/pages/collapse/basic-collapse.mpx
@@ -0,0 +1,33 @@
+<template>
+  <view>
+    <view>通过默认slot 传入展开、收起的内容</view>
+    <view class="bg-white">
+      <cube-collapse>
+        <view>内容文案，第一行</view>
+        <view>内容文案，第二行</view>
+        <view>内容文案，第三行</view>
+        <view>内容文案，第四行</view>
+      </cube-collapse>
+    </view>
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({})
+</script>
+
+<style lang="stylus" scoped>
+.bg-white
+  margin-top: 6px
+  background-color: #fff
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "cube-collapse": "@mpxjs/mpx-cube-ui/src/components/collapse/index"
+    }
+  }
+</script>
diff --git a/example/pages/collapse/change-min-height.mpx b/example/pages/collapse/change-min-height.mpx
@@ -0,0 +1,51 @@
+<template>
+  <view>
+    <view>min-height 属性最小内容展示高度</view>
+    <view class="bg-white">
+      <cube-collapse min-height="{{ '40px' }}">
+        <view class="text">内容文案，第一行</view>
+        <view class="text">内容文案，第二行</view>
+        <view class="text">内容文案，第三行</view>
+        <view class="text">内容文案，第四行</view>
+        <view class="text">内容文案，第五行</view>
+        <view class="text">内容文案，第六行</view>
+        <view class="text">内容文案，第七行</view>
+      </cube-collapse>
+    </view>
+
+    <view>内容小于 min-height时，隐藏展开按钮 </view>
+    <view class="bg-white">
+      <cube-collapse min-height="{{ '100px' }}">
+        <view class="text">内容文案，第一行</view>
+        <view class="text">内容文案，第二行</view>
+        <view class="text">内容文案，第三行</view>
+      </cube-collapse>
+    </view>
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+  data: {
+    switchText: ['可以展示查看新内容', '收起内容']
+  }
+})
+</script>
+
+<style lang="stylus" scoped>
+.bg-white
+  margin-top: 6px
+  background-color: #fff
+.text
+  line-height: 20px
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "cube-collapse": "@mpxjs/mpx-cube-ui/src/components/collapse/index"
+    }
+  }
+</script>
diff --git a/example/pages/collapse/change-position.mpx b/example/pages/collapse/change-position.mpx
@@ -0,0 +1,35 @@
+<template>
+  <view>
+    <view>switch-position 属性修改 switch 文案位置</view>
+    <view class="bg-white">
+      <cube-collapse switch-positon="{{ 'bottom' }}" switch-text="查看更多" min-height="{{ '40px' }}">
+        <view class="text">1. 吃好喝好</view>
+        <view class="text">2. 睡前少玩手机</view>
+        <view class="text">3. 定闹钟早起</view>
+        <view class="text">4. 上面的理论来自个人猜想</view>
+      </cube-collapse>
+    </view>
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({})
+</script>
+
+<style lang="stylus" scoped>
+.bg-white
+  margin-top: 6px
+  background-color: #fff
+.text
+  line-height: 20px
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "cube-collapse": "@mpxjs/mpx-cube-ui/src/components/collapse/index"
+    }
+  }
+</script>
diff --git a/example/pages/collapse/change-switch-text.mpx b/example/pages/collapse/change-switch-text.mpx
@@ -0,0 +1,47 @@
+<template>
+  <view>
+    <view>switch-text 属性修改展示、收起文案</view>
+    <view class="bg-white">
+      <cube-collapse switch-text="{{ switchText }}">
+        <view>内容文案，第一行</view>
+        <view>内容文案，第二行</view>
+        <view>内容文案，第三行</view>
+        <view>内容文案，第四行</view>
+      </cube-collapse>
+    </view>
+
+    <view>switch-text 也可以是字符串</view>
+    <view class="bg-white">
+      <cube-collapse switch-text="{{ '如何做到早睡早起？' }}">
+        <view>1. 吃好喝好</view>
+        <view>2. 睡前少玩手机</view>
+        <view>3. 定闹钟早起</view>
+        <view>4. 上面的理论来自个人猜想</view>
+      </cube-collapse>
+    </view>
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+  data: {
+    switchText: ['可以展示查看新内容', '收起内容']
+  }
+})
+</script>
+
+<style lang="stylus" scoped>
+.bg-white
+  margin-top: 6px
+  background-color: #fff
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "cube-collapse": "@mpxjs/mpx-cube-ui/src/components/collapse/index"
+    }
+  }
+</script>
diff --git a/example/pages/collapse/index.mpx b/example/pages/collapse/index.mpx
@@ -0,0 +1,47 @@
+<template>
+  <base-container class="cube-checkbox-modal-page">
+    <view class="demo">
+      <basic-collapse />
+    </view>
+
+    <view class="demo">
+      <change-switch-text />
+    </view>
+
+    <view class="demo">
+      <change-min-height />
+    </view>
+
+    <view class="demo">
+      <change-position />
+    </view>
+
+    <view class="demo">
+      <slot-wx-model />
+    </view>
+  </base-container>
+</template>
+
+<script>
+import { createPage } from '@mpxjs/core'
+
+createPage({})
+</script>
+
+<style lang="stylus">
+.demo
+  margin-bottom: 20px
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "base-container": "../../components/base-container/index",
+      "basic-collapse": "./basic-collapse.mpx",
+      "change-switch-text": "./change-switch-text.mpx",
+      "change-min-height": "./change-min-height.mpx",
+      "change-position": "./change-position.mpx",
+      "slot-wx-model": "./slot-wx-model.mpx"
+    }
+  }
+</script>
diff --git a/example/pages/collapse/slot-wx-model.mpx b/example/pages/collapse/slot-wx-model.mpx
@@ -0,0 +1,32 @@
+<template>
+  <view>
+    <view>slot + wx:model来开展使用能力</view>
+    <view class="bg-white">
+      <cube-collapse>
+        <view>
+          <view></view>
+        </view>
+      </cube-collapse>
+    </view>
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({})
+</script>
+
+<style lang="stylus" scoped>
+.bg-white
+  margin-top: 6px
+  background-color: #fff
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "cube-collapse": "@mpxjs/mpx-cube-ui/src/components/collapse/index"
+    }
+  }
+</script>
diff --git a/example/static/wx/project.config.json b/example/static/wx/project.config.json
@@ -38,7 +38,7 @@
       "list": [
         {
           "name": "",
-          "pathName": "pages/picker/index",
+          "pathName": "pages/collapse/index",
           "query": "",
           "launchMode": "default",
           "scene": null

diff --git a/packages/mpx-cube-ui/src/components/collapse/index.mpx b/packages/mpx-cube-ui/src/components/collapse/index.mpx
@@ -0,0 +1,68 @@
+<template>
+  <view class="cube-collapse">
+    <view wx:if="{{ showTopSwitch }}" class="cube-collapse-top" bindtap="toggleCollapse">
+      <view class="cube-collapse-switch" wx:if="{{text}}">
+        <view class="cube-collapse-text">{{ text }}</view>
+        <cube-icon
+          class="cube-collapse-arrow"
+          wx:class="{{ { 'cube-collapse-arrow-bottom': isCollapsed } }}"
+          type="arrow"
+        />
+      </view>
+      <slot name="top-switch" />
+    </view>
+    <slot name="top" />
+    <view class="cube-collapse-mid" wx:style="{{ contentWrapStyle }}">
+      <view class="cube-collapse-content">
+        <slot />
+      </view>
+    </view>
+    <slot name="bottom" />
+    <view wx:if="{{ showBottomSwitch }}" class="cube-collapse-bottom" bindtap="toggleCollapse">
+      <view class="cube-collapse-switch" wx:if="{{text}}">
+        <view class="cube-collapse-text">{{ text }}</view>
+        <cube-icon
+          class="cube-collapse-arrow"
+          wx:class="{{ { 'cube-collapse-arrow-bottom': isCollapsed } }}"
+          type="arrow"
+        />
+      </view>
+      <slot name="bottom-switch" />
+    </view>
+  </view>
+</template>
+
+<script src="./index.ts" lang="ts"></script>
+
+<style lang="stylus">
+.cube-collapse-mid
+  transition: max-height .3s ease-in-out
+  overflow: hidden
+.cube-collapse-content
+  overflow: hidden
+.cube-collapse-switch
+  display: flex
+  align-items center
+  height: 28px
+  font-size: 14px
+  color: #222
+.cube-collapse-text
+  flex-grow: 1
+.cube-collapse-arrow
+  flex-shrink: 0
+  font-size: 12px
+  transform: rotate(-90deg)
+  transition: transform .3s ease-in-out
+.cube-collapse-arrow-bottom
+  transform: rotate(90deg)
+</style>
+
+<script type="application/json">
+  {
+    "styleIsolation": "shared",
+    "component": true,
+    "usingComponents": {
+      "cube-icon": "../icon/index.mpx"
+    }
+  }
+</script>