@tralves/shadowed-label

这是一个扩展 <Label> UI 小部件并添加 text-shadow CSS 属性的 NativeScript 插件。

此包仅在 NativeScript >=7.0 上工作。您可以在 这里 找到 NS 6 版本；

阴影示例	来自 playground 的示例

安装

ns plugin add @tralves/shadowed-label

用法

安装插件后，您可以使用 CSS 语法将阴影添加到阴影标签

text-shadow: <offset-x> <offset-y> <blur-radius> <color>

例如。

.shadow1 {
    text-shadow: 1 1 3 blue;
}

.shadow2 {
    text-shadow: 10px 10px 10px rgba(100, 130, 200, 0.8);
}

您还可以将文本阴影作为属性添加（例如 <ShadowedLabel textShadow="1 1 1 #55a">）

iOS 注意：在 iOS 和 Android 上，模糊半径似乎会使阴影更散。

NativeScript 纯文本

重要：请确保在 Page 元素上包含 xmlns:ui="@tralves/shadowed-label"

XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:ui="@tralves/shadowed-label">
  <StackLayout class="p-20">
    <ui:ShadowedLabel
      class="h1 text-center"
      text="title with CSS shadow"
    />
    <ui:ShadowedLabel
      text="color shadow"
      textShadow="2 10 4 rgb(255, 100, 100)"
      fontStyle="italic"
      fontSize="40"
      class="m-b-20 text-center"
    />
    <ui:ShadowedLabel
      class="m-t-20 c-black"
      style="text-shadow: 1 1 1 #55a"
      textWrap="true"
      text="Shadow in 'style'!"
    />
  </GridLayout>
</Page>

CSS

.h1 {
    text-shadow: 2 2 2 #aaa;
    font-weight: bold;
}

NativeScript Angular

将以下行添加到 app/app.module.ts

import { registerElement } from '@nativescript/angular';
import { ShadowedLabel } from '@tralves/shadowed-label'; 

registerElement('ShadowedLabel', () => ShadowedLabel);

<ShadowedLabel
    row="0"
    class="h1 text-center"
    text="title with shadow"
    textShadow="0 0 6 rgb(100, 100, 200)"
></ShadowedLabel>
<ShadowedLabel
    row="1"
    text="color shadow"
    textShadow="2 10 4 rgb(255, 100, 100)"
    fontStyle="italic"
    fontSize="40"
    class="m-b-20 text-center"
></ShadowedLabel>

NativeScript Vue

import Vue from 'nativescript-vue';
Vue.registerElement('ShadowedLabel', () => require('@tralves/shadowed-label').ShadowedLabel);

<shadowed-label
    text="color shadow"
    textShadow="2 10 4 rgb(255, 100, 100)"
    fontStyle="italic"
    fontSize="40"
    class="m-b-20 text-center"
/>

许可证

Apache 许可证版本 2.0