GWT - Проблемы со стилем TabLayoutPanel - PullRequest
Новая
       35

GWT - Проблемы со стилем TabLayoutPanel

1 голос
/ 22 марта 2011

Я хочу реализовать горизонтальную панель навигации, используя TabLayoutPanel, используя собственный стиль в соответствии со своими потребностями.

Но я не знаю, как переопределить стиль default.Вот шаблон UiBinder: 

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
  xmlns:g="urn:import:com.google.gwt.user.client.ui">
  <ui:style>
    .gwt-TabLayoutPanel .gwt-TabLayoutPanelHeader {
      background-color: red;
      padding: 0;
      margin: 0;
    }
  </ui:style>
  <g:TabLayoutPanel barHeight="3.75" barUnit="EM">
    <g:tab>
      <g:header>Latest</g:header>
      <g:Label>Latest Activities</g:Label>
    </g:tab>
    <g:tab>
      <g:header>Patients</g:header>
      <g:Label>Patients</g:Label>
    </g:tab>
  </g:TabLayoutPanel>
</ui:UiBinder>

Это не работает.Но как я могу ссылаться на стили по умолчанию?

Ответы [ 7 ]

4 голосов
/ 13 февраля 2012

Чтобы уточнить ответ Атамура, второй вариант, который он предлагает, действительно лучший из двух, особенно если все ваши другие стили установлены с использованием UiBinder или клиентских пакетов. По сути, вы добавляете следующую строку под начальным тегом <ui:style>: 

@external .gwt-TabLayoutPanel .gwt-TabLayoutPanelHeader

Проблема в том, что GWT запутывает правила стиля, которые вы определили в своем шаблоне UiBinder. Поэтому, когда вы пишете «gwt-TabLayoutPanel», это скрывается чем-то вроде «GMDW0RHDH», который затем никогда не применяется к элементам вашего TabLayoutPanel. Добавление «@external» отключает эту запутанность и позволяет применять стили в UiBinder так, как вы ожидаете.

1 голос
/ 15 июня 2011
1 голос
/ 23 мая 2011

Или вы можете просто добавить !important к вашим определениям стиля ...

1 голос
/ 31 марта 2011

прикрепить отдельный CSS, я думаю - встроенные стили предназначены для использования с {style.xyz} в том же шаблоне.На самом деле есть второе решение.Если вы настаиваете на том, чтобы он был в ui.xml - используйте внешнюю область действия: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes

0 голосов
/ 23 августа 2017 
<ui:style>
    @external onMouseOverBorderColor onMouseOutBorderColor;
    .onMouseOverBorderColor {border-color: red; border-style: outset}
    .onMouseOutBorderColor {border-color: black; border-style: outset}
</ui:style>
0 голосов
/ 18 июля 2014

Если вы хотите увидеть, как объявляется файл GWT css:

  1. Откройте gwt-user.jar
  2. Найдите пакет темы, например: com.google.gwt.user.theme.clean для Clean Theme и откройте public / gwt / clean / clean.css.
  3. Найдите как .gwt-TabLayoutPanel и посмотрите, как он объявлен.
  4. Создайте свой собственный файл CSS и объявите его в your_module.gwt.xml

Вы можете изменить тему, если хотите.

0 голосов
/ 15 февраля 2013

после некоторого исследования я использовал следующий подход, и он работал ... я использую GWT 2.5 

/**the panel itself**/
.gwt-TabLayoutPanel {
    border: none;
    margin: 0px;
    padding: 0px;
}
/**the tab bar element**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs {
    background-color: #F4F4F4 !important;
}
/**an individual tab**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab {
    background-color: #6F6F6E !important;
}

.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab-selected {
    background-color: white !important;
}
/**an element nested in each tab (useful for styling)**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabInner {
    font-family: Arial !important;
}

/**applied to all child content widgets**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent {
    border: none;
    margin: 0px;
    overflow: hidden;
    padding: 15px;
}
...