A NativeScript Label that supports text shadow.
npm install nativescript-shadowed-labelA NativeScript plugin that extends the UI widget by adding the text-shadow CSS property.
| shadow examples | sample from the playground |
| ----------------------------------- | ---------------------------------------------------------------------------------------- |
|  |  |
``bash`
tns plugin add nativescript-shadowed-label
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 scatters the shadow more on iOS and on Android._
IMPORTANT: _Make sure you include xmlns:shadowedLabel="nativescript-shadowed-label" on the Page element_
#### XML
`xml`
text="title with CSS shadow"
/>
textShadow="2 10 4 rgb(255, 100, 100)"
fontStyle="italic"
fontSize="40"
class="m-b-20 text-center"
/>
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;
}
---
`typescript`
import { registerElement } from 'nativescript-angular/element-registry';
import { ShadowedLabel } from 'nativescript-shadowed-label;
registerElement('ShadowedLabel', () => ShadowedLabel);
`html`
textShadow="2 10 4 rgb(255, 100, 100)"
fontStyle="italic"
fontSize="40"
class="m-b-20 text-center"
/>
style="text-shadow: 1 1 1 #55a"
textWrap="true"
text="Shadow in 'style'!"
/>
---
`javascript`
import Vue from 'nativescript-vue';
Vue.registerElement('ShadowedLabel', () => require('nativescript-shadowed-label').ShadowedLabel);
`html``
textShadow="2 10 4 rgb(255, 100, 100)"
fontStyle="italic"
fontSize="40"
class="m-b-20 text-center"
/>
Apache License Version 2.0, January 2004