Erstellen Sie Dropdown-Menü mit Drilldown-Funktionen in GWT.

Question

Ich möchte ein Dropdown-Menü mit Drilldown-Funktionen erstellen. Ich habe etwas ähnliches wie dies im UI-Bindemittel XML:

<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> 

Gerade jetzt das schafft nur ein Dropdown mit den Elementen A, B.

Ich möchte etwas wie das, wo ich auf A klicke und ich habe mehr Optionen, um in so wie Apple, Alex, Anne was auch immer zu bohren.

Momentan verwende ich GWT 2.7, ich weiß, dass MenuBar diese Funktionalität hat, aber ich frage mich, ob ich das über DropDown machen kann.

Answer 1

So sollte es funktionieren (getestet).

Fügen Sie den folgenden CSS:

.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; 
} 

Danach die folgende Struktur Ihrer * .ui.xml hinzufügen:

<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> 

Danach wird das Ergebnis sollte wie folgt aussehen (natürlich kann man das ändern Styling):