GWT Tree style - PullRequest
Новая
       8

GWT Tree style

2 голосов
/ 11 апреля 2011

У меня есть обычный виджет Tree, который я хочу стилизовать. Я знаю, что дерево виджет имеет следующие стили:

• .gwt-Tree {само дерево} • .gwt-Tree .gwt-TreeItem {элемент дерева} • .gwt-Tree .gwt-TreeItem-selected {выбранный элемент дерева}

Веб-пользователи прислали мне этот CSS и HTML как пример того, как он должен выглядеть

CSS: 

/* Menu styling */
    #menu li {
        margin-top: 8px;
        margin-bottom: 8px;
        /*margin: 8px 0 8px 0;*/
        padding: 0;
    }

    .menuitems,.indented {
        background: none repeat scroll 0 0 transparent;
        border-width: 0;
        float: left;
        font-size: 100%;
        list-style-image: none;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .menuitems a { *
        display: block; *
        float: left; *
        clear: left;
    }

    .indented {
        border-left: 1px solid #005284;
        border-right: none;
        padding-left: 5px;
        margin-left: 20px;
    }

    .menuitems a {
        color: #000000;
        display: block;
    }

    .menuitems a:hover {
        text-decoration: underline;
    }

    .currentpage a {
        color: #C60;
        font-weight: bold;
    }

и HTML 

<div id="menu">
        <ul class="menuitems">
            <li>
                <a href="abc">Option 1</a> 
            </li>
            <li>
                <a href="abc">Option 2</a> 
            </li>
            <li>
                <a href="abc">Option 3</a> 
                <ul class="indented">
                    <li class="currentpage">
                        <a href="blabla">subselection</a>
                    </li>
                    <li>
                        subselection 2
                    </li>
                </ul>
            </li>
            <li>
                <a href="abc">Option 4</a> 
            </li>
        </ul>   
    </div>

Я изо всех сил пытаюсь заставить это выглядеть так, как они хотят. Я использую uibinder.

  • Стоит ли использовать файл .css или стиль ui: в файле подшивки пользовательского интерфейса?
  • Нужно ли удалять стили по умолчанию с помощью «removeStyleName» и setStyleName для каждого элемента дерева?

Thx

Обновление:

Узнал, как добавлять изображения в листья. Сделай интерфейс: 

public interface TreeResources extends Resources {
     ImageResource treeOpen();
     ImageResource treeClosed();
  }

Создайте дерево с помощью GWT.create. убедитесь, что изображения с совпадающими именами (treeOpen.gif, treeClosed.gif) находятся в одной папке, или вы можете добавить примечания к ним.

Вопрос в том, как расположить их справа, а не слева?

Ответы [ 2 ]

2 голосов
/ 07 июня 2011

GWT не предоставляет класс css для элемента дерева, но вы можете легко сделать это для каждого создаваемого вами TreeItem: 

TreeItem item = new TreeItem("click me!");
item.getElement().addClassName("gwt-TreeNode");                
tree.addItem(item);

Позже вы можете добавить строки в ваше дерево следующим образом: 

.gwt-Tree .gwt-TreeNode {
    border-left: 1px solid #005284;
}
0 голосов
/ 24 января 2017

Хотя это правильные CSS-классы для выбора, я обнаружил, что значения, которые я пытался установить, обновлялись неправильно. Проблема оказалась в приложении gwt.xml.

Эта строка была в моем приложении: 

<inherits name='com.google.gwt.user.theme.clean.Clean'

С этой строкой был создан CSS по умолчанию, который называется Clean.css. Это было загружено после моего файла CSS. Как только я прокомментировал эту строку, все мои настройки были применены.

...