lighting-ui/packages/lc-button-group/README.md

A rich interaction, lightweight, high performance UI library based on Weex

# lc-button-group

> 按钮组

## Code Example

```vue
<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
<template>
  <div class="wxc-demo">
    <scroller class="scroller">
      <title title="wxc-lc-fold-list"></title>
      <category title="按钮组"></category>

      <lc-button-group :buttons="buttons"></lc-button-group>
    </scroller>
  </div>
</template>

<style scoped>
  .wxc-demo {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #fff;
  }

  .scroller {
    flex: 1;
  }
</style>

<script>
  import Title from '../_mods/title.vue';
  import Category from '../_mods/category.vue';
  import  LcButtonGroup from '../../packages/lc-button-group';
  import { setTitle } from '../_mods/set-nav';

  export default {
    components: { Title, Category, LcButtonGroup },
    data(){
      return {buttons:[
          {
            icon:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABO0lEQVRIS8WVjU0CQRBGHxWoFSgdaAXaidqBdmAHUoJUglagHQgdQAWahzNmuSzHHhfjJmSTZebt/Ox8N+FnnQLPwA1wEWdDtyXwCjwC60lAP2MfCqvZr4Gp4BfgNixWgDcfs8z0PBznggV5IPTSNI6hRsYfwVoK/grQW9T4rsgg77BuOmU/zPKkCGAemVvja89r4N8/w/E+nMpEzEy7hJv1NM6awDVoXtCFG2RTxH3QGrwJbA39tayM3FnojVjDbFQLWJv06QW3wmp2/wP+s1KYztDmLYCzQ83LOrU+N6G+iKbntp0e4NCAJDSnuGlAsuv7RrqEKmCqWy9YEXoqJLAbuc3tQrW3LzvglE33q5Gy+R6Rr7pCL3yM0OdnbSv0dlRYqa9jpm9j1IJTvGch9Pl5GQq3gdb4wXJ+A9ajbiiJ+hMjAAAAAElFTkSuQmCC',
            text:'测试按钮1',
            clicked(){
              console.log('测试按钮1')
            }
          },
          {
            icon:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABO0lEQVRIS8WVjU0CQRBGHxWoFSgdaAXaidqBdmAHUoJUglagHQgdQAWahzNmuSzHHhfjJmSTZebt/Ox8N+FnnQLPwA1wEWdDtyXwCjwC60lAP2MfCqvZr4Gp4BfgNixWgDcfs8z0PBznggV5IPTSNI6hRsYfwVoK/grQW9T4rsgg77BuOmU/zPKkCGAemVvja89r4N8/w/E+nMpEzEy7hJv1NM6awDVoXtCFG2RTxH3QGrwJbA39tayM3FnojVjDbFQLWJv06QW3wmp2/wP+s1KYztDmLYCzQ83LOrU+N6G+iKbntp0e4NCAJDSnuGlAsuv7RrqEKmCqWy9YEXoqJLAbuc3tQrW3LzvglE33q5Gy+R6Rr7pCL3yM0OdnbSv0dlRYqa9jpm9j1IJTvGch9Pl5GQq3gdb4wXJ+A9ajbiiJ+hMjAAAAAElFTkSuQmCC',
            text:'测试按钮2',
            clicked(){
              console.log('测试按钮2')
            }
          }
          ,
          {
            icon:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABO0lEQVRIS8WVjU0CQRBGHxWoFSgdaAXaidqBdmAHUoJUglagHQgdQAWahzNmuSzHHhfjJmSTZebt/Ox8N+FnnQLPwA1wEWdDtyXwCjwC60lAP2MfCqvZr4Gp4BfgNixWgDcfs8z0PBznggV5IPTSNI6hRsYfwVoK/grQW9T4rsgg77BuOmU/zPKkCGAemVvja89r4N8/w/E+nMpEzEy7hJv1NM6awDVoXtCFG2RTxH3QGrwJbA39tayM3FnojVjDbFQLWJv06QW3wmp2/wP+s1KYztDmLYCzQ83LOrU+N6G+iKbntp0e4NCAJDSnuGlAsuv7RrqEKmCqWy9YEXoqJLAbuc3tQrW3LzvglE33q5Gy+R6Rr7pCL3yM0OdnbSv0dlRYqa9jpm9j1IJTvGch9Pl5GQq3gdb4wXJ+A9ajbiiJ+hMjAAAAAElFTkSuQmCC',
            text:'测试按钮3',
            clicked(){
              console.log('测试按钮3')
            }
          }
        ]}
    },
    methods:{
      btnClicked(btn){
      }
    }
  }
</script>

```