Skip to content

Commit 19a595d

Browse files
QiuShuiBaiQiuShuiBai
authored
Merge pull request #1 from AndIMissU/main
feat: 🎸 website 支持多路径
2 parents 1fd3d64 + e2d4ca1 commit 19a595d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+1923
-41
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,5 @@ packages/parser/lib/example.ts
1111
.DS_Store
1212
packages/demo
1313
website/docs/.vitepress/cache
14+
website/docs/components
1415
.cache

‎demo/new-pages/button-group1/README.md

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# Cube-Button-Group 按钮组
2+
3+
## 介绍
4+
5+
<card>
6+
7+
按钮组合容器，提供内部排列方向配置，常用于包裹一组具有关联性的按钮及内容。
8+
9+
</card>
10+
11+
12+
## 示例
13+
14+
<card>
15+
16+
### 水平排列
17+
18+
通过设置`direction="horizontal"`将按钮水平排列。
19+
20+
<!-- @example: button-group-two -> template no-wrap -->
21+
<!-- @example: button-group-two -> style -->
22+
23+
</card>
24+
25+
<card>
26+
27+
### 垂直排列
28+
29+
按钮组的默认排列顺序为垂直排列。
30+
31+
<!-- @example: button-group-vertical-two -> template no-wrap -->
32+
33+
</card>
34+
35+
<card>
36+
37+
### 图文结合
38+
39+
我们也可以在一行文字中插入按钮来实现图文混排效果。
40+
41+
<!-- @example: button-group-with-context show-style -->
42+
43+
</card>
44+

‎demo/new-pages/button-group1/button-group-one.mpx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<cube-button-group>
3+
<cube-button primary>确认按钮</cube-button>
4+
</cube-button-group>
5+
</template>
6+
7+
<script>
8+
import { createComponent } from '@mpxjs/core'
9+
10+
createComponent({})
11+
</script>
12+
13+
<script type="application/json">
14+
{
15+
"usingComponents": {
16+
"view-desc": "../../components/desc/index",
17+
"cube-button-group": "@mpxjs/mpx-cube-ui/src/components/button-group/index",
18+
"cube-button": "@mpxjs/mpx-cube-ui/src/components/button/index"
19+
}
20+
}
21+
</script>

‎demo/new-pages/button-group1/button-group-two.mpx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<cube-button-group direction="horizontal">
3+
<cube-button class="btn-item">取消按钮</cube-button>
4+
<cube-button class="btn-item" primary>确认按钮</cube-button>
5+
</cube-button-group>
6+
</template>
7+
8+
<script>
9+
import { createComponent } from '@mpxjs/core'
10+
11+
createComponent({})
12+
</script>
13+
14+
<style scoped lang="stylus">
15+
.btn-item
16+
flex: 1
17+
margin-bottom 15px
18+
&:last-child
19+
margin-left: 10px
20+
</style>
21+
22+
<script type="application/json">
23+
{
24+
"usingComponents": {
25+
"view-desc": "../../components/desc/index",
26+
"cube-button-group": "@mpxjs/mpx-cube-ui/src/components/button-group/index",
27+
"cube-button": "@mpxjs/mpx-cube-ui/src/components/button/index"
28+
}
29+
}
30+
</script>

‎demo/new-pages/button-group1/button-group-vertical-two.mpx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<cube-button-group class="btn-wrapper">
3+
<cube-button class="btn-item">取消按钮</cube-button>
4+
<cube-button class="btn-item" primary>确认按钮</cube-button>
5+
</cube-button-group>
6+
</template>
7+
8+
<script>
9+
import { createComponent } from '@mpxjs/core'
10+
11+
createComponent({})
12+
</script>
13+
14+
<style lang="stylus">
15+
.btn-item
16+
margin-bottom 15px
17+
</style>
18+
19+
<script type="application/json">
20+
{
21+
"usingComponents": {
22+
"view-desc": "../../components/desc/index",
23+
"cube-button-group": "@mpxjs/mpx-cube-ui/src/components/button-group/index",
24+
"cube-button": "@mpxjs/mpx-cube-ui/src/components/button/index"
25+
}
26+
}
27+
</script>

‎demo/new-pages/button-group1/button-group-with-context.mpx

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<view class="button-groupwith-context-demo">
3+
<cube-button-group direction="horizontal">
4+
<view class="button-groupwith-title">图文结合示例</view>
5+
<cube-button inline>操作</cube-button>
6+
</cube-button-group>
7+
</view>
8+
</template>
9+
10+
<script>
11+
import { createComponent } from '@mpxjs/core'
12+
13+
createComponent({
14+
options: {
15+
addGlobalClass: true,
16+
styleIsolation: 'shared'
17+
}
18+
})
19+
</script>
20+
21+
<style lang="stylus">
22+
.button-groupwith-context-demo
23+
.cube-button-group
24+
display flex
25+
padding 20px 25px
26+
box-sizing border-box
27+
background-color #fff
28+
justify-content space-between
29+
align-items center
30+
border-radius 8px
31+
.button-groupwith-title
32+
line-height 27px
33+
font-size 21px
34+
color #282828
35+
.cube-btn
36+
padding 8px 26px
37+
font-size 16px
38+
line-height 24px
39+
</style>
40+
41+
<script type="application/json">
42+
{
43+
"styleIsolation": "shared",
44+
"usingComponents": {
45+
"view-desc": "../../components/desc/index",
46+
"cube-button-group": "@mpxjs/mpx-cube-ui/src/components/button-group/index",
47+
"cube-button": "@mpxjs/mpx-cube-ui/src/components/button/index"
48+
}
49+
}
50+
</script>

‎demo/new-pages/button-group1/index.mpx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<base-container class="button-group-demo">
3+
<view-desc>水平排列</view-desc>
4+
<button-group-two />
5+
<view-desc>垂直排列</view-desc>
6+
<button-group-vertical-two />
7+
<view-desc>图文结合</view-desc>
8+
<button-group-with-context />
9+
</base-container>
10+
</template>
11+
12+
<script>
13+
import { createPage } from '@mpxjs/core'
14+
15+
createPage({})
16+
</script>
17+
18+
<style lang="stylus">
19+
.button-group-demo
20+
padding-left 0 !important
21+
padding-right 0 !important
22+
</style>
23+
24+
<script type="application/json">
25+
{
26+
"usingComponents": {
27+
"base-container": "../../components/base-container/index",
28+
"view-desc": "../../components/desc/index",
29+
"button-group-one": "./button-group-one",
30+
"button-group-two": "./button-group-two",
31+
"button-group-vertical-two": "./button-group-vertical-two",
32+
"button-group-with-context": "./button-group-with-context"
33+
}
34+
}
35+
</script>

‎demo/new-pages/button1/README.md

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
# Cube-Button 按钮
2+
3+
## 介绍
4+
5+
<card>
6+
7+
操作按钮，提供了不同的样式、状态以及小程序的按钮功能，常用于触发一个点击操作。
8+
9+
</card>
10+
11+
## 示例
12+
13+
<card>
14+
15+
### 样式
16+
17+
除了默认样式外，可以通过设置 `primary`、`bolder` 、`outline`、`inline`、<!-- @theme: passenger -> start -->`light`<!-- @theme: passenger -> end -->属性来改变按钮的样子，也可以组合多重属性呈现不同的效果。
18+
19+
<!-- @group: btns -> start -->
20+
21+
<!-- @example: btn-secondary -> template no-wrap -->
22+
<!-- @example: btn-primary -> template no-wrap -->
23+
<!-- @example: btn-bolder -> template no-wrap @code-block:name-->
24+
<!-- @example: btn-outline -> template no-wrap -->
25+
<!-- @example: btn-inline -> template no-wrap -->
26+
<!-- @example: btn-light -> template no-wrap -->
27+
<!-- @example: btn-outline-primary -> template no-wrap -->
28+
<!-- @example: btn-inline-outline -> template no-wrap -->
29+
<!-- @example: btn-inline-primary -> template no-wrap -->
30+
<!-- @example: btn-secondary-active -> template no-wrap @code-block:first-->
31+
32+
<!-- @group: btns -> end -->
33+
34+
</card>
35+
36+
<card>
37+
38+
### 状态
39+
40+
除了默认的正常状态，还可以设置激活、禁用<!-- @theme: passenger -> start -->以及加载中<!-- @theme: passenger -> end -->等状态。
41+
42+
<!-- @group: btns -> start -->
43+
44+
<!-- @example: btn-secondary-active -> template no-wrap -->
45+
<!-- @example: btn-disabled -> template no-wrap -->
46+
47+
<!-- @group: btns -> end -->
48+
49+
<!-- @theme: passenger -> start --><!-- @example: btn-loading --><!-- @theme: passenger -> end -->
50+
51+
</card>
52+
53+
<card>
54+
55+
### 图标<!-- @theme: passenger -> start -->、辅助文案<!-- @theme: passenger -> end -->
56+
57+
可以设置 Icon 的 class，具体可以查看Icon demo。
58+
59+
<!-- @theme: passenger -> start -->可以设置 Tip 属性添加辅助文案。<!-- @theme: passenger -> end -->
60+
61+
- With Icon 按钮
62+
<!-- @example: btn-icon -> template no-wrap -->
63+
64+
<!-- @theme: passenger -> start -->
65+
- With Tip 按钮
66+
<!-- @example: btn-with-tip -> template no-wrap -->
67+
<!-- @theme: passenger -> end -->
68+
69+
</card>
70+
71+
<card>
72+
73+
### 功能
74+
75+
可以通过设置 `openType`、`formType` 等属性，使用小程序的功能并绑定回调。详情参阅[微信 Button 文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)以及[支付宝 Button 文档](https://opendocs.alipay.com/mini/component/button)。使用方式如：
76+
77+
- 分享（微信、支付宝）
78+
<!-- @example: btn-share -> template no-wrap -->
79+
80+
- 获取用户手机号（微信、支付宝）
81+
82+
微信设置 `open-type` 为 `getPhoneNumber`；支付宝设置 ` open-type` 为 `getAuthorize`，设置 `scope` 为 `phoneNumber`。
83+
84+
由于涉及用户隐私，手机号的获取需要满足一定的条件，详情参见[微信小程序获取手机号](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html)以及[支付宝小程序获取手机号](https://opendocs.alipay.com/mini/api/getphonenumber)。
85+
86+
<!-- @example: btn-get-phone-number -> template no-wrap -->
87+
88+
- 获取用户信息（微信、支付宝）
89+
90+
微信设置 `open-type` 为 `getUserInfo`；支付宝设置 ` open-type` 为 `getAuthorize`，设置 `scope` 为 `userInfo`。
91+
92+
功能使用有一定的限制，详情参见[支付宝小程序获取基础信息](https://opendocs.alipay.com/mini/api/ch8chh)。
93+
94+
<!-- @example: btn-get-user-info -> template no-wrap -->
95+
96+
- 打开授权设置页面（微信、支付宝）
97+
<!-- @example: btn-open-setting -> template no-wrap -->
98+
99+
- 打开客服会话（微信）
100+
<!-- @example: btn-contact -> template no-wrap -->
101+
102+
- 获取用户头像（微信）
103+
<!-- @example: btn-choose-avatar -> template no-wrap -->
104+
105+
- 打开 APP（微信）
106+
<!-- @example: btn-launch-app -> template no-wrap -->
107+
108+
- 关注生活号（支付宝）
109+
<!-- @example: btn-follow-lifestyle -> template no-wrap -->
110+
111+
</card>

‎demo/new-pages/button1/btn-bolder.mpx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<cube-button bolder>粗体文字</cube-button>
3+
</template>
4+
5+
<script>
6+
import { createComponent } from '@mpxjs/core'
7+
8+
createComponent({})
9+
</script>
10+
11+
<script type="application/json">
12+
{
13+
"usingComponents": {
14+
"cube-button": "@mpxjs/mpx-cube-ui/src/components/button/index"
15+
}
16+
}
17+
</script>

‎demo/new-pages/button1/btn-choose-avatar.mpx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<cube-button
3+
open-type="chooseAvatar"
4+
tip="需在微信小程序环境预览"
5+
bind:chooseAvatar="onChooseAvatar"
6+
>获取头像</cube-button>
7+
</template>
8+
9+
<script>
10+
import { createComponent } from '@mpxjs/core'
11+
12+
createComponent({
13+
methods: {
14+
onChooseAvatar(e) {
15+
console.log('onChooseAvatar...', e && e.detail, e)
16+
}
17+
}
18+
})
19+
</script>
20+
21+
<script type="application/json">
22+
{
23+
"usingComponents": {
24+
"cube-button": "@mpxjs/mpx-cube-ui/src/components/button/index"
25+
}
26+
}
27+
</script>

0 commit comments

Comments
 (0)