@tralves/shadowed-label

A NativeScript plugin that extends the UI widget by adding the text-shadow CSS property.

> This package only works on NativeScript >=7.0. You will find the NS 6 version here;

| shadow examples | sample from the playground |
| ----------------------------------- | ---------------------------------------------------------------------------------------- |
|  |  |

Installation

``bash
ns plugin add @tralves/shadowed-label
`

Usage

After installing the plugin, you can add the shadow to the shadowed label with the CSS syntax:

text-shadow:

E.g.

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

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

You can also add the text shadow as a property (e.g. )

_iOS note: The blur radius appears to scatter the shadow more on iOS and on Android._

$3

IMPORTANT: _Make sure you include xmlns:ui="@tralves/shadowed-label" on the Page element_

#### XML

`xml


class="h1 text-center"
text="title with CSS shadow"
/>
text="color shadow"
textShadow="2 10 4 rgb(255, 100, 100)"
fontStyle="italic"
fontSize="40"
class="m-b-20 text-center"
/>
class="m-t-20 c-black"
style="text-shadow: 1 1 1 #55a"
textWrap="true"
text="Shadow in 'style'!"
/>


`

#### CSS

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

---

$3

Add the following lines to app/app.module.ts:

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

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

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

---

$3

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

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

License

Apache License Version 2.0