Как добавить разделитель между заголовочными действиями nav?

Question

В документации есть пример, который выглядит так:

Nav с разделителем между действиями заголовка.

Но я не могу понять, как добавляется разделитель, и ни один из примеров кода на странице не показывает такого примера.

Любая помощь будет оценена, спасибо.

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;
        }
      }   
}