GWT Tree styling
Ich habe einen normalen Tree-widget, das will ich Stil. Ich weiß, Tree widget hat zu folgenden Stile:
•.gwt-Baum { Baum selbst }
•.gwt-Baum .gwt-TreeItem { ein Baum-Element,}
•.gwt-Baum .gwt-TreeItem-selected { ein ausgewähltes Strukturelement }
Den Menschen webb schickte mir diese CSS-und HTML als Beispiel, wie es Aussehen sollte
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;
}
- und 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>
Bin ich kämpfen ein bisschen, um dies zu sehen, wie Sie wollen. Ich bin mit uibinder.
- Sollte ich eine .css Datei oder ui:style in den ui-binder-Datei?
- Muss ich entfernen die Standard-Stile mit "removeStyleName" und setStyleName an jedem Baum Element?
Thx
Update:
Finden Sie heraus, wie hinzufügen von Bildern zu Blättern. Machen Sie eine Schnittstelle:
public interface TreeResources extends Resources {
ImageResource treeOpen();
ImageResource treeClosed();
}
Erstellen der Baum mit GWT.erstellen.
stellen Sie sicher, dass die Bilder mit den passenden Namen (treeOpen.gif, treeClosed.gif) befinden sich im gleichen Ordner, oder Sie konnte, und Anmerkungen darauf hinzuweisen.
Frage ist, wie man Sie auf der rechten Seite anstelle von der linken Seite?
- Finden Sie heraus, wie hinzufügen von Bildern zu Blättern. Machen und interface: public interface TreeResources extends Resources { ImageResource treeOpen(); ImageResource treeClosed(); } stellen Sie sicher, dass die Bilder mit den passenden Namen in dem selben Ordner. Die Frage ist, wie man Sie auf der rechten Seite statt?
Du musst angemeldet sein, um einen Kommentar abzugeben.
GWT nicht über eine css-Klasse für das tree-Element, aber Sie können leicht tun Sie dies für jeden
TreeItem
, die Sie erstellen:Später können Sie fügen Sie Zeilen hinzu, die den Baum wie diesem:
Während diejenigen, die korrekten CSS-Klassen zur Auswahl, ich fand, dass die Werte, die ich versuchte zu setzen, wurden nicht richtig aktualisiert. Das problem endete als in der app gwt.xml.
Diese Zeile war in meiner app:
Mit dieser Linie, ein Standard-look/feel mit CSS erstellt wurde, aufgerufen Reinigen.css. Dieser wurde geladen, nachdem meine CSS-Datei. Einmal habe ich kommentiert diese Zeile aus, alle meine Einstellungen wurden angewendet.