【翻訳】Ext JS暗黒テーマの2つを作成する方法
原文:How to Create a Dark Ext JS Theme–Part 2
Spotifyのように見える洗練された暗いテーマを開発する方法を示しました.本稿の第1部では、Fashion、Sencha Inspector、トピック、変数について説明します.第2部では、Ext JS UIとCSSを使用して独自のコンポーネントを書き換え、カスタムフォントやアイコンをマージする方法について、より高度な概念に重点を置きます.
このチュートリアルを使用して、Senchaアプリケーションのテーマコンテストの参加作品を作成することができます.
1位の受賞者は2500ドルを獲得します!
今すぐ申し込みましょう.
カスタムCSSルールと混入
Spotifextのトピックを作成するとき、CSSルールをいくつか作成してボタンのサスペンションアニメーションを実現したり、カスタムフォントを使用したりして、独自のボタンとラベルパネル変数を作成して独自の外観を与えたりしました.
先ほど述べた変数は、アプリケーションとそのすべてのコンポーネントの全体的な外観を変更するために使用できます.しかし、時にはいくつかのコンポーネントが特別に見えることを望んでいるだけです.次のSpotifinderアプリケーションの画像を見ると、ラベルパネルはデフォルトのExt JSラベルではありません.ボタンは四角形または円角で、色は緑または灰色であってもよい.これは,下層にExt JS UIを用いたSass混入により実現される.1つの混入はCSSルールブロックであり、アプリケーション全体で繰り返し使用できます.
以下に例のSass混入を示します.
以上のSass混入はフィレットを作成するために使用することができ、作成時に実験的なブラウザプレフィックスを使用したため、このCSS 3機能はブラウザ間でサポートすることができる.各CSSルールを記述するのではなく、my-border-radiuが混入してパラメータを渡すだけであるため、すべてのCSSルールはコンパイル後に変更されます.
コンパイルされたCSSは、minifiedを除く次のコードのように見えます.
Sass混入は偉大な概念であり,Ext JSで使用できる.UIと呼ばれ、基本的に皮膚です.Ext JSには、例えばmodernツールパッケージでは、後退ボタン、フィレットボタン、さらに多くの他のものに対してUIがあり、これらのUIは、独自のパラメータを使用して再利用することができます.
これらの混入は、Sencha AIPのドキュメントで見つけることができます.たとえば、Ext.button.Buttonを見つけると、ボタンが異なる状態のSassに混入します.これらの混入が実現されていない場合は@includeを使用し、Ext JSに名前を混入してパラメータを渡します.
{.aligncenter}
よりきれいなフィレットボタンを作成するには、ここを見てください.
次の混入コードを使用して、新しい「scale:small」ボタンを作成し、パラメータに対してUI名「round」を渡します.これにより、ビューで「ui:'round」を使用して定義できます.パラメータにはfont-weight、padding、バックグラウンドカラーも渡されます.
ボタンはアニメーション付きであることに気づくことができますが、Spotifyのようなラベルパネルの外観はExt JS混入が提供するものとは少し違います.sass/srcフォルダを見ると、私が作成したのでExt JS混入とカスタムSassルールが表示されます.
{.aligncenter}
ユニークなボタン
アプリケーションで見たように、ボタンはAPIが提供する構成項目よりもカスタマイズされた構成項目が多くなります.アプリケーションに含まれるコードは、アニメーションをよりスムーズにします.反転するたびに、ボタンはゆっくりとupsをハイライトします.これを実現するには,カスタムのSass/CSSコードを用いた.
コードを見てみましょう.
CSSのクラス名は混入に由来する.小さなボタンのui名は「round」と定義されます.このUIをビューに適用すると、ブラウザのDOMでUI付与コンポーネントのクラス名が「.x-btn-‹ui-name来源-small」であることがわかります.
すべてのSenchaコンポーネントは、デフォルトの.x接頭辞でCSSクラス名を取得します.接頭辞の後に、コンポーネント(btn)の名前、そしてUIの名前が表示されます.ボタンにはスケールも含まれます.ない場合はツールバーにある可能性があります.extjs-button-toolbar-small-ui混入を参照してください.
指定したカスタムコードは、ボタンのサスペンションをリスニングし、マウスをボタンの上に移動すると背景色が変換され、デフォルトの背景色(黒)から新しい色(背景色ルールで表示される緑)に変換されます.
ユニークなラベル
カスタムCSSコードを使用してより多くの機能を追加するのではなく、UIが必要な構成を提供しない場合など、デフォルトの外観と感覚を書き換えたい場合があります.
次の図は、この方法で実装されたユニークな外観のラベルです.
{.aligncenter}
必要なコードはここで見つけて、ファイルのCSSクラス.x-tab-bar-alternativeを表示します.
UIを使った混入と混入の違いを知りたいかもしれません.UI混入は、アプリケーション全体をスタイル化し、Ext JSに含まれるコードでブラウザをサポートするため、偉大です.欠点は、スタイルシートのコードが増加することです.これも、UI混入がアプリケーション全体でスタイルとルールの多重化を実現するために一般的に使用される理由である.
CSSルールと書き換えも偉大です.それは迅速な解決策だからです.欠点は、ブラウザ間テストが必要であり、DOMを生成する方法を理解する必要があるため、複雑です.UI混入が必要な構成を提供していない場合、またはいくつかの場所でCSSルールを使用する必要がある場合にのみ、CSS書き換えおよびルールが使用されます.
フォントのマージ
カスタムテーマ最後にするのは、カスタムフォントとアイコン(アイコンフォント)をマージすることです.このファイルを参照してください.
ここには、Googleフォント(Googleフォントで提供される)と、Webサイトに作成されたSpotifinderというアイコンフォントの2つのカスタムフォントが含まれています.これは選択したアイコンセットで、生成されます.
どちらのフォントも@font-faceフォントなので、スタイルシートで異なるブラウザに対して異なるフォント拡張を定義する必要があります.アイコンフォントの場合は、手動でのみ追加できます.この4種類のフォント拡張を参照してください.通常、icomoonのようなアイコンサイトでカスタムアイコンフォントを作成する場合は、スタイルシートを直接ダウンロードして使用することができます.例では、コピーと貼り付けだけが必要ですが、場合によっては、自分で作成する必要があります.
Googleフォントは、SenchaがグローバルなUI混入を提供しているため、簡単です.この混入は、Googleからコードをインポートすることで、コンパイルされたCSSコードのすべての拡張子にコードをプッシュします.このドキュメントを参照してください.Googleフォントなどのフォントプロバイダからカスタムフォントを使用する場合は、フォントを要求する追加のリクエストが必要です.代わりに、独自の@font-faceフォントサイト(例えばhttp://www.fontsquirrel.com/)をダウンロードして、私が作ったアイコンフォントのように完全なインポートコードを提供します.
フォントが正しくインポートされると、使用できます.ここでは、$font-familyを指すことでGoogleフォントを使用できます.
小結
そうです!Spotifextトピックのような素晴らしいトピックの作成について説明しました.次のスクリーンショットを見て、現実のアプリケーションにどのように適用するかを考えてみましょう.
Senchaテーマ大会への応募を忘れないでください.1位の受賞者は2500ドルを獲得します!
{.aligncenter}
作成者:
Lee Boonstra
Lee is a sales engineer at Sencha in Europe. She’s located in Amsterdam and has experience in both front-end and back-end development. Lee spends her spare time developing web and mobile apps. She also wrote a book for O’Reilly: Hands-on Sencha Touch 2.
Spotifyのように見える洗練された暗いテーマを開発する方法を示しました.本稿の第1部では、Fashion、Sencha Inspector、トピック、変数について説明します.第2部では、Ext JS UIとCSSを使用して独自のコンポーネントを書き換え、カスタムフォントやアイコンをマージする方法について、より高度な概念に重点を置きます.
このチュートリアルを使用して、Senchaアプリケーションのテーマコンテストの参加作品を作成することができます.
1位の受賞者は2500ドルを獲得します!
今すぐ申し込みましょう.
カスタムCSSルールと混入
Spotifextのトピックを作成するとき、CSSルールをいくつか作成してボタンのサスペンションアニメーションを実現したり、カスタムフォントを使用したりして、独自のボタンとラベルパネル変数を作成して独自の外観を与えたりしました.
先ほど述べた変数は、アプリケーションとそのすべてのコンポーネントの全体的な外観を変更するために使用できます.しかし、時にはいくつかのコンポーネントが特別に見えることを望んでいるだけです.次のSpotifinderアプリケーションの画像を見ると、ラベルパネルはデフォルトのExt JSラベルではありません.ボタンは四角形または円角で、色は緑または灰色であってもよい.これは,下層にExt JS UIを用いたSass混入により実現される.1つの混入はCSSルールブロックであり、アプリケーション全体で繰り返し使用できます.
以下に例のSass混入を示します.
@mixin my-border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}以上のSass混入はフィレットを作成するために使用することができ、作成時に実験的なブラウザプレフィックスを使用したため、このCSS 3機能はブラウザ間でサポートすることができる.各CSSルールを記述するのではなく、my-border-radiuが混入してパラメータを渡すだけであるため、すべてのCSSルールはコンパイル後に変更されます.
.box { @include border-radius(10px); }
コンパイルされたCSSは、minifiedを除く次のコードのように見えます.
.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }Sass混入は偉大な概念であり,Ext JSで使用できる.UIと呼ばれ、基本的に皮膚です.Ext JSには、例えばmodernツールパッケージでは、後退ボタン、フィレットボタン、さらに多くの他のものに対してUIがあり、これらのUIは、独自のパラメータを使用して再利用することができます.
これらの混入は、Sencha AIPのドキュメントで見つけることができます.たとえば、Ext.button.Buttonを見つけると、ボタンが異なる状態のSassに混入します.これらの混入が実現されていない場合は@includeを使用し、Ext JSに名前を混入してパラメータを渡します.
{.aligncenter}
よりきれいなフィレットボタンを作成するには、ここを見てください.
次の混入コードを使用して、新しい「scale:small」ボタンを作成し、パラメータに対してUI名「round」を渡します.これにより、ビューで「ui:'round」を使用して定義できます.パラメータにはfont-weight、padding、バックグラウンドカラーも渡されます.
@include extjs-button-small-ui(
$ui: 'round',
$font-weight: bold,
$padding: 5px,
$background-color: $highlight-color
);ボタンはアニメーション付きであることに気づくことができますが、Spotifyのようなラベルパネルの外観はExt JS混入が提供するものとは少し違います.sass/srcフォルダを見ると、私が作成したのでExt JS混入とカスタムSassルールが表示されます.
{.aligncenter}
ユニークなボタン
アプリケーションで見たように、ボタンはAPIが提供する構成項目よりもカスタマイズされた構成項目が多くなります.アプリケーションに含まれるコードは、アニメーションをよりスムーズにします.反転するたびに、ボタンはゆっくりとupsをハイライトします.これを実現するには,カスタムのSass/CSSコードを用いた.
コードを見てみましょう.
.x-btn-round-large,
.x-btn-round-medium,
.x-btn-round-small {
&:hover {
background-color: $highlight-color2;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
}CSSのクラス名は混入に由来する.小さなボタンのui名は「round」と定義されます.このUIをビューに適用すると、ブラウザのDOMでUI付与コンポーネントのクラス名が「.x-btn-‹ui-name来源-small」であることがわかります.
すべてのSenchaコンポーネントは、デフォルトの.x接頭辞でCSSクラス名を取得します.接頭辞の後に、コンポーネント(btn)の名前、そしてUIの名前が表示されます.ボタンにはスケールも含まれます.ない場合はツールバーにある可能性があります.extjs-button-toolbar-small-ui混入を参照してください.
指定したカスタムコードは、ボタンのサスペンションをリスニングし、マウスをボタンの上に移動すると背景色が変換され、デフォルトの背景色(黒)から新しい色(背景色ルールで表示される緑)に変換されます.
ユニークなラベル
カスタムCSSコードを使用してより多くの機能を追加するのではなく、UIが必要な構成を提供しない場合など、デフォルトの外観と感覚を書き換えたい場合があります.
次の図は、この方法で実装されたユニークな外観のラベルです.
{.aligncenter}
必要なコードはここで見つけて、ファイルのCSSクラス.x-tab-bar-alternativeを表示します.
UIを使った混入と混入の違いを知りたいかもしれません.UI混入は、アプリケーション全体をスタイル化し、Ext JSに含まれるコードでブラウザをサポートするため、偉大です.欠点は、スタイルシートのコードが増加することです.これも、UI混入がアプリケーション全体でスタイルとルールの多重化を実現するために一般的に使用される理由である.
CSSルールと書き換えも偉大です.それは迅速な解決策だからです.欠点は、ブラウザ間テストが必要であり、DOMを生成する方法を理解する必要があるため、複雑です.UI混入が必要な構成を提供していない場合、またはいくつかの場所でCSSルールを使用する必要がある場合にのみ、CSS書き換えおよびルールが使用されます.
フォントのマージ
カスタムテーマ最後にするのは、カスタムフォントとアイコン(アイコンフォント)をマージすることです.このファイルを参照してください.
ここには、Googleフォント(Googleフォントで提供される)と、Webサイトに作成されたSpotifinderというアイコンフォントの2つのカスタムフォントが含まれています.これは選択したアイコンセットで、生成されます.
どちらのフォントも@font-faceフォントなので、スタイルシートで異なるブラウザに対して異なるフォント拡張を定義する必要があります.アイコンフォントの場合は、手動でのみ追加できます.この4種類のフォント拡張を参照してください.通常、icomoonのようなアイコンサイトでカスタムアイコンフォントを作成する場合は、スタイルシートを直接ダウンロードして使用することができます.例では、コピーと貼り付けだけが必要ですが、場合によっては、自分で作成する必要があります.
Googleフォントは、SenchaがグローバルなUI混入を提供しているため、簡単です.この混入は、Googleからコードをインポートすることで、コンパイルされたCSSコードのすべての拡張子にコードをプッシュします.このドキュメントを参照してください.Googleフォントなどのフォントプロバイダからカスタムフォントを使用する場合は、フォントを要求する追加のリクエストが必要です.代わりに、独自の@font-faceフォントサイト(例えばhttp://www.fontsquirrel.com/)をダウンロードして、私が作ったアイコンフォントのように完全なインポートコードを提供します.
フォントが正しくインポートされると、使用できます.ここでは、$font-familyを指すことでGoogleフォントを使用できます.
小結
そうです!Spotifextトピックのような素晴らしいトピックの作成について説明しました.次のスクリーンショットを見て、現実のアプリケーションにどのように適用するかを考えてみましょう.
Senchaテーマ大会への応募を忘れないでください.1位の受賞者は2500ドルを獲得します!
{.aligncenter}
作成者:
Lee Boonstra
Lee is a sales engineer at Sencha in Europe. She’s located in Amsterdam and has experience in both front-end and back-end development. Lee spends her spare time developing web and mobile apps. She also wrote a book for O’Reilly: Hands-on Sencha Touch 2.