Question

我正在使用https://github.com/czeckd/angular-dual-listbox，它就像一个魅力。但是，我需要隐藏添加/删除按钮，但我还没能。该组件缺乏此功能，因此作者建议通过css完成此操作。我试着这样做，但失败了。这是我的css：

button.btn-block {
    display: none !important;
}

我做了这个，为了覆盖以下内容（因此＆＃39;！important＆＃39;）：

button.btn-block {
    display: block;
    width: 100%;
    margin-bottom: 8px;
}

包含在https://github.com/czeckd/angular-dual-listbox/blob/master/lib/src/dual-list.component.css中。我错过了什么吗？

Answer 1

好吧，我终于得到了答案。我问作者，他帮助我了，你可能会在这里看到：https://github.com/czeckd/angular-dual-listbox/issues/36

我花了一段时间才弄清楚“app的基本风格”是什么意思。我最终创建了一个名为“hide.scss”的文件，其中包含他提供的行，在新文件夹“/ src / assets / scss / core / dual-list-box”

hide.scss

div.dual-list div.listbox button[name=addBtn],
div.dual-list div.listbox button[name=removeBtn],
div.dual-list div.listbox div.button-bar {
 display: none;
}

我从file2.scss引用它，它位于“/ src / assets”中，如下所示：

@import "core/dual-list-box/hide";

最后，file2.scss需要包含在.angular-cli.json文件中的“styles”中：

"styles": [
    "styles.scss",
    "./assets/scss/file2.scss"
  ],

嗯，这就是它。希望它可以帮到某人。

Answer 2

好吧，我在组件的scss文件中使用了以下内容，并将其放入了双重列表。密钥为:host ::ng-deep。然后，将添加和删除按钮的样式和样式设置为位于两列之间的中间。

<div class="row margin-bottom-25px">
   <div class="col-xs-12">
      <dual-list [source]="source" [(destination)]="confirmed" [key]="key" [display]="display" height="500px"></dual-list>
   </div>
</div>

:host ::ng-deep {
  .point-right {
    position: absolute;
    bottom: 275px;
    width: 115px !important;
    left: calc(50% - 58px);
  }
  .point-left {
    position: absolute;
    bottom: 210px;
    width: 115px !important;
    left: calc(50% - 58px);
  }

  div.record-picker::-webkit-scrollbar-thumb, .record-picker li:first-child, .record-picker li:last-child {
    border-radius: 0 !important;
  }

  .dual-list {
    > .listbox {
      width: calc(100% - 65px) !important;
      > .record-picker {
        width: calc(100% - 65px);
        border: 2px solid #000000;
        border-radius: 0;
        cursor: default;
      }
      &:nth-child(2) > .record-picker {
        float: right;
      }
    }
    .button-bar {
      display: none;
    }
  }
}

angular-dual-listbox - 隐藏按钮

2 个答案: