# @farris/ui-response-toolbar

## 更新记录
-  2020年11月5日
1. 下拉多层级展开时，关闭同层级的其他展开的下拉

-   2019 年 12 月 7 日 
1. 修改绑定窗口变化的方式，支持旧有模板引入
2. 辅助计算宽度的元素样式变化，移除跟滚动相关的变量、置空方法
3. 增加参照父元素属性，用以自动调整下拉菜单方向。
4. 修复下拉菜单同时收起后又同时展开问题

-   2019 年 11 月 18 日 
1. 支持弹出窗口后响应宽度
-   2019 年 10 月 31 日
1. 修改收折后再收缩
-   2019 年 7 月 10 日 
1. 支持按钮是否可见属性
-   2019 年 6 月 28 日 
1. 默认 split 属性重置为 false
-   2019 年 6 月 27 日 
1. 数据变化，位置不能自动响应
-   2019 年 6 月 26 日 
1. 分开下拉响应动作绑定

### 功能

1. 响应所在父元素宽度变化，随着宽度变小，不能完全显示的按钮被収折成下拉，随着宽度变大，从下拉中放出按钮展示；
2. 支持变更按钮的可见状态设置
3. 支持变更按钮的禁用状态设置

#### 引入

```
import { FResponseToolbarModule } from '@farris/ui-response-toolbar';
....
@NgModule({
   declarations:[....],
   imports:[
       ....
       FResponseToolbarModule,
       ....
   ]
})
```

#### HTML 模板

```
<div class="row">
   <div class="col-4">左侧内容区</div>
   <f-response-toolbar
     [datas]="data"
     class="col-8"
     (rtClickEvent)="responseToolbarClick($event)"
     [btnState]="btnDisable"
     [btnVisible]="btnVisible"
   ></f-response-toolbar>
 </nav>
</div>

```

#### 脚本

```
data=[{
            id: 'toolbar-edit',
            text: '编辑',
            class: 'btn-primary',
            disabled: false
        },
        {
            id: 'toolbar-print',
            text: '打印',
            class: 'btn-warning',
            dropdownCls: 'bg-success',
            isDP: true,
            children: [
                {
                    id: 'toolbar-print-online',
                    text: '在线打印'
                },...
            ]}
        ]
// 按钮可见状态
btnVisible = new BehaviorSubject({});
// 按钮禁用状态
btnDisable = new BehaviorSubject({});
....
// 修改按钮禁用状态
 this.btnDisable.next(
    {
     'toolbar-edit': false,
     'toolbar-print-online': false,
    }
);
// 修改按钮可见状态
this.btnVisible.next(
   {
      'toolbar-edit': false,
       'toolbar-print':true,
    }
);
```

## 说明

> 1. f-response-toolbar 必须要有相对宽度
>    菜鸟教程
>    学的不仅是技术更是梦想

## 说明

| 属性名     | 类型                                                  | 描述                   |
| :--------- | :---------------------------------------------------- | ---------------------- |
| datas      | Array<ResponseToolbarItem 或 ResponseToolbarDropDown> | 按钮数据               |
| btnState   | Observable<Array<any>>                                | 用于变更按钮的禁用状态 |
| btnVisible | Observable<Array<any>>                                | 用于变更按钮的可见状态 |

## 事件说明

| 事件名称     | 参数类型                  | 描述                                                 |
| :----------- | :------------------------ | :--------------------------------------------------- |
| rtClickEvent | ResponseToolbarClickEvent | 点击按钮时抛出事件，单纯点击下拉按钮是不会抛出事件的 |

## 数据类型

| 类型名称                  | 属性                                                                                                                                                                                                                                                                                                                   |
| :------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ResponseToolbarItem       | id:string,按钮 ID;<br />text:string,按钮文字;<br />class:string,按钮追加的样式;<br />disabled:boolean,按钮是否禁用<br />hidden:string,按钮是否隐藏                                                                                                                                                                     |
| ResponseToolbarDropDown   | id:string,按钮 ID;<br />text:string,按钮文字;<br />class:string,按钮追加的样式;<br />disabled:boolean,按钮是否禁用;<br />hidden:boolean,按钮是否隐藏;<br />isDP:boolean,按钮是否是下拉按钮;<br />children:Array 类型是 ResponseToolbarItem 或 ResponseToolbarDropDown 下拉按钮的子按钮，可以是普通按钮也可以是下拉按钮 |
| ResponseToolbarClickEvent | id:string,按钮 ID;<br />text:string,按钮文字;<br />hidden:boolean,是否隐藏                                                                                                                                                                                                                                             |