https://github.com/tralves/nativescript-shadowed-label

A NativeScript Label that supports text shadow.
https://github.com/tralves/nativescript-shadowed-label

Last synced: about 1 month ago
JSON representation

A NativeScript Label that supports text shadow.

• Host: GitHub
• URL: https://github.com/tralves/nativescript-shadowed-label
• Owner: tralves
• License: apache-2.0
• Created: 2019-04-17T21:06:15.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T06:52:52.000Z (almost 2 years ago)
• Last Synced: 2024-11-09T14:52:32.176Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 6.6 MB
• Stars: 12
• Watchers: 2
• Forks: 3
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# NativeScript Shadowed Label



    





    





    





    



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

| shadow examples                     | sample from the [playground](https://play.nativescript.org/?template=play-vue&id=roCIm3) |

| ----------------------------------- | ---------------------------------------------------------------------------------------- |

| ![](images/shadowed-label-demo.png) | ![](images/playing-with-shadows.gif)                                                     |

> This version is for NS 6. You will find the NS 7 version [here](https://github.com/tralves/nativescript-plugins/tree/master/packages/shadowed-label).

## Installation

```bash

tns plugin add nativescript-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 scatters the shadow more on iOS and on Android._

### NativeScript Plain

IMPORTANT: _Make sure you include `xmlns:shadowedLabel="nativescript-shadowed-label"` on the Page element_

#### XML

```xml

  

    

    

    

  

```

#### CSS

```css

.h1 {

    text-shadow: 2 2 2 #aaa;

    font-weight: bold;

}

```

---

### NativeScript Angular

```typescript

import { registerElement } from 'nativescript-angular/element-registry';

import { ShadowedLabel } from 'nativescript-shadowed-label;

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

```

```html

```

---

### NativeScript Vue

```javascript

import Vue from 'nativescript-vue';

Vue.registerElement('ShadowedLabel', () => require('nativescript-shadowed-label').ShadowedLabel);

```

```html

```

## License

Apache License Version 2.0, January 2004