在网格中排列列表项 [英] Arrange list items in grid

问题描述

我想要做的是在带有列的网格中排列列表项(来自绑定).这是我的代码:

<l:GriddefaultSpan="L3 M4 S6"class="sapUiSmallMarginTop"><m:列表模式=无"items="{tickets>children}"><m:HBox><核心:图标大小=2rem"src="sap-icon://circle-task-2"class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom 颜色-绿色"可见="{= ${tickets>status} === '已解决'}"tooltip="{i18n>ticket.status.resolved}"/><核心:图标大小=2rem"src="sap-icon://circle-task-2"class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom 颜色-红色"可见="{= ${tickets>status} === 'open'}"tooltip="{i18n>ticket.status.open}"/><m:VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom"><m:链接text="#{tickets>referenceNumber}"target="{tickets>id}"press="handleChildRecordPress"/><m:Label text="{路径: 'tickets>unitID',格式化程序:'.formatUnit'}"/></m:VBox></m:HBox><m:layoutData><l:GridData span="L12 M12 S12"/></m:layoutData></m:CustomListItem></m:列表></l:网格>

但它每行只显示一个项目，而不是多个.如何连续显示多个项目?

这是现在的样子，我想要的是连续显示 3 或 4 个项目(响应式会很好)

解决方案

UI5 1.60 引入了一个名为 sap.f.GridList
^{来源:https://ui5.sap.com//#/sample/sap.f.sample.GridListBoxContainer/preview}

<小时>

注意: sap.f.GridList 目前依赖于 sap.m、sap.f、和 sap.ui.layout.将它们添加到依赖项列表中，例如在应用程序描述符中，以便这些库可以与其他依赖库异步加载:

"sap.ui5": {依赖关系":{库":{"sap.ui.core": {},"sap.m": {},"sap.f": {},sap.ui.layout":{}}}}

What I want to do is to arrange the list items (coming from a binding) in a grid with columns. Here is my code:

<l:Grid
  defaultSpan="L3 M4 S6"
  class="sapUiSmallMarginTop"
>
  <m:List
    mode="None"
    items="{tickets>children}"
  >
    <m:CustomListItem>
      <m:HBox>
        <core:Icon
          size="2rem"
          src="sap-icon://circle-task-2"
          class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom color-green" 
          visible="{= ${tickets>status} === 'resolved'}"
          tooltip="{i18n>ticket.status.resolved}"
        />
        <core:Icon
          size="2rem"
          src="sap-icon://circle-task-2"
          class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom color-red"
          visible="{= ${tickets>status} === 'open'}"
          tooltip="{i18n>ticket.status.open}"
        />
        <m:VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom">
          <m:Link
            text="#{tickets>referenceNumber}"
            target="{tickets>id}"
            press="handleChildRecordPress"
          />
          <m:Label text="{
            path: 'tickets>unitID',
            formatter: '.formatUnit'
          }"/>
        </m:VBox>
      </m:HBox>
      <m:layoutData>
        <l:GridData span="L12 M12 S12" />
      </m:layoutData>
    </m:CustomListItem>
  </m:List>
</l:Grid>

But it only shows one item per row and not multiple. How can I display multiple items in a row?

This is how it looks now, what I want is to show like 3 or 4 items in a row (responsive would be nice)

解决方案

UI5 1.60 introduces a new control named sap.f.GridList^API that combines functionalities of sap.m.ListBase (e.g. growing) with the ability to display list items in a grid layout (display: grid in CSS internally).

<f:GridList xmlns:f="sap.f"
  class="sapUxAPObjectPageSubSectionAlignContent"
  items="..."
>
  <f:customLayout>
    <cssgrid:GridBoxLayout xmlns:cssgrid="sap.ui.layout.cssgrid" boxesPerRowConfig="XL7 L4 M3 S1" />
  </f:customLayout>
  <f:items>
    <!-- m.CustomListItem, m.StandardListItem, etc.. -->
  </f:items>
</f:GridList>

The custom layout GridBoxLayout^API enables displaying the grid items in a responsive way, which can be configured via boxPerRowConfig and boxMinWidth properties.

^{Source: https://ui5.sap.com/#/sample/sap.f.sample.GridListBoxContainer/preview}

---

Note: sap.f.GridList currently has dependencies to sap.m, sap.f, and sap.ui.layout. Add them to the list of dependencies, e.g. in the app descriptor, so that those libraries can be loaded in parallel with other dependent libs asynchronously:

"sap.ui5": {
  "dependencies": {
    "libs": {
      "sap.ui.core": {},
      "sap.m": {},
      "sap.f": {},
      "sap.ui.layout": {}
    }
  }
}

这篇关于在网格中排列列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！