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

Question

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

<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 中，这将使它占用页脚上的所有可用空间，然后将您想要的任何样式添加到您自己的内容中以根据需要显示它。例如，对示例中的两个跨度使用 more flex:

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

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

这将使页脚描述“填充”页脚中的空白空间，并且按值搜索“填充”描述。