Primeng中一些组件的格式调整以及css设置

个人觉得primeng提供了很多比较好看的组件,包括输入框input、表格table、按钮button、交互框dialog等等,样式要比angular material好看一些,也比较好上手,官网提供了很多示例代码以及参数的使用说明。

但是某些组件的元素样式说明可能没有很直接,所以想开这篇文章,介绍一下我在使用其中一些组件时遇到的问题,以及对应的解决方案,包括一些内部元素的css设置。

multiselect / multi-select

options绑定的变量发生变化

虽然官网文档中options中可以传入selectedItem类变量,也可以传入自定义的类变量,但是只有使用selectedItem时才能检测到变量在其他地方的更新。

选择项获取: 判断选中项的变化

可以通过ngModel进行双向绑定,也可以通过$event.value获得当前被选择的item list。

如何判断何时选中项发生了变化以及变化了什么: onChange能够检测变化,只要选中项发生变化就会触发onChange。这样绑定一个操作(onChange)=”changeOperation($event)”就可以在有变化时进行函数调用,$event.value获得当前所有被选择的item_list,\$event.itemValue可以获得当前操作 (选中或者取消选中) 的item,通过item_list.includes(item)就可以判断当前操作到底是选中操作还是取消操作。

数据item list样式设置

例如:原本默认下拉框中展示的是string字符串,options中提供所有可选列表,那如果我们想根据options中的数据重新设计一些样式,例如调整颜色等,可以使用ng-template指定pTemplate=”item”,即可对每个option进行样式设计,如:

<p-multiSelect defaultLabel="Tags" [dropdownIcon]="dropDownIcon" class="multiselect" [options]="items" [(ngModel)]="selectedItems" name="selectedItems" maxSelectedLabels=0 [panelStyle]="{minWidth:'12em'}" scrollHeight="100px">
      <ng-template let-item  pTemplate="item">
        <span style="color:#e78d75">
          {{item.label}}
        span>
      ng-template>
p-multiSelect>

上面的代码中还有一些比较有用的参数:

  • defaultLabel: 没有任何item选中时多选框中显示的文字
  • dropdownIcon: 下拉按钮的icon显示,可以自己使用string变量定义,例如使用fontawesome中的图片
  • maxSelectedLabels: 数值设置,当选中的item个数大于这个值时,多选框中就显示”x items selected”,小于等于这个值时会将选中的item label展示在多选框中。如果想要一有item被选中就开始显示”1 items selected”,这个数值应该设置为0
  • scrollHeight:用于设置下拉框高度大于多少时开始使用scroll bar,如果不设置则默认一直展示全量的列表
局部css设置
  • 设置下拉框面板背景色为白色而不是透明
.ui-multiselect-panel .ui-multiselect-items-wrapper{
  background: white !important;
}
  • 设置多选框宽度、高度、和其他组件齐平、边框
.ui-multiselect {
  width: 120px !important;
  height: 22px !important;
  display: inline-flex !important;
  background: white !important;
  border: ridge 1px lightgray !important;
}
  • 设置多选框背景为白色,而不是透明色
.ui-multiselect ui-state-default{
  background: white !important;
}
  • 设置下拉按钮的背景色:默认为透明色,如果想要和显示框一样为白色,可以设置为
.ui-multiselect-trigger{
  background: white !important;
}

accordion

点击某个tab时触发数据请求
<p-accordion (onOpen)="getDataByIndex($event.index)">
p-accordion>

使用onOpen可以触发这个事件来调用对应的函数,函数中可以传入参数$event.index,通过参数可以知晓这是折叠项中的第几个。

设置折叠栏上的显示

简单情况下,通过

<p-accordion header={{headerName}}>
p-accordion>

可以将某个string变量设置为折叠栏的头部显示,但有时候我们需要添加更多的信息,有可能不只是字符串那么简单,这时我们可以使用p-header进行操作

<p-accordionTab *ngFor="let businessRuleName of businessRuleGroup.bsnsNameList">
   <p-header>
        
        {{headerName}}
        <button....>button>
   p-header>
p-accordionTab>
可变的折叠栏数目

最简单的accordion使用方法为

<p-accordion>
    <p-accordionTab header="Header 1">
       Content 1
    </p-accordionTab>
    <p-accordionTab header="Header 2">
        Content 2
    </p-accordionTab>
    <p-accordionTab header="Header 3">
        Content 3    
    </p-accordionTab>
</p-accordion>

但是很多时候我们需要动态控制其中的内容,这时我们就要使用ngFor的功能

<p-accordion>
    <p-accordionTab *ngFor="let item of items" header={{item.header}}>
       item.content
    p-accordionTab>
p-accordion>

notice: 注意这里的for循环需要放在p-accordionTab层级,而不是p-accordion层级。这是我犯的一个错误,这就造成点开一个折叠项时本来展开的折叠项不会自动收缩。原因就是,把for循环放在p-accordion会造成其实开了很多个accordion项,而每个项中只有一个折叠项,也就是说每个项之间相互独立。

turbo table / p-table

获取操作对应的行号
let-rowIndex="rowIndex"

input

将输入框改为圆角
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;

你可能感兴趣的:(前端开发)