NativeScript Angular 阴影指令插件

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

安装

在命令提示符下，转到您的应用程序根目录并执行

tns plugin add nativescript-ngx-shadow

演示

如何使用它

这是一个 Angular 指令，可以帮助您更轻松地处理原生阴影。

阴影是 Material 设计规范的一个重要部分。它引入了高度的概念，这暗示了从表面抬起物体的自然方式。

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

然而，在 Android 上运行此指令时，您需要 SDK 版本大于或等于 21（Android 5.0 棒棒糖或更高版本），否则阴影将无法显示。在任何版本的 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（或 DPs，即密度无关像素）计算，在 iOS 上以 PT（即点）计算。
pressedElevation	数字 \| 字符串	Android	确定按下状态下的视图高度。
形状	string => `'RECTANGLE'` \| `'OVAL'` \| `'RING'` \| `'LINE'` 默认: `'RECTANGLE'`	Android	确定视图的形状并覆盖其格式样式。
bgcolor	string => 颜色 #RGB	Android	确定视图的背景颜色并覆盖其之前背景。如果未设置，则使用之前的背景。注意：将背景设置为透明可能会导致在Android上出现问题（阴影可能会覆盖背景）
cornerRadius	number	Android	确定视图的圆角半径 (CSS border-radius) 并覆盖其之前样式。如果此值未设置，则使用视图的CSS border-radius。 PS：自2.0版本起，它以DIP（或DP，密度无关像素）计算。
translationZ	number	Android	确定到表面的额外距离（以DIP计）。
pressedTranslationZ	number	Android	确定视图处于按下状态时的到表面的额外距离（以DIP计）。
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规范保持一致，但又厌倦了试图记住视图应该具有哪个高度，我们整理了一个预定义高度的列表

开关：1
CARD_RESTING：2
RAISED_BUTTON_RESTING：2
SEARCH_BAR_RESTING：2
REFRESH_INDICATOR：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版本上的改进列表

BugFix：整数指令在iOS上未渲染。
密度无关像素：现在您无需再为设备屏幕密度提供正确的像素相关属性值而烦恼。自iPhone 6S以来，每个点对应9个设备像素（水平3个，垂直3个——这就是为什么有@3x图像的原因——更多内容请查看这里）。对于Android，基准（mdpi）被认为是每英寸大约160像素（或点），而大多数现代设备的屏幕密度要高得多，达到640dpi或更高。了解更多请查看这里。
新增Android特定属性：translationZ。elevation属性是虚拟Z轴（3D轴）的基线，但根据官方文档，它并不是唯一的部分。然后，translationZ将为表面添加额外的距离，主要用于动画。
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，请随意提交一个问题。到目前为止，这样做的动机只是让此插件在按钮被点击后不改变其原始状态。

还可以将此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 License Version 2.0，2004年1月