如何在 Clarity 中左对齐某些内容 <clr-dg-footer>

Question

我有一个带有分页和过滤器的 Clarity datagrid。我有一些文本想在与分页信息相同的行上左对齐。执行此操作的正确方法是什么？我已经尝试在两个跨度中设置 float: left; 和 float:right;，并使用内置的 "row" class。作为参考，我的页脚看起来像

<clr-dg-footer>
    <span style="width:100%;">Search by value</span>
    <span *ngIf="procs.length>0">
      {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
      of {{pagination.totalItems}}
    </span>

    <clr-dg-pagination #pagination [clrDgPageSize]="10"></clr-dg-pagination>
  </clr-dg-footer>
</clr-datagrid>

这被转换成类似的东西：

<clr-dg-footer _ngcontent-c25="" class="datagrid-foot">
  <div class="datagrid-foot-description">
      1 - 10
      of 103 users
  </div>
  <clr-dg-pagination _ngcontent-c25="" _nghost-c27="">
    <ul _ngcontent-c27="" class="pagination">
        ...
    </ul>
  </clr-dg-pagination>
</clr-dg-footer>

Answer 1

为了给出一般性的解释，页脚在渲染时看起来像这样：

<clr-dg-footer>
    <various-built-in-controls-from-clarity />
    <div class="datagrid-foot-description">
        <!-- Your content goes here -->
    </div>
    <clr-dg-pagination></clr-dg-pagination>
</clr-dg-footer>

页脚本身是一个 flexbox，因此将宽度设置为内容的百分比不会有任何作用。 Clarity 目前没有让您左对齐内容的好方法，您绝对应该在 GitHub 上为其开票，但同时您可以将样式 flex: 1 添加到.datagrid-foot-description 在你的 CSS 中，这将使它在页脚上使用所有可用的 space，然后将你想要的任何样式添加到你自己的内容中，以根据需要显示它。例如，对示例中的两个跨度使用 more flex：

.datagrid-foot-description {
    flex: 1;
    display: flex;
}

.search-by-value {
    flex: 1;
}

这将使页脚说明 "fill" 成为页脚中的空 space，并按值搜索 "fill" 说明。

Answer 2

以下left-aligns页脚内容：

.datagrid-footer {
    justify-content: left !important;
}

如何在 Clarity 中左对齐某些内容 <clr-dg-footer>

How to left-align some content in Clarity <clr-dg-footer>

html

css

vmware-clarity