时间戳

首页 > 解决方案 > 添加插入符号的 clr 下拉菜单图标

vmware-clarity - 添加插入符号的 clr 下拉菜单图标

问题描述

我有我的 HTML，它看起来如下：

<div class="col-4 icnContainer">
     <clr-dropdown>
        <button clrDropdownTrigger aria-label="Dropdown demo button">
           <clr-icon shape="ellipsis-vertical"></clr-icon>
        </button>
        <clr-dropdown-menu clrPosition="top-left" *clrIfOpen>
           <div aria-label="Dropdown header Action 1" clrDropdownItem>Action 1</div>
           <div aria-label="Dropdown header Action 2"  clrDropdownItem>Action 2</div>
           <div clrDropdownItem>Link 1</div>
           <div clrDropdownItem>Link 2</div>
        </clr-dropdown-menu>
     </clr-dropdown>
 </div>

我通过这种设置获得的输出如下图所示： 我的输出'

正如您在圆圈中看到的那样，省略号后添加了一个插入符号。我不想要插入符号，我只想要下面的省略号：

在此处输入图像描述

谁能告诉我如何实现这一目标。此外，下拉菜单在包含的 div 内打开，如下所示

在此处输入图像描述

如何让菜单在包含的 div 之外打开。

标签： vmware-clarity

解决方案

要定位菜单，您可以使用以下位置之一：

  1. 右上
  2. 左上方
  3. 右下角
  4. 左下方
  5. 右上角
  6. 右下
  7. 左上
  8. 左下

这是该bottom-right职位的演示：https ://stackblitz.com/edit/so-58030404-dropdown-menu-positioning

我不确定胡萝卜图标来自哪里，您可以分叉并修改 stackblitz 以创建我可以查看的复制品吗？

推荐阅读