Ribbon Ribbon is container component to group different sets of controls in a tabbed layout. Special styling is applied to inner components for a unified look.
  • Options
  • Clipboard
    • Arial
    • Comis Sans
    • Helvetica
    • Times New Roman
    • Verdana
    • 10
    • 12
    • 14
    • 18
    • 24
    • 36
    • 72
    b
    u
    i
    Fonts
  • Zoom
<p:ribbon>
    <p:tab title="File">
        <p:ribbonGroup label="Options">
            <p:commandButton value="New" icon="ui-ribbonicon-new" styleClass="ui-ribbon-bigbutton" type="button"/>
            <p:commandButton value="Save" icon="ui-ribbonicon-save" styleClass="ui-ribbon-bigbutton" type="button"/>
        </p:ribbonGroup>

        <p:ribbonGroup label="Clipboard" style="width:120px">
            <p:commandButton value="Paste" icon="ui-ribbonicon-paste" styleClass="ui-ribbon-bigbutton" type="button"/>
            <p:commandButton value="Cut" icon="ui-ribbonicon-cut" style="width:64px" type="button"/>
            <p:commandButton value="Print" icon="ui-ribbonicon-print" style="width:64px" type="button"/>
        </p:ribbonGroup>

        <p:ribbonGroup label="Fonts" style="width:220px">
            <p:selectOneMenu appendTo="@this">
                <f:selectItem itemLabel="Arial" itemValue="0" />
                <f:selectItem itemLabel="Comis Sans" itemValue="1" />
                <f:selectItem itemLabel="Helvetica" itemValue="2" />
                <f:selectItem itemLabel="Times New Roman" itemValue="3" />
                <f:selectItem itemLabel="Verdana" itemValue="4" />
            </p:selectOneMenu>

            <p:selectOneMenu appendTo="@this">
                <f:selectItem itemLabel="10" itemValue="10" />
                <f:selectItem itemLabel="12" itemValue="12" />
                <f:selectItem itemLabel="14" itemValue="14" />
                <f:selectItem itemLabel="18" itemValue="18" />
                <f:selectItem itemLabel="24" itemValue="24" />
                <f:selectItem itemLabel="36" itemValue="36" />
                <f:selectItem itemLabel="72" itemValue="72" />
            </p:selectOneMenu>

            <p:selectManyButton>
                <f:selectItem itemLabel="b" itemValue="b" />
                <f:selectItem itemLabel="u" itemValue="u" />
                <f:selectItem itemLabel="i" itemValue="i" />
            </p:selectManyButton>

            <p:colorPicker />  
        </p:ribbonGroup>
    </p:tab>

    <p:tab title="View">
        <p:ribbonGroup label="Zoom">
            <p:commandButton value="In" icon="ui-ribbonicon-zoomin" styleClass="ui-ribbon-bigbutton" type="button" />
            <p:commandButton value="Out" icon="ui-ribbonicon-zoomout" styleClass="ui-ribbon-bigbutton" type="button"/>   
        </p:ribbonGroup>
    </p:tab>
</p:ribbon>
                
PrimeTek, Copyright © 2015
All rights reserved.
Running PrimeFaces-6.0.16 on Mojarra-2.2.8.