mpx-cube-ui

# Cube-Button-Group 按钮组

# 介绍

按钮组合容器，提供内部排列方向配置，常用于包裹一组具有关联性的按钮及内容。

# 示例

# 水平排列

通过设置direction="horizontal"将按钮水平排列。

收起 
<cube-button-group direction="horizontal">
  <cube-button class="btn-item">取消按钮</cube-button>
  <cube-button class="btn-item" primary>确认按钮</cube-button>
</cube-button-group>
1
2
3
4
收起 
<style scoped lang="stylus">
.btn-item
  flex: 1
  margin-bottom 15px
  &:last-child
    margin-left: 10px
</style>
1
2
3
4
5
6
7

# 垂直排列

按钮组的默认排列顺序为垂直排列。

收起 
<cube-button-group class="btn-wrapper">
  <cube-button class="btn-item">取消按钮</cube-button>
  <cube-button class="btn-item" primary>确认按钮</cube-button>
</cube-button-group>
1
2
3
4

# 图文结合

我们也可以在一行文字中插入按钮来实现图文混排效果。

收起 
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# Props

参数 说明 类型 可选值 默认值
themeType 用于生成最外层类名 如原类名为 cube-component，添加 themeType = demo 后，类名变为 cube-component cube-component-demo String - -
direction 按钮方向 String vertical/horizontal ButtonGroupDirection.VERTICAL

# Slots

插槽名 说明
— (默认插槽) -

← Icon 图标 →