市场place
作者 NativeScript.org
nativescript-ngx-shadow
由 Josh Sommer 编写 | v6.5.0
[![NPM 版本][npm-image]][npm-url] [![下载][downloads-image]][npm-url] [![Twitter 关注][twitter-image]][twitter-url]
npm i --save nativescript-ngx-shadow

NativeScript Angular 阴影指令插件 apple android

NPM version Downloads Twitter Follow

此存储库是 @Especializa 的 NativeScript 阴影指令的分支。 https://github.com/Especializa/nativescript-ng-shadow

安装

在命令提示符下进入您的应用程序根文件夹并执行

tns plugin add nativescript-ngx-shadow

演示

N|Solid

如何使用它

这是一个 Angular 指令，可以简化您在 Android 和 iOS 上实现阴影的过程。

阴影是 Material 设计规范 的重要组成部分。它提出了 高度的概念，这暗示了人类感知物体从表面升起的方式。

有了这个指令，您无需担心 Android 和 iOS 上所有关于阴影的方面。另一方面，如果您关心任何细节，只需提供额外的属性，它们将覆盖默认属性。

但是，在 Android 上运行此应用程序需要 SDK 大于或等于 21（Android 5.0 Lollipop 或更高版本），否则阴影将不会显示。在 iOS 上运行不应有任何问题。

导入 NgShadowModule

// ...
import { NgShadowModule } from "nativescript-ngx-shadow";

@NgModule({
  imports: [
    NgShadowModule
    // ...
  ]
  // ...
})
export class MyModule {}

只需在模板中使用即可

简单属性 shadow

<Label shadow="2"></Label>

当然可以绑定属性

<Label [shadow]="myCustomShadow"></Label>

要提供其他详细信息，请将 shadow 指令与其他属性结合使用

<Label shadow [elevation]="myElevation" cornerRadius="5"></Label>

有几个平台特定属性，您可能想要使用以自定义视图。请注意，其中一些属性与应用于相同视图的 CSS 样式冲突。在这种情况下，Android 上的默认行为是保留原始 HTML/CSS 样式，以使用此指令提供的样式。另一方面，iOS 上，HTML/CSS 存在的样式被考虑在内，因此阴影可能不会被应用。

建议避免将类似 背景颜色 和 边框半径 这样的属性应用于您打算应用此指令的视图（注意：现在支持此功能）。您始终可以嵌套视图并获得所需的结果。如果不这样，请 留言，以便我们尽力帮助。

属性列表

以下表格列出了所有可能的属性及其描述，以及每个平台支持哪些属性

属性 类型 平台 描述
shadow 字符串 | 数字 | AndroidData | IOSData 两者 指令属性。提供 null 或空字符串且没有 elevation 属性，将关闭阴影
elevation 数字 | 字符串 两者 确定视图从表面到的高度。它执行所有与阴影相关的计算。您可能想查看此枚举，其中包含标准材质设计的高度。
PS：自2.0版本起，在Android上使用DIP（或DP，密度无关像素）计算，在iOS上使用PT（点）。
pressedElevation 数字 | 字符串 Android 确定视图在按下状态下的高度。
shape string => 'RECTANGLE' | 'OVAL' | 'RING' | 'LINE'
默认: 'RECTANGLE'		 Android 确定视图的形状并覆盖其格式样式。
bgcolor string => 颜色 #RGB Android 确定视图的背景颜色并覆盖其之前背景。如果未设置，则使用之前的背景。 注意：将背景设置为透明在Android上可能导致问题（阴影可能与背景重叠）
cornerRadius number Android 确定视图的圆角（CSS边框半径）并覆盖其之前的样式。如果未设置，则使用视图的CSS边框半径。
PS：自2.0版本起，在DIP（或DP，密度无关像素）中计算。
translationZ number Android 确定到表面的额外距离（以DIP计）。
pressedTranslationZ number Android 确定视图处于按下状态时到表面的额外距离。
forcePressAnimation boolean => 默认: false Android 默认情况下，如果视图有StateAnimator，则会被一个提升视图的动画器覆盖。将此设置为true将始终定义此新动画器，本质上使任何可点击的视图都能像按钮一样工作。
maskToBounds boolean => 默认: false iOS 确定阴影是否限制在视图边距内。
shadowColor string => 颜色 #RGB iOS 确定阴影颜色。如果视图已有背景，则不会应用阴影。
shadowOffset number iOS 确定阴影距离（仅在Y轴）的点数。负值表示阴影在视图上方。
shadowOpacity number iOS 从0到1。确定阴影的透明度级别。
shadowRadius number iOS 确定阴影的模糊效果（以点计）。数值越高，模糊效果越强。
useShadowPath boolean => 默认: true iOS 确定是否使用shadowPath来渲染阴影。将此设置为false会对性能产生负面影响。
rasterize boolean => 默认: false iOS 确定视图是否应该被光栅化。激活此选项将增加内存使用量，因为光栅化视图会存储在内存中，但将大幅提高性能。

AndroidData 和 IOSData

如您可能已经注意到，主要的shadow属性接受对象作为参数。您可以在属性绑定中分配它，它将覆盖您可能已定义的任何其他属性。

组件

import { AndroidData, ShapeEnum } from "nativescript-ngx-shadow";
// ...
export class MyComponent {
  fabShadow: AndroidData = {
    elevation: 6,
    bgcolor: "#ff1744",
    shape: ShapeEnum.OVAL
  };
  // ...
}

在模板中您可以这样做

<Label [shadow]="fabShadow" width="56" height="56"></Label>

预定义的高度

如果您想与Material Design规范保持一致，但苦于记住视图应该有哪种高度，我们整理了一份预定义高度的列表

  • SWITCH: 1
  • CARD_RESTING: 2
  • RAISED_BUTTON_RESTING: 2
  • SEARCH_BAR_RESTING: 2
  • REFRESH_INDICADOR: 3
  • SEARCH_BAR_SCROLLED: 3
  • APPBAR: 4
  • FAB_RESTING: 6
  • SNACKBAR: 6
  • BOTTOM_NAVIGATION_BAR: 8
  • MENU: 8
  • CARD_PICKED_UP: 8,
  • RAISED_BUTTON_PRESSED: 8
  • SUBMENU_LEVEL1: 9
  • SUBMENU_LEVEL2: 10
  • SUBMENU_LEVEL3: 11
  • SUBMENU_LEVEL4: 12
  • SUBMENU_LEVEL5: 13
  • FAB_PRESSED: 12
  • NAV_DRAWER: 16
  • RIGHT_DRAWER: 16
  • MODAL_BOTTOM_SHEET: 16
  • DIALOG: 24
  • PICKER: 24

如果你甚至不想在每次需要阴影视图时检查它，只需导入 Elevation 枚举并享受吧 :)

组件

import { Elevation } from "nativescript-ngx-shadow";
class MyComponent {
  // ...
  ngOnInit(): init {
    this.mySnackBar.elevation = Elevation.SNACKBAR;
  }
  // ...
}

关于版本 2+ 的说明

以下是 2.0 版本上的改进列表

  1. 错误修复：整数指令在 iOS 上无法渲染。
  2. 密度无关像素：现在你不再需要担心根据设备的屏幕密度提供像素相关属性的值。自 iPhone 6S 以来，每个点对应 9 个设备像素（水平 3 个，垂直 3 个 - 这就是为什么有 @3x 图片的原因 - 了解更多）。在 Android 上也是如此，基准（mdpi）被认为是每英寸约 160 个像素（或点），而大多数现代设备的屏幕密度更高，达到约 640dpi 或更高。 了解更多。
  3. 新的 Android 特定属性称为 translationZ。elevation 属性是虚拟 Z 轴（3D 轴）的基准，但根据 官方文档，它不是唯一的一部分。然后，translationZ 将为表面添加额外的距离，它主要用于动画。
  4. 2.1.X 如下所述覆盖 Android 默认 StateListAnimator

覆盖 Android 默认 StateListAnimator

Android 按钮分为三类：浮动、凸起和平坦。与标签和其他 UI 元素不同，每个按钮类别都有自己的状态动画器。因此，当按钮被点击时，Android 会以 Angular 没有通知的方式影响它们的 elevation（和 Z 轴平移）。在点击动画结束时，按钮回到默认的休息状态（即凸起按钮的 elevation 为 2dp，translationZ 为 0），覆盖了由本插件设置的阴影。

自 2.1.0 版本以来，此插件用一个新的 StateListAnimator 替换了默认的 StateListAnimator，该动画器将返回你为 elevation 和 translationZ 提供的值。

如果你想要自定义 StateListAnimator 的灵活性，请随意提交一个 issue。到目前为止，动机只是简单地将此插件应用于按钮，一旦它们被点击，就无需更改它们的状态。

还可以将此 StateListAnimator 设置为任何 View，使其表现得像按钮。

插件开发工作流程

  • 将存储库克隆到您的计算机上。
  • 运行 npm install 准备项目
  • 使用 npm run android 或 npm run ios 运行和部署到您的设备或模拟器
  • 使用 npm run build 构建 ngPackagr 版本

变更日志

  • 6.0.0 分支：现在与 ngPackagr 打包，以兼容 Angular 6
  • 2.1.0 解耦阴影逻辑/覆盖默认 StateListAnimator
  • 2.0.1 修复旧 Android 设备（< Lollipop）上的错误
  • 2.0.0 密度无关像素/TranslationZ
  • 1.1.3 小问题
  • 1.1.2 修复 CI 构建
  • 1.1.0 支持 iOS 自定义属性
  • 1.0.0 初始实现

许可证

Apache 许可证版本 2.0，2004 年 1 月