Nativescript-Vue Shadow 指令插件

该仓库是将 @JoshDSommer 的 NativeScript Angular Shadow 指令项目转换为 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 样式，因此阴影可能不会被应用。

建议避免将像 背景颜色 和 边框半径 这样的属性应用于您打算应用此指令的视图（注意：现在已支持此功能）。

属性列表

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

属性	类型	默认值	平台	描述
高程	数字 \| 字符串		两者都适用	确定视图从表面到的高度。它执行所有与阴影相关的计算。您可以看看这个标准材质设计高度枚举（链接）。顺便说一下，在Android上是按DIP（或DP，密度无关像素）计算的，或在iOS上是按PT（点）计算的。
按下高程	数字 \| 字符串		Android	确定按下状态下的视图高度。
形状	字符串 => `'RECTANGLE'` \| `'OVAL'` \| `'RING'` \| `'LINE'`	`'RECTANGLE'`	Android	确定视图的形状并覆盖其格式样式。
背景色	字符串 (#RGB)		Android	确定视图的背景色并覆盖其之前的背景。如果没有设置，则使用之前的背景。注意：将背景设置为透明在Android上可能会引起问题（阴影可能会与背景重叠）
圆角	数字		Android	确定视图的圆角半径（CSS边框半径）并覆盖其之前的样式。如果没有设置，则使用视图的CSS边框半径。顺便说一下，这是按DIP（或DP，密度无关像素）计算的。
translationZ	数字		Android	确定到表面的额外距离（以DIP为单位）。
按下translationZ	数字		Android	确定当视图处于按下状态时到表面的额外距离（以DIP为单位）。
forcePressAnimation	布尔值	false	Android	默认情况下，如果一个视图有StateAnimator，它会被一个提升视图的动画器覆盖。将此设置为true将始终定义这个新的动画器，从而让任何可点击的视图都像按钮一样工作。
maskToBounds	布尔值	false	iOS	确定阴影是否将被限制在视图边距内。
阴影颜色	字符串 (#RGB)		iOS	确定阴影颜色。如果视图已经有背景，则不会应用阴影。
阴影偏移	数字		iOS	确定阴影在点（仅在Y轴）的距离。负值表示阴影在视图上方。
阴影不透明度	数字		iOS	从0到1。确定阴影的不透明度级别。
阴影半径	数字		iOS	确定阴影的模糊效果（以点为单位）。数值越高，模糊程度越大。
useShadowPath	布尔值	true	iOS	确定是否使用shadowPath来渲染阴影。将此设置为false会对性能产生负面影响。
rasterize	布尔值	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
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-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替换了默认的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许可证