Question

在文档中，有一个类似于以下示例：

Nav with a separator between header actions.

但是我一辈子都无法弄清楚分隔符是如何添加的，并且页面上的代码示例都没有显示该示例。

任何帮助将不胜感激，谢谢。

Answer 1

我不确定来自哪个演示（提供链接以确保我可以看到它的内容会有所帮助）。但是，某些元素会自动添加它，而不是将其显式定义为独立元素，例如第一个.header .header-nav .nav-link元素将使用::before CSS选择器放置该行。如果您需要明确放置某些内容，则必须自己添加。

Answer 2

看到提供的示例时，我遇到了同样的问题。读取源代码时，只会为 .header-nav 元素（https://github.com/vmware/clarity/blob/master/src/clr-angular/layout/nav/_header.clarity.scss）定义分隔符，而不会为 .header-actions 定义分隔符。

不过，您可以通过以下方式自定义 .header-actions .nav-link ：

@import "../node_modules/@clr/ui/src/utils/components.clarity";
@import 'node_modules/@clr/ui/src/layout/nav/header.clarity';

.header-actions {
    &:last-child {
        & > .nav-link:last-child::after {
          content: none;
        }
      }

      .nav-link {
        &:last-of-type {
          position: relative;
        }

        &::after {
          @include header-section-divider();
          left:auto;
          right:0;
        }

        &:last-of-type::after {
          left: 0;
        }

        &.active:last-of-type::after {
          content: none;
        }
      }   
}

如何在导航头动作之间添加分隔符？

2 个答案: