Question

我需要为angular2-multiselect-dropdown添加自定义CSS。我引用了这个链接：https://www.npmjs.com/package/angular2-multiselect-dropdown。我在这里添加了我的代码。请帮我解决这个问题。提前谢谢。

我编码了他们在链接中编码的内容。但不适合我。 HTML页面：

<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<angular2-multiselect [data]="itemList" [(ngModel)]="selectedItems" [settings]="settings" (onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)" (onSelectAll)="onSelectAll($event)" (onDeSelectAll)="onDeSelectAll($event)">

CSS文件需要添加：

.inputField {
border: 0;
outline: 0; 
background: transparent; 
border-bottom: 1px solid #7C7C81;
width: 100%;
margin-bottom: 10px; 
}
.inputField .c-token{
background: #38d574 !important;
}
.inputField .pure-checkbox label::before {
border-color: #38d574 !important;
}
.inputField .pure-checkbox input[type="checkbox"]:checked + 
label[_ngcontent-c1]:before {
background: #38d574 !important;
}

.inputField .c-btn {
border: 0 !important;
outline: 0 !important;  
background: transparent !important; 
border-bottom: 1px solid #7C7C81 !important;
width: 100% !important;
margin-bottom: 10px !important; 
}

.ts文件：

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent implements OnInit {

itemList = [];
selectedItems = [];
settings = {};

constructor() { }

ngOnInit() {

this.itemList = [
 { "id": 1, "itemName": "India" },
  { "id": 2, "itemName": "Singapore" },
  { "id": 3, "itemName": "Australia" },
  { "id": 4, "itemName": "Canada" },
  { "id": 5, "itemName": "South Korea" },
  { "id": 6, "itemName": "Brazil" }
];

this.settings = {
  text: "Select Countries",
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  classes: "myclass inputField"
};
}
onItemSelect(item: any) {
console.log(item);
console.log(this.selectedItems);
}
OnItemDeSelect(item: any) {
console.log(item);
console.log(this.selectedItems);
}
onSelectAll(items: any) {
console.log(items);
}
onDeSelectAll(items: any) {
console.log(items);
}

}

Answer 1

你应该为这个角度组件使用自定义类，你正朝着正确的方向前进：）

问题在于你的风格。配置中定义的自定义类被添加到angular2-multiselect组件中，因此您的样式应如下所示：

.inputField {
    color: #ccc;
}
.inputField .c-token{
    background: #38d574 !important;
}
.inputField .pure-checkbox label::before {
    border-color: #38d574 !important;
}
.inputField .pure-checkbox input[type="checkbox"]:checked + 
 label[_ngcontent-c1]:before {
    background: #38d574 !important;
}

这是文档中的示例，您可以在此处看到：https://cuppalabs.github.io/angular2-multiselect-dropdown/#/styling

如果要更改输入样式，请在scss文件中编写此代码：

.inputField .c-btn {
    border: 0;
    outline: 0; 
    background: transparent; 
    border-bottom: 1px solid #7C7C81;
    width: 100%;
    margin-bottom: 10px; 
}

您应该将样式添加到直接在HTML视图中导入的全局“app.css”文件中。如果通过styleUrls在组件中附加样式，则应熟悉Angular2中的层次结构样式并使用/deep/。因此，如果要将样式附加到组件，样式应该具有：host / deep / selectors，以覆盖DropdownComponent包含的所有组件：

:host /deep/ .inputField .c-btn {
    border: 0;
    outline: 0; 
    background: transparent; 
    border-bottom: 1px solid #7C7C81;
    width: 100%;
    margin-bottom: 10px; 
}

为了快速检查，请在组件中使用此代码：

styles: ['
    :host /deep/ .inputField .c-btn {
        border: 0;
        outline: 0; 
        background: transparent; 
        border-bottom: 1px solid #7C7C81;
        width: 100%;
        margin-bottom: 10px; 
    }
']

而不是

styleUrls: ['./dropdown.component.css']

有关棱角分层组件样式的更多信息，请参阅此处：https://v2.angular.io/docs/ts/latest/guide/component-styles.html

角度2的多选下拉列表

1 个答案: