GWTのドリルダウン機能を持つドロップダウンメニューを作成します。

Question

ドリルダウン機能を備えたドロップダウンメニューを作成したいとします。これはただのアイテムA、Bとのドロップダウンを作成し、今

<b:DropDownMenu ui:field="menuInfo" addStyleNames="wt-dropdown-menu"> 
    <b:AnchorListItem ui:field="menuItemA" text="A"/> 
    <b:AnchorListItem ui:field="menuItemB" text="B"/> 
</b:DropDownMenu> 

：私は、UIのバインダーXMLでこれに似た何かを持っています。

私はAをクリックするとこのようなものが欲しく、Apple、Alex、Anneのようなものにドリルダウンするオプションが増えています。

現在、GWT 2.7を使用していますが、MenuBarにはその機能がありますが、DropDown経由で私が行うことができるかどうか疑問に思っています。

Answer 1

このように動作する必要があります（テスト済み）。

次のCSS追加します。その後、あなた*の.ui.xmlに次のような構造を追加

.dropdown-submenu { 
    position:relative; 
} 
.dropdown-submenu>.dropdown-menu { 
    top:0; 
    left:100%; 
    margin-top:-6px; 
    margin-left:-1px; 
    -webkit-border-radius:0 6px 6px 6px; 
    -moz-border-radius:0 6px 6px 6px; 
    border-radius:0 6px 6px 6px; 
} 
.dropdown-submenu:hover>.dropdown-menu { 
    display:block; 
} 
.dropdown-submenu>a:after { 
    display:block; 
    content:" "; 
    float:right; 
    width:0; 
    height:0; 
    border-color:transparent; 
    border-style:solid; 
    border-width:5px 0 5px 5px; 
    border-left-color:#cccccc; 
    margin-top:5px; 
    margin-right:-10px; 
} 
.dropdown-submenu:hover>a:after { 
    border-left-color:#ffffff; 
} 
.dropdown-submenu.pull-left { 
    float:none; 
} 
.dropdown-submenu.pull-left>.dropdown-menu { 
    left:-100%; 
    margin-left:10px; 
    -webkit-border-radius:6px 0 6px 6px; 
    -moz-border-radius:6px 0 6px 6px; 
    border-radius:6px 0 6px 6px; 
} 

を：

<b:AnchorButton dataToggle="DROPDOWN">DropDown</b:AnchorButton> 
<b:DropDownMenu> 
    <b:ListItem styleName="menu-item dropdown dropdown-submenu"> 
     <b:Anchor>A</b:Anchor> 
     <b:DropDownMenu> 
      <b:AnchorListItem>Apple</b:AnchorListItem> 
      <b:AnchorListItem>Alex</b:AnchorListItem> 
      <b:AnchorListItem>Anne</b:AnchorListItem> 
     </b:DropDownMenu> 
    </b:ListItem> 
    <b:ListItem styleName="menu-item dropdown dropdown-submenu"> 
     <b:Anchor>B</b:Anchor> 
     <b:DropDownMenu> 
      <b:AnchorListItem>Ben</b:AnchorListItem> 
      <b:AnchorListItem>Bea</b:AnchorListItem> 
     </b:DropDownMenu> 
    </b:ListItem> 
</b:DropDownMenu> 

その後結果はもちろん、あなたが変更することができます（次のようになります。スタイリング）：