この記事では、クラス、セレクター、IDを介してCSSスタイルを設定するさまざまなシナリオと、 コードビハインドファイルを介してCSSを設定するユースケースを示します。
次の例は、コンポーネントビハインドを使用しながら、CSSのclass、id、状態セレクターを設定する方法を示しています。
/* Using component Class name (e.g. stlye will be applied on all Buttons) */
Button {
background-color: red;
}
/* Using CSS class */
.testClass {
color: blue;
}
/* Using ID */
#myButton {
color: yellow;
}
/* Using pseudo-selector :pressed */
.testClass:pressed {
color: green;
}function onPageLoaded(args) {
const page = args.object;
page.css = "Button { background-color: red; color: white; } .testClass { color: blue; } #myButton { color: yellow; } .testClass:pressed { color: green; }";
// Using the globaly defined style e.g. Button { background-color: red; }
const btn = new Button();
btn.text = "Sample button";
// Atttaching CSS class to a component
const btnWithClass = new Button();
btnWithClass.text = "Button with class";
btnWithClass.className = "testClass";
// Using component's ID to apply CSS styling
const btnStyledViaID = new Button();
btnStyledViaID.text = "Button with ID";
btnStyledViaID.id = "myButton";
}export function onPageLoaded(args) {
const page: Page = args.object;
page.css = "Button { background-color: red; color: white; } .testClass { color: blue; } #myButton { color: yellow; } .testClass:pressed { color: green; }";
// Using the globaly defined style e.g. Button { background-color: red; }
const btn = new Button();
btn.text = "Sample button";
// Atttaching CSS class to a component
const btnWithClass = new Button();
btnWithClass.text = "Button with class";
btnWithClass.className = "testClass";
// Using component's ID to apply CSS styling
const btnStyledViaID = new Button();
btnStyledViaID.text = "Button with ID";
btnStyledViaID.id = "myButton";
} <!-- Using nativescript-theme plugin predefined CSS classes -->
<!-- More at https://docs.nativescript.org/ui/theme -->
<Label text="Sample label" class="h2 text-left m-16" textWrap="true" />| CSSプロパティ | JavaScript | プロパティの説明 |
|---|---|---|
| border-color | borderColor | 境界線の色をビューのそれに合わせます。16進数のカラー値またはColorインスタンスを受け入れます。 |
| border-width | borderWidth | 境界線の幅をビューのそれに合わせます。数値をDIP（デバイス非依存ピクセル）として受け入れます。 |
| border-radius | borderRadius | 境界線の半径をビューのそれに合わせます。数値をDIP（デバイス非依存ピクセル）として受け入れます。 |
境界線プロパティの設定はCSSクラスを考慮しました。
.border-props {
border-width: 3;
border-color: orangered;
border-radius: 20;
}ボーダーは、コードビハインドを介して動的に設定できます。
label.borderWidth = 2;
label.borderColor = new Color("orangered");
label.borderRadius = 10;label.borderWidth = 2;
label.borderColor = new Color("orangered");
label.borderRadius = 10;このborder-radiusプロパティにより、NativeScript要素の角を丸くすることができます。このプロパティは、1つ、2つ、4つの値を持つことができます。
border-radius値の適用に関するルール：
.no-top-left {
border-radius: 0 20 20 20;
}
.no-top-left-right {
border-radius: 0 0 20 20;
}
.no-bottom-left {
border-radius: 20 20 20 0;
}
.no-bottom-left-right {
border-radius: 20 20 0 0;
}
.radius-all-corners {
border-radius: 20;
}
.no-radius-at-all {
border-radius: 0;
}
.diagonal {
border-radius: 20 0;
}
.reverse-diagonal {
border-radius: 0 20;
}NativeScriptはlinear-gradientプロパティを使った線形グラデーションの作成をサポートしており、 CSSプロパティbackground-imageとbackgroundに適用できます。
/* Setting linear gradients */
Label {
padding: 8;
color:white;
}
.bottom-gradient {
background: linear-gradient(to bottom, orangered, green, lightblue);
}
.left-gradient {
background: linear-gradient(to left, orangered, green, lightblue);
}
.right-gradient {
background: linear-gradient(to right, orangered, green, lightblue);
}
.degree-gradient {
background: linear-gradient(45deg, orangered, green, lightblue);
}
.two-color-gradient {
background: linear-gradient(-45deg, orangered, lightblue);
}
.background-image {
background-image:linear-gradient(to bottom, orangered, green, lightblue);
}