@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> | 用于变更按钮的禁用状态 | | btnVisible | Observable<Array> | 用于变更按钮的可见状态 |

事件说明

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

数据类型

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