如何给 ngbpopover 设置边框

Question

我在 angular 工作，我开了一家 ngbpopover。但我想给它设计中所示的边框。如果有人知道该怎么做，请帮助我。

Currently my design is like this as below. But I want it as per above image.

Answer 1

我找到了一些破解方法。希望它能帮助你。（将此 classes 添加到 ionic 的全局样式中。）

 .my-custom-class {
    background: aliceblue;
    font-size: 125%;
    border: 2px solid black;
  }

  .my-custom-class .arrow:after,
  .my-custom-class .arrow:before {
    content: "";
    display: block;
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    border-style: solid;
  }

  .my-custom-class .arrow:after {
    top: -1px;
    border-color: aliceblue transparent transparent transparent;
    border-width: 10px;
  }

  .my-custom-class .arrow:before {
    top: 0px;
    left: calc(100% - 2px);
    border-color: black transparent transparent transparent;
    border-width: 12px;
  }

并将相同的 class 应用于 ngb popover，如：

<button type="button" class="btn btn-outline-secondary" ngbPopover="Nice class!" popoverClass="my-custom-class"> Popover with custom class

引用自CSS triangle custom border color

Answer 2

这是我问题的完美答案...

    <div class="col text-option border-right-1-white" (click)="openTextColor()"
       [ngbPopover]="colorPopContent" [placement]="['bottom-left', 'top-left']"
         popoverClass="intro-text-color-popover" [autoClose]="'outside'">
    </div>

.intro-text-color-popover {
  background: #0f1934;
  border-radius: 8px;
  max-width: 400px;
  width: 400px;
  border: 2px solid #5d98e1;
}

.intro-text-color-popover .bs-popover-auto[x-placement^=bottom]>.arrow::after,
.bs-popover-bottom>.arrow::after {
  border-bottom-color: #0f1934;
}

.intro-text-color-popover .bs-popover-auto[x-placement^=top]>.arrow::after,
.bs-popover-top>.arrow::after {
  border-top-color: #0f1934;
}

.intro-text-color-popover .bs-popover-auto[x-placement^=bottom]>.arrow::before,
.bs-popover-bottom>.arrow::before {
  top: -14px;
  left: -3px !important;
  border-bottom-color: #5d98e1;
  left: calc(100% - 2px);
  border-width: 11px;
}

.intro-text-color-popover .bs-popover-auto[x-placement^=top]>.arrow::before,
.bs-popover-top>.arrow::before {
  bottom: -13px;
  left: -3px;
  border-width: 11px;
  border-top-color: #5d98e1;
}

.intro-text-color-popover {
    width: 320px;
  }

这是我的完整设计。

如何给 ngbpopover 设置边框

How to give border to ngbpopover

popover

bootstrap-popover

ng-bootstrap