Nativescript-Vue 阴影指令插件

这个仓库是将 @JoshDSommer 的 NativeScript Angular 阴影指令项目移植到 Nativescript-Vue。因此，代码中有很大一部分是受其启发的，但为了适应 Vue 的指令方式，进行了许多修改。

安装

从命令提示符进入您的应用根目录，并执行

npm install nativescript-vue-shadow

演示

Screenshot

如何使用它

这是一个 Vue 指令，可以简化您在使用 Nativescript-Vue 的原生阴影时的操作。

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

使用这个指令，您无需担心 Android 和 iOS 上阴影的各个方面。另一方面，如果您关心某些细节，您仍然可以提供一些额外的属性，并将覆盖默认属性。

然而，在 Android 上运行此指令需要 SDK 版本大于或等于 21（Android 5.0 Lollipop 或更高版本），否则阴影将不会显示。在任何版本的 iOS 上运行应该没有问题。

将指令导入 main.js

import NSVueShadow from 'nativescript-vue-shadow'
Vue.use(NSVueShadow)

在视图或组件中使用

简单属性 v-shadow

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

您可以在 template 标签中绑定它。这可以是 string、number 或 object（AndroidData | IOSData）

<Label v-shadow="myCustomData"></Label>

然后在您的 script 标签中，您可以这样操作，这里我们绑定了对象

import { AndroidData, ShapeEnum } from "nativescript-vue-shadow";
// ...
export default class MyComponent extends Vue {
  private myCustomData: AndroidData = {
    elevation: 6,
    bgcolor: "#ff1744",
    shape: ShapeEnum.OVAL
  };
  // ...
}

您也可以通过使用 v-shadow 指令并直接在标记中提供详细信息（AndroidData | IOSData）

<Label v-shadow="{ elevation: elevation, shape: shape.RECTANGLE, bgcolor: '#006968', cornerRadius: 15 }"></Label>

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

建议避免将 背景颜色 和 边框半径 等应用于打算应用此指令的相同视图（注意：现在支持此功能）。

属性列表

下表列出了所有可能的属性，并描述了它们，同时展示了每个属性支持的平台

属性	类型	默认值	平台	描述
elevation	number \| string		both	确定视图从表面到的高度。它处理所有与阴影相关的计算。你可能想看看这个枚举，它包含标准材料设计的高度。提醒一下，在Android上它是通过DIP（或DP，密度无关像素）来计算的，在iOS上是通过PT（点）来计算的。
pressedElevation	number \| string		Android	确定视图在按下状态下的高度。
shape	string => `'RECTANGLE'` \| `'OVAL'` \| `'RING'` \| `'LINE'`	`'RECTANGLE'`	Android	确定视图的形状并覆盖其格式样式。
bgcolor	string (#RGB)		Android	确定视图的背景颜色并覆盖其之前的背景。如果没有设置，将使用之前的背景。注意：将背景设置为透明在Android上可能会引起问题（阴影可能重叠背景）
cornerRadius	number		Android	确定视图的圆角半径 (CSS border-radius) 并覆盖其之前的样式。如果没有设置，将使用视图的CSS border-radius。提醒一下，它是通过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	确定视图是否应该被光栅化。激活此功能会增加内存使用，因为光栅化的视图存储在内存中，但将大大提高性能。

预定义的高度

如果你想要与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
菜单：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-vue-shadow";

export default class MyComponent extends Vue {
  // ...
  private elevation: number = Elevation.SNACKBAR;
  // ...
}

覆盖Android默认StateListAnimator

Android按钮分为三类：浮动、抬起和平坦。与标签和其他UI元素不同，每个按钮类别都有自己的状态动画器。因此，当按钮被点击时，Android会以Angular无法通知的方式影响它们的高度（和z轴平移）。在点击动画结束时，按钮恢复到默认的静止状态（即抬起按钮的elevation为2dp和translationZ为0），覆盖了此插件建立的阴影。

此插件用一个新的替换默认的StateListAnimator，该动画器会恢复你为elevation和translationZ提供的值。

如果您想自定义 StateListAnimator，欢迎提交 PR。到目前为止，推动这个插件发展的动力很简单，那就是让按钮在被点击后不会改变其原始状态。

您也可以将这个 StateListAnimator 应用于任何 View，使其行为像按钮一样。

插件开发工作流程

将仓库克隆到您的机器上。
在项目基本目录下运行 npm install。
切换到 Demo 目录，然后运行 npm install。
使用 npm run serve:android 或 npm run serve:ios 运行并部署到您的设备或模拟器。（使用 debug:android 或 debug:ios 来连接到开发者工具）

更新日志

0.1.0 初始实现

许可协议

MIT 许可协议