Question

我发现我可以在选项facet（菜单栏的右侧）中播放命令按钮，但是我似乎无法以相同的方式添加子菜单。我想要一个与右边对齐的实际菜单下拉菜单，而不是一个按钮。

有什么想法吗？

No menu

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:p="http://primefaces.org/ui"
   xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head title="Primefaces Test">
   <style>
.ui-layout-north {
   z-index: 20 !important;
   overflow: visible !important;
}

.ui-layout-north .ui-layout-unit-content {
   overflow: visible !important;
}
</style>
</h:head>

<h:body>
   <h:form>
      <p:layout fullPage="true">
         <p:layoutUnit position="north">
            <p:menubar>
               <p:submenu label="Mail">
                  <p:menuitem value="Gmail" url="http://www.google.com" />
                  <p:menuitem value="Hotmail" url="http://www.hotmail.com" />
                  <p:menuitem value="Yahoo Mail" url="http://mail.yahoo.com" />
               </p:submenu>
               <p:submenu label="Videos">
                  <p:menuitem value="Youtube" url="http://www.youtube.com" />
                  <p:menuitem value="Break" url="http://www.break.com" />
               </p:submenu>
               <f:facet name="options">
                  <p:commandButton value="logout" />
                  <p:submenu label="Videos">
                     <p:menuitem value="Youtube" url="http://www.youtube.com" />
                     <p:menuitem value="Break" url="http://www.break.com" />
                  </p:submenu>
               </f:facet>
            </p:menubar>
         </p:layoutUnit>
         <p:layoutUnit position="center">
            <h:outputText value="Hello, world." />
         </p:layoutUnit>
      </p:layout>
   </h:form>
</h:body>
</html>

- Shane

Answer 1

我用这样的东西解决它：

style =＆＃34; position：absolute;右：6px;＆＃34;

试试吧。

Answer 2

我最终只是忘记了整个“选项”方面，而是使用了css float，我希望这可以帮助某人：

<h:body>
   <h:form>
      <p:layout fullPage="true">
         <p:layoutUnit position="north">
            <p:menubar>
               <p:submenu label="Mail">
                  <p:menuitem value="Gmail" url="http://www.google.com" />
                  <p:menuitem value="Hotmail" url="http://www.hotmail.com" />
                  <p:menuitem value="Yahoo Mail" url="http://mail.yahoo.com" />
               </p:submenu>
               <p:submenu label="Videos">
                  <p:menuitem value="Youtube" url="http://www.youtube.com" />
                  <p:menuitem value="Break" url="http://www.break.com" />
               </p:submenu>
               <p:submenu label="Videos2" style="float:right">
                  <p:menuitem value="Youtube" url="http://www.youtube.com" />
                  <p:menuitem value="Break" url="http://www.break.com" />
               </p:submenu>
            </p:menubar>
         </p:layoutUnit>
         <p:layoutUnit position="center">
            <h:outputText value="Hello, world." />
         </p:layoutUnit>
      </p:layout>
   </h:form>
</h:body>

enter image description here

- 沙恩

Answer 3

如果您正在使用引导程序，则可以只使用内置的flexbox类

注意：这是一个引人注目的（角度）示例，会将 ALL 个项目右对齐。

<p-menubar [model]="items" styleClass="d-flex justify-content-end"></p-menubar>

Primefaces菜单栏右对齐子菜单

3 个答案: