3

ビューポートにボーダー レイアウトがあります。ボーダー レイアウト内には、「ヘッダー」セクションと「ナビゲーション」セクションがあります。

フォルダ構造は次のようになります。

フォルダ構造

ヘッダー部分のみにスタイルを追加しようとしています。

「sass/src/view/main/header」フォルダーに「Header.scss」ファイルを作成しました。

ヘッダー用のscssファイル

アプリ内のビューのスタイリングに関するドキュメントを理解しているので、フォルダー内に一致するフォルダーとファイル構造を作成するとsass/var/view、そのscssファイル内のスタイルはアプリフォルダー内の特定のクラスにのみ適用されます。

次のルールを Header.scss ファイルに追加しました。

//in Header.scss
$panel-body-background-color: red;

ヘッダーのボディの背景色は変更されますが、ビューポート内のすべてのパネルでも変更されます。

どこにでも適用されるスタイル ルール

sass var フォルダーがどのように機能するかを誤解していますか? スタイル ルールをヘッダー クラスのみに適用するにはどうすればよいですか?

4

2 に答える 2

3

まず、Drake Enterprise Systems の回答は素晴らしいと思います。著者の質問の99％をカバーしています。私の答えは、より良い答えと見なされることを意図したものではなく、Drake Enterprise Systems が思いついたソリューションを補完するものです。

アプリのスタイルを設定する最善の方法は、カスタム テーマを使用することです。それはそれほど難しいことではなく、再利用可能であり、Sencha があなたに望んでいることと一致しています。そこ には いくつかの チュートリアル が あり、もちろん Sencha自体にも優れたガイドがあります。

すべてを使いたくない人にとっては、UI を使用するのがベスト プラクティスだと思います。コンポーネントのスタイルを設定するのに最適な方法です。UI は mixin に似ていますが、オプションのパラメーターがあります (以前は、すべてのパラメーターを設定する必要があり、これが面倒でした)。ほとんどのコンポーネントには既に「デフォルト」という名前の UI があり、すぐに使用できるものを「ライト」に変更できます。ExtJs のような柔軟なフレームワークから期待されるように、独自の UI を作成することもできます。

パネルの UIを見ると、パラメーターを介して多くのスタイリングを行うことができることがわかります。パネルのカスタム UI の例を次に示します。

@include extjs-panel-ui(
    $ui: 'highlight',
    $ui-header-background-color: red,
    $ui-border-color: red,
    $ui-header-border-color: red,
    $ui-body-border-color: red,
    $ui-border-width: 5px,
    $ui-border-radius: 5px
);

もちろん、UI は宣言型に設定できます。

// custom "highlight" UI        
xtype: 'panel',
ui: 'highlight',

bind: {
    title: '{name}'
},

region: 'west',
html: '<ul><li>This area is...</li></ul>',
width: 250,
split: true,

tbar: [{
    text: 'Button',
    handler: 'onClickButton'
}]

xtypeデフォルトの UI-mixin がない場合でも、UI を設定してデフォルトのクラス名に追加できるため、コンテナの場合は次のようになります。x-container-mycustomui

于 2015-08-29T20:46:11.817 に答える