NativeScript-Platform-CSS

一个用于处理声明式 UI 和平台特定 CSS 的 NativeScript 插件

这是什么？

此插件会自动将一些平台相关的 CSS 变量添加到当前的 页面。

它允许您仅针对 android 或 ios 定制您的 UI

.ios .example {
  color: blue;
}

.android .example {
  color: red;
}

它还添加了与屏幕 DPI 相关的类。我们拥有以下 DPI 范围 1280, 1024, 800, 600, 540, 480, 400, 360, 320

您可以选择这样的方式

.ios800 .example {
  font-size: 25;
}

.ios480 .example {
  font-size: 18;
}

.android800 .example {
  font-size: 25;
}

.android480 .example {
  font-size: 18;
}

或者也可以这样

.screen800 .example {
  font-size: 25;
}

.screen480 .example {
  font-size: 18;
}

您还可以访问包含设备名称的类

.samsunggalaxys6 .example {
  color: red;
}

.iphone6s .example {
  color: blue;
}

安装

此插件仅在 Nativescript 7.0 及更高版本上运行。

ns plugin add @vulksoft/nativescript-platform-css@latest

用法

您只需在您的 app.js 或 main.ts (如果使用 angular 或 vue) 中 require() 插件。这将自动将 CSS 类添加到当前加载的页面。

演示

您可以尝试演示应用，它将向您展示已添加到页面中的 CSS 类。

贡献者

• Nathanael Anderson
• Steve McNiven-Scott
• Dave Coffin
• Jonathan Salomon