如何给ngbpopover边框答案

【问题标题】：How to give border to ngbpopover如何给ngbpopover边框
【发布时间】：2020-10-12 05:11:44
【问题描述】：

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

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

【问题讨论】：

标签： popover ng-bootstrap bootstrap-popover

【解决方案1】：

我发现了一些 hack。希望它会帮助你。（将此类添加到 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;
  }

并将相同的类应用于 ngb 弹出框，例如：

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

来自CSS triangle custom border color的参考

【讨论】：

谢谢@mayur kukadiya。你的回答对我很有用。

【解决方案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;
  }

这是我的完整设计。

【讨论】：