Question

是否可以将树状菜单项的图标与右侧而不是左侧对齐？像这样：

item1 >
item2 >
item3 >

“＆gt;”是一个图像。我正在使用标准GWT。尝试使用CellTree和普通树。

/ Andreas

Answer 1

编辑：刚刚意识到这是一个Google Web Toolkit问题。我对Google Web Toolkit一无所知 - 但如果他们让你使用普通的CSS，你可以按照我在下面描述的方式设置任何列表的样式：

你无法使用标准的list-style属性，但你绝对可以使用background-image：

li {
    list-style: none;
    background-image: url('arrow.gif');
    background-position: right center;
}

Answer 2

我有一个CellTree我自己的TreeModel，它返回NodeInfo个自定义渲染器。

类似的东西：

viewModel  = new MyTreeModel( dirs.getRootItems(), filter );
treeDrives = new CellTree( viewModel, null, treeResources );

public class MyTreeModel {
    @Override
    public <T> NodeInfo<?> getNodeInfo( final T value ) {
        return new DefaultNodeInfo<Item>( new ListDataProvider<Item>( dirs ), new DirectoryCell(), selectionModel, null );
    }
}

private final class DirectoryCell extends AbstractCell<Item> {
    @Override
    public void render( com.google.gwt.cell.client.Cell.Context context, Item value, SafeHtmlBuilder sb ) {
    // my own html renderer ... 
    sb.appendHtmlConstant(value.toString);
    sb.append"<img src=\"" + value.getImgUrl() + "\" //>");
}

Answer 3

您可以将任何窗口小部件作为treeItem放入树中。所以如果你想把一个项目放在剩下图标的树中，只需创建一个水平面板，将文本和图标放在里面，然后将水平面板放入树中......（我知道这听起来有点复杂但它实际上非常简单，你可以用它做很多其他很酷的东西）

    Tree t = new Tree();
    HorizontalPanel hc = new HorizontalPanel();
    hc.add(new Label("some text"));
    hc.add(new Image("http://tueffel.net/images/icons/icon13.gif"));
    TreeItem ti = new TreeItem(hc);

    HorizontalPanel hc2 = new HorizontalPanel();
    hc2.add(new Label("some text"));
    hc2.add(new Image("http://tueffel.net/images/icons/icon13.gif"));
    ti.addItem(new TreeItem(hc2));
    t.addItem(ti);
    RootPanel.get().add(t);

Answer 4

new TreeItem(new HTML("Item Text <img src='path/to/image.png'>"));

从GWT树菜单项到右侧的图标。

4 个答案: