在你的应用中添加示例布局
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:全局 CSS
app.css - 全局应用于所有布局。
StackLayout {
margin: 10;
background-color: white;
}
.btn, TextField {
margin-left: 16;
margin-right: 16;
}
方法 2:特定于平台的 CSS
platform.android.css - 全局应用于 Android 设备中的所有布局。
.btn{
background-color: #191919;
color: #fff;
}
platform.ios.css - 全局应用于 ios 设备中的所有布局。
.btn{
background-color: #fff;
color: #191919;
}
app.css
@import url("~/platform.css");
方法 3:特定于组件的 CSS
pages / main / main.android.css - 适用于 android 设备中的特定组件。
TextField {
color: #e1e1e1;
font-size: 12;
}
pages / main / main.ios.css - 适用于 ios 设备中的特定组件。
TextField {
color: #e3e3e3;
font-size: 15;
}
pages / main / main-common.css - 适用于所有设备中的特定组件。
TextField {
padding: 4;
}