Question

我刚刚从以下网址中添加了AngularMultiSelectModule

https://www.npmjs.com/package/angular2-multiselect-dropdown

我在一年中的月份中填充了下拉控件，但没有应用演示页面上显示的主题。

我了解到需要添加default.theme.css。我将css内容复制并粘贴到了角度组件.scss文件中，但仍然没有。我什至将default.theme.css复制到了该文件夹，但仍然无法使用。

我阅读了步骤，并复制了它们的代码，但尚未成功。在下拉菜单中，我看到演示代码具有“ myclass自定义类”，但不确定如何使它工作到现在。

到目前为止，这是我的代码。任何帮助表示赞赏。谢谢。

HTML：

TS：

this.dropdownList = [
      {"id":1,"itemName":"January"},
      {"id":2,"itemName":"Febuary"},
      {"id":3,"itemName":"March"},
      {"id":4,"itemName":"April"},
      {"id":5,"itemName":"May"},
      {"id":6,"itemName":"June"},
      {"id":7,"itemName":"July"},
      {"id":8,"itemName":"August"},
      {"id":9,"itemName":"September"},
      {"id":10,"itemName":"October"},
      {"id":11,"itemName":"November"},
      {"id":12,"itemName":"December"}
    ];
    this.selectedMonths = this.dropdownList;

    this.dropdownSettings = { 
          singleSelection: false, 
          text:"Select Months",
          selectAllText:'Select All',
          unSelectAllText:'UnSelect All',
          enableSearchFilter: true,
          classes:"myclass custom-class"
        };

我将以下内容从default.theme.css复制到了component.scss

.c-btn {
  background: #fff;
  border: 1px solid #ccc;
  color: #333; }

.selected-list .c-list .c-token {
  background: #0079FE; }
  .selected-list .c-list .c-token .c-label {
    color: #fff; }
  .selected-list .c-list .c-token .c-remove svg {
    fill: #fff; }

.selected-list .c-angle-down svg, .selected-list .c-angle-up svg {
  fill: #333; }

.dropdown-list ul li:hover {
  background: #f5f5f5; }

.arrow-up, .arrow-down {
  border-bottom: 15px solid #fff; }

.arrow-2 {
  border-bottom: 15px solid #ccc; }

.list-area {
  border: 1px solid #ccc;
  background: #fff;
  box-shadow: 0px 1px 5px #959595; }

.select-all {
  border-bottom: 1px solid #ccc; }

.list-filter {
  border-bottom: 1px solid #ccc; }
  .list-filter .c-search svg {
    fill: #888; }
  .list-filter .c-clear svg {
    fill: #888; }

.pure-checkbox input[type="checkbox"]:focus + label:before, .pure-checkbox input[type="checkbox"]:hover + label:before {
  border-color: #0079FE;
  background-color: #f2f2f2; }

.pure-checkbox input[type="checkbox"] + label {
  color: #000; }

.pure-checkbox input[type="checkbox"] + label:before {
  color: #0079FE;
  border: 2px solid #0079FE; }

.pure-checkbox input[type="checkbox"] + label:after {
  background-color: #0079FE; }

.pure-checkbox input[type="checkbox"]:disabled + label:before {
  border-color: #cccccc; }

.pure-checkbox input[type="checkbox"]:disabled:checked + label:before {
  background-color: #cccccc; }

.pure-checkbox input[type="checkbox"] + label:after {
  border-color: #ffffff; }

.pure-checkbox input[type="radio"]:checked + label:before {
  background-color: white; }

.pure-checkbox input[type="checkbox"]:checked + label:before {
  background: #0079FE; }

.selected-item {
  background: #e9f4ff; }

.btn-iceblue {
  background: #0079FE;
  border: 1px solid #ccc;
  color: #fff; }

Answer 1

网站指示将其添加到angular.json文件，该文件对我不起作用。我将其添加到全局style.scss文件中，并且可以正常工作。

没有主题应用于Angular代码中的angular2-multiselect-dropdown

1 个答案: