1

プロジェクト (GWT、GWTBootstrap3、UiBinder) に Navbar があり、UiBinder で垂直にしたいと考えています。

HTMLでは非常に簡単です

<div class = "nav nav-pills nav-stacked col-sm-3"> 
    <li> <a> Home </a> </li> 
    <li> <a> Settings</a> </li> 
</div>

しかし、UiBinder でも同じことができるはずです。私が理解している限り、Navbar の位置を FIXED_TOP、FIXED_BOTTON、およびもう 1 つに設定することしかできません。

私のコードは次のようになります

<g:HTMLPanel>
        <g:ScrollPanel>
            <b:Container >
                 <b:Navbar position="FIXED_TOP">
                    <b:Container>
                        <b:NavbarHeader>
                            <b:NavbarBrand targetHistoryToken="{nameTokens.getHome}" ui:field="brand" text="{resources.ProductName}" />
                            <b:NavbarCollapseButton dataTarget="#navbar-collapse" />
                        </b:NavbarHeader>

                        <b:NavbarCollapse b:id="navbar-collapse">
                            <b:NavbarNav>

                                <b:ListDropDown ui:field="admindropdown">
                                    <b:AnchorButton dataToggle="DROPDOWN" text="{resources.CardHolder}" />
                                    <b:DropDownMenu>
                                        <b:AnchorListItem text="{resources.Employee}" targetHistoryToken="{nameTokens.getCardholderlist}" />
                                        <b:AnchorListItem text="{resources.Guest}" targetHistoryToken="{nameTokens.getHome}" />
                                        <b:AnchorListItem text="{resources.Vendor}" targetHistoryToken="{nameTokens.getHome}" />
                                    </b:DropDownMenu>
                                </b:ListDropDown>

                                <b:ListDropDown>
                                    <b:AnchorButton dataToggle="DROPDOWN" text="{resources.User}" />
                                    <b:DropDownMenu>
                                        <b:AnchorListItem text="{resources.Customer}" targetHistoryToken="{nameTokens.getHome}" />
                                        <b:AnchorListItem text="{resources.Technician}" targetHistoryToken="{nameTokens.getHome}" />
                                        <b:AnchorListItem text="{resources.Portal}" targetHistoryToken="{nameTokens.getHome}" />
                                        <b:AnchorListItem text="{resources.Cloud}" targetHistoryToken="{nameTokens.getHome}" />
                                    </b:DropDownMenu>
                                </b:ListDropDown>

                                <b:ListDropDown>
                                    <b:AnchorButton dataToggle="DROPDOWN" text="{resources.Configuration}" />
                                    <b:DropDownMenu>
                                        <b:AnchorListItem text="{resources.Customer}" targetHistoryToken="{nameTokens.getCustomerlist}" />
                                        <b:AnchorListItem text="{resources.Company}" targetHistoryToken="{nameTokens.getCompanylist}" />
                                        <b:AnchorListItem text="{resources.Portal}" targetHistoryToken="{nameTokens.getHome}" />
                                        <b:AnchorListItem text="{resources.ProductNameServer}" targetHistoryToken="{nameTokens.getCloudlist}" />
                                    </b:DropDownMenu>
                                </b:ListDropDown>

                            </b:NavbarNav>

                            <b:NavbarNav pull="RIGHT">

                                <b:ListDropDown >
                                    <b:AnchorButton text="{resources.SelectedLanguage}" dataToggle="DROPDOWN"  />
                                        <b:DropDownMenu >
                                            <b:Image addStyleNames="btn {style.btnStyle}" ui:field="languageDK" url="/images/DK.png" />
                                            <b:Image addStyleNames="btn {style.btnStyle}" ui:field="languageNO" url="/images/NO.png" />
                                            <b:Image addStyleNames="btn {style.btnStyle}" ui:field="languageUK" url="/images/UK.png" />
                                        </b:DropDownMenu>
                                </b:ListDropDown>

                                <b:ListDropDown ui:field="loginfield">
                                    <b:AnchorButton dataToggle="DROPDOWN" ui:field="loginname" />
                                    <b:DropDownMenu>
                                        <b:AnchorListItem text="{resources.LogOut}" ui:field="logoutitem" />
                                    </b:DropDownMenu>
                                </b:ListDropDown>

                            </b:NavbarNav>
                        </b:NavbarCollapse>
                    </b:Container>
                </b:Navbar>

                <b:Row>
                    <b:Column size="XS_12">
                        <g:SimplePanel ui:field="contentContainer" />
                    </b:Column>
                </b:Row>

            </b:Container>
        </g:ScrollPanel>
    </g:HTMLPanel>
4

2 に答える 2

4

sを間違えているようですNavbar- HTML の例では を使用していますが、UiBinder では( 、など) を使用しています。私が知る限り (Bootstrap および gwtbootstrap3 のドキュメントから)、垂直 (ドキュメントで呼ばれているように「スタック」) を実現することはできません。しかし、垂直/積み重ねることは可能です:Navnav-pillsNavbarnavbarnavbar-headerNavbarNavPills

<b:NavPills stacked="true">
   <b:AnchorListItem active="true">Item 1</b:AnchorListItem>
   <b:AnchorListItem>Item 2</b:AnchorListItem>
   <b:AnchorListItem>Item 3</b:AnchorListItem>
</b:NavPills>

その他の例については、デモを参照してください。

于 2015-03-12T16:10:22.310 に答える