nativescript
स्टाइलिंग नेटिवस्क्रिप्ट टेम्पलेट

अपने ऐप में एक नमूना लेआउट जोड़ना

main.component.ts

import {Component} from "@angular/core";

@Component({
    selector: "main",
    template: `
    <StackLayout>
      <TextField hint="some text"></TextField>
      <Button text="Click me" class="btn"></Button>
    </StackLayout>
    `,
    styleUrls: ["pages/main/main-common.css", "pages/main/main.css"]
})
export class MainComponent { }

विधि 1: ग्लोबल सीएसएस

app.css - सभी लेआउट के लिए विश्व स्तर पर लागू होता है।

StackLayout {
  margin: 10;
  background-color: white;
}
.btn, TextField {
  margin-left: 16;
  margin-right: 16;
}

विधि 2: प्लेटफ़ॉर्म विशिष्ट सीएसएस

platform.android.css - Android डिवाइस में सभी लेआउट के लिए विश्व स्तर पर लागू होता है।

.btn{
    background-color: #191919;
    color: #fff;
}

platform.ios.css - आईओएस डिवाइस के सभी लेआउट के लिए विश्व स्तर पर लागू होता है।

.btn{
    background-color: #fff;
    color: #191919;
}

app.css

@import url("~/platform.css");

विधि 3: घटक-विशिष्ट सीएसएस

पृष्ठ / मुख्य / main.android.css - Android डिवाइस में विशिष्ट घटक पर लागू होता है।

TextField {
  color: #e1e1e1;
  font-size: 12;
}

पृष्ठ / मुख्य / main.ios.css - आईओएस डिवाइस में विशिष्ट घटक पर लागू होता है।

TextField {
  color: #e3e3e3;
  font-size: 15;
}

पृष्ठ / मुख्य / मुख्य-सामान्य.-सेकंड - सभी उपकरणों में विशिष्ट घटक पर लागू होता है।

TextField {
  padding: 4;
}