풍부한 얼굴의 rich : panelMenuGroup의 backgrond 색상을 변경하는 방법은 무엇입니까?

Question

나는 패널 격자가 있고 각 탭에 대해 별도의 색상을 원한다고 가정합니다. 어떻게 할 수 있습니까?

이 경우 '

.cols { 
    vertical-align: top; 
} 
</h:outputStylesheet> 
    <h:form id="form"> 
     <h:panelGrid columns="2" columnClasses="cols,cols" width="400"> 
      <rich:panelMenu style="width:200px" itemMode="ajax" groupMode="ajax" 
       groupExpandedLeftIcon="triangleUp" 
       groupCollapsedLeftIcon="triangleDown" 
       topGroupExpandedRightIcon="chevronUp" 
       topGroupCollapsedRightIcon="chevronDown" itemLeftIcon="disc" 
       itemChangeListener="#{panelMenuBean.updateCurrent}"> 
       <rich:panelMenuGroup label="Group 1"> 
        <rich:panelMenuItem label="Item 1.1" name="Item_1_1" /> 
        <rich:panelMenuItem label="Item 1.2" name="Item_1_2" /> 
        <rich:panelMenuItem label="Item 1.3" name="Item_1_3" /> 
       </rich:panelMenuGroup> 
       <rich:panelMenuGroup label="Group 2"> 
        <rich:panelMenuItem label="Item 2.1" name="Item_2_1" /> 
        <rich:panelMenuItem label="Item 2.2" name="Item_2_2" /> 
        <rich:panelMenuItem label="Item 2.3" name="Item_2_3" /> 
        <rich:panelMenuGroup label="Group 2.4"> 
         <rich:panelMenuItem label="Item 2.4.1" name="Item_2_4_1" /> 
         <rich:panelMenuItem label="Item 2.4.2" name="Item_2_4_2" /> 
         <rich:panelMenuItem label="Item 2.4.3" name="Item_2_4_3" /> 
        </rich:panelMenuGroup> 
        <rich:panelMenuItem label="Item 2.5" name="Item_2_5" /> 
       </rich:panelMenuGroup> 
       <rich:panelMenuGroup label="Group 3"> 
        <rich:panelMenuItem label="Item 3.1" name="Item_3_1" /> 
        <rich:panelMenuItem label="Item 3.2" name="Item_3_2" /> 
        <rich:panelMenuItem label="Item 3.3" name="Item_3_3" /> 
       </rich:panelMenuGroup> 
      </rich:panelMenu> 
      <a4j:outputPanel ajaxRendered="true"> 
       <rich:panel rendered="#{not empty panelMenuBean.current}"> 
        <h:outputText value="#{panelMenuBean.current} selected" 
         id="current" /> 
       </rich:panel> 
      </a4j:outputPanel> 
     </h:panelGrid> 
    </h:form> 
</ui:composition> 

'

내가 개별 panelMenuGroup의 색상을 수정하려면. 그렇다면 어떻게해야할까요? 많은 사이트를 검색하려고 설명해주십시오.

Answer 1

태그의 전체 속성 목록을 보려면 style 및 styleClass 속성을 사용하십시오 (here 참조). 이렇게하면 각 panelMenuGroup에 직접 스타일 또는 CSS 클래스를 제공 할 수 있습니다.

예 :

<rich:panelMenuGroup label="Red Group 2" style="color:red;"> 
     <rich:panelMenuItem label="Item 2.1" name="Item_2_1" /> 
     <rich:panelMenuItem label="Item 2.2" name="Item_2_2" /> 
     <rich:panelMenuItem label="Item 2.3" name="Item_2_3" /> 
     <rich:panelMenuGroup label="Group 2.4"> 
      <rich:panelMenuItem label="Item 2.4.1" name="Item_2_4_1" /> 
      <rich:panelMenuItem label="Item 2.4.2" name="Item_2_4_2" /> 
      <rich:panelMenuItem label="Item 2.4.3" name="Item_2_4_3" /> 
     </rich:panelMenuGroup> 
     <rich:panelMenuItem label="Item 2.5" name="Item_2_5" /> 
    </rich:panelMenuGroup>