Merge branch 'website' of github.com:mpx-ecology/vuese into website

mpx-ecology · Jul 26, 2024 · 4138ec0 · 4138ec0
2 parents 63a69b7 + 225738e
commit 4138ec0
Show file tree

Hide file tree

Showing 19 changed files with 466 additions and 30 deletions.
diff --git a/demo/docs/.vitepress/theme/index.mjs b/demo/docs/.vitepress/theme/index.mjs
@@ -1,5 +1,5 @@
 import VueseWebsiteTheme from '@mpxjs/vuese-website/dist/theme/index'
-import Layout from '@mpxjs/vuese-website/dist/theme/layouts/Layout.vue'
+import Layout from '../../../../packages/website/theme/layouts/Layout.vue'
 import Card from '@mpxjs/vuese-website/dist/theme/global-components/Card.vue'
 
 export default {

diff --git a/demo/docs/guide/button-group.md b/demo/docs/guide/button-group.md
@@ -0,0 +1,147 @@
+## Cube-Button-Group 按钮组
+
+<card>
+
+### 介绍
+
+按钮组合容器，提供内部排列方向配置，常用于包裹一组具有关联性的按钮及内容。
+
+</card>
+
+
+## 示例
+
+<card>
+
+### 水平排列
+
+通过设置`direction="horizontal"`将按钮水平排列。
+
+
+<collapse-wrapper>
+
+```vue
+<cube-button-group direction="horizontal">
+  <cube-button class="btn-item">取消按钮</cube-button>
+  <cube-button class="btn-item" primary>确认按钮</cube-button>
+</cube-button-group>
+```
+
+</collapse-wrapper>
+
+
+<collapse-wrapper>
+
+```vue
+<style scoped lang="stylus">
+.btn-item
+  flex: 1
+  margin-bottom 15px
+  &:last-child
+    margin-left: 10px
+</style>
+```
+
+</collapse-wrapper>
+
+
+</card>
+
+<card>
+
+### 垂直排列
+
+按钮组的默认排列顺序为垂直排列。
+
+
+<collapse-wrapper>
+
+```vue
+<cube-button-group class="btn-wrapper">
+  <cube-button class="btn-item">取消按钮</cube-button>
+  <cube-button class="btn-item" primary>确认按钮</cube-button>
+</cube-button-group>
+```
+
+</collapse-wrapper>
+
+
+</card>
+
+<card>
+
+### 图文结合
+
+我们也可以在一行文字中插入按钮来实现图文混排效果。
+
+
+<collapse-wrapper>
+
+```vue
+<template>
+  <view class="button-groupwith-context-demo">
+    <cube-button-group direction="horizontal">
+      <view class="button-groupwith-title">图文结合示例</view>
+      <cube-button inline>操作</cube-button>
+    </cube-button-group>
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+  options: {
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+})
+</script>
+
+<style lang="stylus">
+.button-groupwith-context-demo
+  .cube-button-group
+    display flex
+    padding 20px 25px
+    box-sizing border-box
+    background-color #fff
+    justify-content space-between
+    align-items center
+    border-radius 8px
+  .button-groupwith-title
+    line-height 27px
+    font-size 21px
+    color #282828
+  .cube-btn
+    padding 8px 26px
+    font-size 16px
+    line-height 24px
+</style>
+```
+
+</collapse-wrapper>
+
+
+</card>
+
+
+## Props
+
+<!-- @vuese:[name]:props:start -->
+|参数|说明|类型|可选值|默认值|
+|---|---|---|---|---|
+|direction|按钮方向|`String`|vertical/horizontal|<pre v-pre class="language-typescript inside-td"><code><span class="hljs-title class_">ButtonGroupDirection</span>.<span class="hljs-property">VERTICAL</span></code></pre>|
+
+<!-- @vuese:[name]:props:end -->
+
+
+## Slots
+
+<!-- @vuese:[name]:slots:start -->
+|插槽名|说明|
+|---|---|
+|— (默认插槽)|-|
+
+<!-- @vuese:[name]:slots:end -->
+
+
diff --git a/demo/docs/guide/button.md b/demo/docs/guide/button.md
@@ -20,19 +20,21 @@
 <collapse-wrapper>
 
 ```vue
-<!-- @example: btn-secondary -> @code-block: name -->
+<cube-button>默认按钮</cube-button>
 
 <cube-button primary>主要按钮</cube-button>
 <cube-button bolder>粗体文字</cube-button>
-<cube-button bolder>粗体文字</cube-button>
-<!-- @code-block name -->
-<cube-button bolder>粗s体文字</cube-button>
 <cube-button outline>细框按钮</cube-button>
 <cube-button inline>内联按钮</cube-button>
 <cube-button light>明亮按钮</cube-button>
 <cube-button outline primary>outline - primary</cube-button>
 <cube-button inline outline>inline - outline</cube-button>
 <cube-button inline primary>inline - primary</cube-button>
+<cube-button active>激活态1234</cube-button>
+<cube-button>
+  <div>12345hhhh</div>
+</cube-button>
+<div>1234</div>
 ```
 
 </collapse-wrapper>

diff --git a/demo/pages/button-group/README.md b/demo/pages/button-group/README.md
@@ -0,0 +1,44 @@
+## Cube-Button-Group 按钮组
+
+<card>
+
+### 介绍
+
+按钮组合容器，提供内部排列方向配置，常用于包裹一组具有关联性的按钮及内容。
+
+</card>
+
+
+## 示例
+
+<card>
+
+### 水平排列
+
+通过设置`direction="horizontal"`将按钮水平排列。
+
+<!-- @example: button-group-two -> template no-wrap -->
+<!-- @example: button-group-two -> style -->
+
+</card>
+
+<card>
+
+### 垂直排列
+
+按钮组的默认排列顺序为垂直排列。
+
+<!-- @example: button-group-vertical-two -> template no-wrap -->
+
+</card>
+
+<card>
+
+### 图文结合
+
+我们也可以在一行文字中插入按钮来实现图文混排效果。
+
+<!-- @example: button-group-with-context show-style -->
+
+</card>
+
diff --git a/demo/pages/button-group/button-group-one.mpx b/demo/pages/button-group/button-group-one.mpx
@@ -0,0 +1,21 @@
+<template>
+  <cube-button-group>
+    <cube-button primary>确认按钮</cube-button>
+  </cube-button-group>
+</template>
+
+<script>
+  import { createComponent } from '@mpxjs/core'
+
+  createComponent({})
+</script>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "view-desc": "../../components/desc/index",
+      "cube-button-group": "@mpxjs/mpx-cube-ui/src/components/button-group/index",
+      "cube-button": "@mpxjs/mpx-cube-ui/src/components/button/index"
+    }
+  }
+</script>
diff --git a/demo/pages/button-group/button-group-two.mpx b/demo/pages/button-group/button-group-two.mpx
@@ -0,0 +1,30 @@
+<template>
+  <cube-button-group direction="horizontal">
+    <cube-button class="btn-item">取消按钮</cube-button>
+    <cube-button class="btn-item" primary>确认按钮</cube-button>
+  </cube-button-group>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({})
+</script>
+
+<style scoped lang="stylus">
+.btn-item
+  flex: 1
+  margin-bottom 15px
+  &:last-child
+    margin-left: 10px
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "view-desc": "../../components/desc/index",
+      "cube-button-group": "@mpxjs/mpx-cube-ui/src/components/button-group/index",
+      "cube-button": "@mpxjs/mpx-cube-ui/src/components/button/index"
+    }
+  }
+</script>
diff --git a/demo/pages/button-group/button-group-vertical-two.mpx b/demo/pages/button-group/button-group-vertical-two.mpx
@@ -0,0 +1,27 @@
+<template>
+  <cube-button-group class="btn-wrapper">
+    <cube-button class="btn-item">取消按钮</cube-button>
+    <cube-button class="btn-item" primary>确认按钮</cube-button>
+  </cube-button-group>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({})
+</script>
+
+<style lang="stylus">
+.btn-item
+  margin-bottom 15px
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "view-desc": "../../components/desc/index",
+      "cube-button-group": "@mpxjs/mpx-cube-ui/src/components/button-group/index",
+      "cube-button": "@mpxjs/mpx-cube-ui/src/components/button/index"
+    }
+  }
+</script>
diff --git a/demo/pages/button-group/button-group-with-context.mpx b/demo/pages/button-group/button-group-with-context.mpx
@@ -0,0 +1,50 @@
+<template>
+  <view class="button-groupwith-context-demo">
+    <cube-button-group direction="horizontal">
+      <view class="button-groupwith-title">图文结合示例</view>
+      <cube-button inline>操作</cube-button>
+    </cube-button-group>
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+  options: {
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+})
+</script>
+
+<style lang="stylus">
+.button-groupwith-context-demo
+  .cube-button-group
+    display flex
+    padding 20px 25px
+    box-sizing border-box
+    background-color #fff
+    justify-content space-between
+    align-items center
+    border-radius 8px
+  .button-groupwith-title
+    line-height 27px
+    font-size 21px
+    color #282828
+  .cube-btn
+    padding 8px 26px
+    font-size 16px
+    line-height 24px
+</style>
+
+<script type="application/json">
+  {
+    "styleIsolation": "shared",
+    "usingComponents": {
+      "view-desc": "../../components/desc/index",
+      "cube-button-group": "@mpxjs/mpx-cube-ui/src/components/button-group/index",
+      "cube-button": "@mpxjs/mpx-cube-ui/src/components/button/index"
+    }
+  }
+</script>
diff --git a/demo/pages/button-group/index.mpx b/demo/pages/button-group/index.mpx
@@ -0,0 +1,35 @@
+<template>
+  <base-container class="button-group-demo">
+    <view-desc>水平排列</view-desc>
+    <button-group-two />
+    <view-desc>垂直排列</view-desc>
+    <button-group-vertical-two />
+    <view-desc>图文结合</view-desc>
+    <button-group-with-context />
+  </base-container>
+</template>
+
+<script>
+import { createPage } from '@mpxjs/core'
+
+createPage({})
+</script>
+
+<style lang="stylus">
+.button-group-demo
+  padding-left 0 !important
+  padding-right 0 !important
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "base-container": "../../components/base-container/index",
+      "view-desc": "../../components/desc/index",
+      "button-group-one": "./button-group-one",
+      "button-group-two": "./button-group-two",
+      "button-group-vertical-two": "./button-group-vertical-two",
+      "button-group-with-context": "./button-group-with-context"
+    }
+  }
+</script>