-1

私は GWT を使用しており、次の CSS ルールで属性をStackLayoutPanel適用してヘッダーの角を丸くしようとしています:border-radius

.mm-StackPanelHeader {
  padding-left: 7px;
  font-weight: bold;
  font-size: 1.4em;
  width: 200px;
  border-radius: 5px 5px 0px 0px;
  background: #d3def6;
  border: 0.5px solid #bbbbdd;
}

ヘッダー項目を折りたたむと、境界線が互いに完全に覆われず、醜い白い角の端が表示されます。

これを修正する方法は？

参考までに、出力のスナップショットを次に示します。

4

2 に答える 2

1

古いウィジェットのルック アンド フィールを使用すると仮定すると、まったく同じ結果を得るには、画像を置き換えたり、ウィジェットのレイアウト プロパティをいじったりする必要があります (たとえば、負のマージンを適用したり、オフセットを変更したりします)。

そうは言っても、あなたのニーズをターゲットにしているように見え、それ以上の操作が不要な、CSSベースの迅速なソリューションを手に入れることができました. この試みは完璧にはほど遠いので、より正確な解決策が利用可能であると確信していますが、良い出発点を提供するはずです.

概要

古いウィジェットの外観をシミュレートするには:

  • 項目ヘッダーの上隅を丸めます。
  • これらの醜い白い角を避けるために、下のコンテナに背景色を適用します。
  • 背景色が適用された結果として見苦しい青い角ができるのを避けるために、そのコンテナの上部の丸い角も使用します。
  • ヘッダー アイテムの下部パディングをリセットして、コンテンツを中央揃えにします。

実装

スタイルシートに次のルールを追加します。

.gwt-StackLayoutPanel,
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader {
    background-color: #D3DEF6;
    border-radius: 5px 5px 0 0;
}
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader {
    padding-bottom: 0;
}

図

GWT ショーケースのライブ サンプルで CSS プロパティを操作して作成した最終結果のスナップショットを次に示します。

スタック レイアウト パネルが変更されました

于 2012-07-25T20:23:13.810 に答える