Action Bar 操作栏

使用指南

位于底部操作栏，提供当前页面的重点信息与操作按钮。

仅包含布局结构，可以组合如 h3-button 等其他组件来使用

与thinking-ui 2.0版组件的区别以及迁移

新增组件

代码演示

查看代码

<template>
  <div class="demo-button-list">
    <div class="demo-button-list">
      <p class="info-title">
        基本
      </p>
      <h3-action-bar>
        <h3-button type="primary">
          主要按钮
        </h3-button>
      </h3-action-bar>

      <p class="info-title">
        按钮组合
      </p>
      <h3-action-bar>
        <h3-button> 次要按钮 </h3-button>
        <h3-button type="primary">
          主要按钮
        </h3-button>
      </h3-action-bar>

      <h3-action-bar>
        <h3-button> 按钮1 </h3-button>
        <h3-button type="primary">
          按钮2
        </h3-button>
        <h3-button type="primary">
          按钮3
        </h3-button>
      </h3-action-bar>

      <p class="info-title">
        文字按钮组合
      </p>
      <h3-action-bar divide>
        <h3-button> 操作按钮 </h3-button>
      </h3-action-bar>

      <h3-action-bar divide>
        <h3-button> 操作按钮 </h3-button>
        <h3-button> 操作按钮 </h3-button>
      </h3-action-bar>

      <h3-action-bar divide>
        <h3-button> 操作按钮 </h3-button>
        <h3-button> 操作按钮 </h3-button>
        <h3-button type="primary" ghost>
          操作按钮
        </h3-button>
      </h3-action-bar>
    </div>
  </div>
</template>

<script>
import H3ActionBar from '@/components/h3-action-bar';
import H3Button from '@/components/h3-button';

export default {
  name: 'ActionBar',
  components: {
    H3Button,
    H3ActionBar,
  },
  data () {
    return {};
  },
  mounted () {},
};
</script>

<style lang="less" scoped>
.demo-button-list {
  padding: 0 8px;
  background: #f2f2f2;
  .h3think-action-bar {
    margin-bottom: 10px;
    button {
      margin-bottom: 0;
    }
  }
  button {
    margin-bottom: 10px;
  }
}
.demo-button-item {
  margin-right: 4px;
  margin-bottom: 4px;
}
.demo-button-group {
  padding: 0 8px;
  background: #eee;
}
p {
  font-weight: 600;
  font-size: 16px;
  padding: 15px;
}
.float-btn {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  box-shadow: 0 2px 12px 0 rgba(18, 25, 51, 0.1);
}
</style>

Prop

参数	说明	类型	默认值
divide	是否需要显示分割线	boolean	false