Nativescript-Vue 阴影指令插件

此存储库是将 @JoshDSommer 的 NativeScript Angular 阴影指令项目转移到 Nativescript-Vue。因此，代码的大部分灵感来源于它，但为了适应 Vue 的指令方式，进行了许多更改。

安装

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

npm install nativescript-vue-shadow-ns-7

演示

Screenshot

如何使用它

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

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

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

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

将指令导入 main.js

import NSVueShadow from 'nativescript-vue-shadow-ns-7'
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-ns-7";
// ...
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	确定视图是否应该进行光栅化。激活此功能将增加内存使用量，因为光栅化视图存储在内存中，但将大大提高性能。

预定义的高度

如果您想与材料设计规范保持一致，但又厌倦了试图记住视图应该具有哪个高度。我们已整理了一个预定义高度的列表

开关：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-vue-shadow-ns-7";

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

覆盖Android默认StateListAnimator

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

此插件用一种可以恢复到您提供的elevation和translationZ值的StateListAnimator替换了默认的StateListAnimator。

如果您想要定义自己的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许可证