我可以使用 Clarity 将 headers 嵌套在堆栈视图中吗

Question

在 Clarity 2 中，我们使用以下代码生成具有嵌套块 headers 的堆栈视图。

<clr-stack-view>
    <clr-stack-block [clrSbExpanded]="true">
        <clr-stack-label>Leases</clr-stack-label>
        <clr-stack-block [clrSbExpanded]="true">
            <clr-stack-label>vApp leases</clr-stack-label>
            <clr-stack-content></clr-stack-content>
            <clr-stack-block>
                <clr-stack-label>Runtime expiry action</clr-stack-label>
                <clr-stack-content>Never expires</clr-stack-content>
            </clr-stack-block>
            <clr-stack-block>
                <clr-stack-label>Runtime Expiry Action</clr-stack-label>
                <clr-stack-content>Content</clr-stack-content>
            </clr-stack-block>
        </clr-stack-block>
    </clr-stack-block>
</clr-stack-view>

升级到 Clarity 3 后，我的 sub header 出现了一个小故障，它的右边部分是白色而不是背景颜色。

这似乎是因为以下 CSS 规则。我可能可以解决它...

.stack-view .stack-children .stack-block-label, .stack-view .stack-children .stack-block-content {
    background-color: #fff;
    background-color: var(--clr-stack-view-stack-children-stack-block-label-and-content-bg-color, white);
}

问题是这是否是一个错误？或者我只是在 Clarity 2 中使用不受支持的行为？你可以play with it here

Answer 1

我不能说它是否是一个错误，但下面的 CSS 覆盖修复了它。

.stack-view .stack-children .stack-block-content {
  background-color: inherit;
}

此外，如果我完全删除该样式声明（从开发工具中），一切似乎都可以正常工作，因此该规则似乎被错误地留在那里以试图确保 clr-stack-content|label 是白色的在 body。见鬼如果我知道...

见https://stackblitz.com/edit/stack-view-nested-header-fixed?file=src%2Findex.html

我可以使用 Clarity 将 headers 嵌套在堆栈视图中吗

Can I nest headers in a stackview using Clarity

stackview

vmware-clarity