@farris/ui-response-toolbar
TypeScript icon, indicating that this package has built-in type declarations

0.1.29 • Public • Published

@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,是否隐藏

Readme

Keywords

none

Package Sidebar

Install

npm i @farris/ui-response-toolbar

Weekly Downloads

9

Version

0.1.29

License

none

Unpacked Size

856 kB

Total Files

35

Last publish

Collaborators

  • lvjiabiao
  • lijiangkun
  • muyi-s
  • wangjinzhe
  • cassiel19
  • zhangqian09
  • volibear
  • hog-rider
  • castint
  • jiweitao1986
  • chenshj
  • hxling
  • ximena
  • wang-xh
  • huyuyang
  • courage007
  • liwftr
  • testqq
  • guozhiqi
  • tsing-y
  • zhuorujing
  • aalizzwell
  • gibbonnet
  • max.wang
  • npm407949480
  • toxiic
  • douck
  • yee-xing