发表于: 2017-06-03 22:18:37
0 1073
2017-06-03 Day074
今天完成的事情
引入ngx-bootstrap
UI框架,引入是没有问题的,但是使用的时候一堆问题。天知道怎么回事。
明天计划的事情
解决bug
遇到的问题
安装官网的流程引入ngx-bootstrap
,引入手风琴插件,然后,在增添样式,样式是通过属性绑定来实现的:
<accordion-group class="top-nav"*ngFor="let first of mainList"[panelClass]="customClass" //属性绑定为customClass[isOpen]="isFirstOpen"#group><div accordion-heading>{{first.name}}<i class="pull-right float-xs-right glyphicon"[ngClass]="{'glyphicon-chevron-down': group?.isOpen, 'glyphicon-chevron-right': !group?.isOpen}"></i></div><p *ngFor="let second of first.list"(click)="listInfo(first.tableId, second.listId)">{{second.name}}</p></accordion-group></accordion>
这个是昨天的列表改写的,
在组件中这样
public customClass: string = 'mainNav';
样式文件
.card.mainNav,.card.mainNav .card-header,.panel.mainNav {background: #5bc0de;}.panel.mainNav .panel-body {background-color: #337aa7;}
然后并没有什么效果。可能哪里搞错了。。。找不出来崩溃。
请教了一下大师兄,大师兄这样说,样式也是有作用域的,
:host /deep/ .panel {color: #ffffff;background-color: transparent;}
这样写就成。。太牵强,水有点深,
收获
组件大概是知道怎们引入了,剩下的东西慢慢摸索吧。
评论