PF10 Theme Avalon 3 没有 <p:separator/> 的 ui-inputgroup 有替代方案吗？

Question

环境：

Jboss 7.2
Java 11
Primefaces 10
Avalon 3.0.0 从 2.1.2 迁移

是否有 ui-inputgroup 没有的替代方案？

按照 PF10 的迁移说明，我们将替换为我在设计 ui-inputgroup 时遇到问题。

代码示例

<div class="ui-inputgroup">
    <p:inputText id="txtId" value="#{menusBean.search.id}" style="width:50%"/>
    <p:divider/>
    <p:selectOneMenu id="cbxContext"
                     value="#{menusBean.search.context}"
                     filter="true" filterMatchMode="contains"
                     autoWidth="false" style="width:50%">
        <p:ajax event="change" listener="#{menusBean.loadParesN1Search}" update="cbxPare"/>
        <f:selectItem itemLabel="BACK" itemValue="BACK"/>
         <f:selectItem itemLabel="EXTRA" itemValue="EXTRA"/>
    </p:selectOneMenu>
</div>

我在 Avalon demo v3.0.0 中没有找到这个选项，所以我想应该可以替代这个。

通过测试替代方案，我尝试用替换并且它有效，但不久就会被弃用。

Answer 1

您可以简单地在您的输入上设置右边框：

<div class="ui-inputgroup">
    <p:inputText style="width:50%;border-right:1px solid #ced4da"/>
    <p:selectOneMenu autoWidth="false" style="width:50%">
    </p:selectOneMenu>
</div>

它将呈现如下：

PF10 Theme Avalon 3 没有 <p:separator/> 的 ui-inputgroup 有替代方案吗？

PF10 Theme Avalon 3 Is there an alternative to ui-inputgroup without <p:separator/>?

jsf

themes

primefaces