Question

我想创建一个这样的网格：

Element1 Element2 Element3

Element4 Element5 Element6

我有以下代码：

<ui:repeat value=#{beans.myElementList} var="element" varStatus="i">
   <b:row rendered=#{i.index%3==0}>
      <b:column medium-screen="4">
         #{element.display}
      </b:column>
   </b:row>
</ui:repeat>

我的代码的结果：

元素1

元素4

如何解决这个问题？

Answer 1

<b:panelGrid>救援：

<ui:repeat value=#{beans.myElementList} var="element">
   <b:panelGrid columns="3" size="md">
     #{element.display}
   </b:panelGrid>
</ui:repeat>

<b:panelGrid>的灵感来自标准<h:panelGrid>，它会呈现HTML表格。同样，<b:panelGrid>呈现一个由Bootstrap行和列组成的表。只需将要显示的所有内容放入面板网格中即可。 BootsFaces会自动检测何时呈现新行。

我最初想到的用例是一个表单。通常情况下，这种形式是重复相同的行：标签，输入字段，错误消息。 <b:panelGrid>允许您轻松创建这样的表格形式。

另见documentation of <b:panelGrid>。

直到BootsFaces 1.2.0发布为止 看看文档，我看到的并不开心。所以我已经纠正并更新了它。在BootsFaces 1.2.0发布之前，还可以看到documentation of the developer showcase。

Answer 2

请尝试以下代码。
第一个ui：repeat为每个3个元素呈现<row>，第二个呈现元素（在<column>内），每个元素包含3个元素。

<ui:repeat value="#{beans.myElementList}" step="3" varStatus="i" >

    <b:row>
        <ui:repeat value="#{beans.myElementList}" var="element"
                   step="1" offset="#{i.index}" 
                   size="#{i.index + 3 le beans.myElementList.size() ? i.index + 3 : beans.myElementList.size() }"
                   varStatus="j" >
             <b:column medium-screen="4">
                 #{element.display}
             </b:column>        
        </ui:repeat>
    </b:row>

</ui:repeat>

父组件呈现属性为false时呈现子组件？

2 个答案: