Skip to content

Commit e0cf0d2

Browse files
NathanWalkerNathanWalker
committed
feat: plugins from ui-kit
1 parent c168e2d commit e0cf0d2

9 files changed

Lines changed: 834 additions & 0 deletions

File tree

‎.vitepress/config.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,16 @@ export default defineConfig({
5656
{ text: 'CardView', link: '/plugins/cardview' },
5757
{ text: 'Carousel', link: '/plugins/carousel' },
5858
{ text: 'Blur', link: '/plugins/blur' },
59+
{ text: 'Variable Blur View', link: '/plugins/variable-blur-view' },
5960
{ text: 'Loading Indicator', link: '/plugins/loading-indicator' },
61+
{ text: 'Shimmer', link: '/plugins/shimmer' },
6062
{ text: 'Fancy Alert', link: '/plugins/fancyalert' },
6163
{ text: 'Filterable Listpicker', link: '/plugins/filterable-listpicker' },
6264
{ text: 'Input Mask', link: '/plugins/input-mask' },
6365
{ text: 'ExoPlayer', link: '/plugins/exoplayer' },
66+
{ text: 'Fluid Segmented Bar', link: '/plugins/fluid-segmented-bar' },
67+
{ text: 'Label Marquee', link: '/plugins/label-marquee' },
68+
{ text: 'Markdown View', link: '/plugins/markdown-view' },
6469
],
6570
},
6671
{
@@ -83,6 +88,7 @@ export default defineConfig({
8388
{ text: 'Aptabase', link: '/plugins/aptabase' },
8489
{ text: 'Dynatrace', link: '/plugins/dynatrace' },
8590
{ text: 'Appcues', link: '/plugins/appcues' },
91+
{ text: 'Smartlook', link: '/plugins/smartlook' },
8692
],
8793
},
8894
{
@@ -110,6 +116,12 @@ export default defineConfig({
110116
{ text: 'Tracking Transparency', link: '/plugins/tracking-transparency' },
111117
],
112118
},
119+
{
120+
text: 'Utilities',
121+
items: [
122+
{ text: 'Font Icon', link: '/plugins/fonticon' },
123+
],
124+
},
113125
],
114126
'/ncharts/': [
115127
{

‎.vitepress/theme/PluginsHome.vue‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,69 @@ const plugins = [
214214
href: '/plugins/walletconnect',
215215
featured: false,
216216
},
217+
{
218+
name: '@nstudio/nativescript-shimmer',
219+
title: 'Shimmer',
220+
description: 'Shimmer loading effect for placeholder content.',
221+
icon: '✨',
222+
gradient: 'from-yellow-400 to-orange-400',
223+
href: '/plugins/shimmer',
224+
featured: false,
225+
},
226+
{
227+
name: '@nstudio/nativescript-label-marquee',
228+
title: 'Label Marquee',
229+
description: 'Scrolling marquee effect for text that overflows.',
230+
icon: '📜',
231+
gradient: 'from-pink-500 to-rose-500',
232+
href: '/plugins/label-marquee',
233+
featured: false,
234+
},
235+
{
236+
name: '@nstudio/nativescript-markdown-view',
237+
title: 'Markdown View',
238+
description: 'Native markdown rendering for iOS and Android.',
239+
icon: '📝',
240+
gradient: 'from-slate-500 to-gray-600',
241+
href: '/plugins/markdown-view',
242+
featured: false,
243+
},
244+
{
245+
name: '@nstudio/nativescript-fluid-segmented-bar',
246+
title: 'Fluid Segmented Bar',
247+
description: 'Animated segmented bar with fluid transitions.',
248+
icon: '🎚️',
249+
gradient: 'from-violet-500 to-fuchsia-500',
250+
href: '/plugins/fluid-segmented-bar',
251+
featured: false,
252+
},
253+
{
254+
name: '@nstudio/nativescript-fonticon',
255+
title: 'Font Icon',
256+
description: 'Use icon fonts with simple class names instead of unicodes.',
257+
icon: '🔤',
258+
gradient: 'from-emerald-500 to-cyan-500',
259+
href: '/plugins/fonticon',
260+
featured: false,
261+
},
262+
{
263+
name: '@nstudio/nativescript-variable-blur-view',
264+
title: 'Variable Blur View',
265+
description: 'iOS variable blur effect for stunning visual depth.',
266+
icon: '🌁',
267+
gradient: 'from-blue-400 to-purple-500',
268+
href: '/plugins/variable-blur-view',
269+
featured: false,
270+
},
271+
{
272+
name: '@nstudio/nativescript-smartlook',
273+
title: 'Smartlook',
274+
description: 'Product analytics and visual user insights recording.',
275+
icon: '👁️',
276+
gradient: 'from-orange-500 to-red-500',
277+
href: '/plugins/smartlook',
278+
featured: false,
279+
},
217280
];
218281
219282
const featuredPlugin = plugins.find(p => p.featured);

‎content/plugins/fluid-segmented-bar.md‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
# Fluid Segmented Bar
2+
3+
Fluid Segmented Bar to liven up any standard SegmentedBar control with smooth animations.
4+
5+
- **iOS**: Uses [SJFluidSegmentedControl](https://github.com/sasojadrovski/SJFluidSegmentedControl)
6+
- **Android**: Uses standard SegmentedBar (Jetpack Compose support coming)
7+
8+
## Installation
9+
10+
```bash
11+
npm install @nstudio/nativescript-fluid-segmented-bar
12+
```
13+
14+
## Usage
15+
16+
### NativeScript Core
17+
18+
```xml
19+
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
20+
xmlns:fsb="@nstudio/nativescript-fluid-segmented-bar">
21+
<StackLayout>
22+
<fsb:FluidSegmentedBar
23+
items="{{items}}"
24+
gradientColorSides="{{gradientColorSides}}"
25+
selectedIndexChanged="{{selectedIndexChanged}}"
26+
didScrollOffset="{{didScrollOffset}}"/>
27+
</StackLayout>
28+
</Page>
29+
```
30+
31+
```typescript
32+
import { Color } from '@nativescript/core';
33+
import {
34+
FluidSegmentedBarItem,
35+
FluidSegmentedBarGradientColorSides,
36+
FluidSegmentedBarIndexChangedEvent,
37+
FluidSegmentedBarDidScrollEvent
38+
} from '@nstudio/nativescript-fluid-segmented-bar';
39+
40+
const items: Array<FluidSegmentedBarItem> = [
41+
{
42+
title: 'Enjoy',
43+
colors: [new Color('#485ae6'), new Color('#87aeed')],
44+
},
45+
{
46+
title: 'Your',
47+
colors: [new Color('#87aeed'), new Color('#e53ca9')],
48+
},
49+
{
50+
title: 'Life',
51+
colors: [new Color('#c2c96a'), new Color('#678d50')],
52+
},
53+
];
54+
55+
const gradientColorSides: FluidSegmentedBarGradientColorSides = {
56+
left: [new Color('#87aeed')],
57+
right: [new Color('#c2c96a')],
58+
};
59+
60+
function selectedIndexChanged(args: FluidSegmentedBarIndexChangedEvent) {
61+
console.log('selectedIndexChanged:', args.newIndex);
62+
}
63+
64+
function didScrollOffset(args: FluidSegmentedBarDidScrollEvent) {
65+
console.log('didScrollOffset:', args.offset);
66+
}
67+
```
68+
69+
### Framework Registration
70+
71+
```typescript
72+
import { FluidSegmentedBar } from '@nstudio/nativescript-fluid-segmented-bar';
73+
74+
// Angular
75+
import { registerElement } from '@nativescript/angular';
76+
registerElement('FluidSegmentedBar', () => FluidSegmentedBar);
77+
78+
// Vue
79+
Vue.registerElement('FluidSegmentedBar', () => FluidSegmentedBar);
80+
81+
// React
82+
registerElement('fluidSegmentedBar', () => FluidSegmentedBar);
83+
84+
// Svelte
85+
registerNativeViewElement('fluidSegmentedBar', () => FluidSegmentedBar);
86+
87+
// Solid
88+
registerElement('fluidSegmentedBar', FluidSegmentedBar);
89+
```
90+
91+
## Properties
92+
93+
| Property | Type | Description |
94+
| --- | --- | --- |
95+
| `items` | `FluidSegmentedBarItem[]` | Collection of bar items with `title` and `colors` |
96+
| `gradientColorSides` | `FluidSegmentedBarGradientColorSides` | The gradient colors for left and right sides |
97+
98+
## Events
99+
100+
| Event | Description |
101+
| --- | --- |
102+
| `selectedIndexChanged` | Fired when the selected index changes |
103+
| `didScrollOffset` | Fired during animation with `offset` and `maxOffset` values |
104+
105+
## Types
106+
107+
```typescript
108+
interface FluidSegmentedBarItem {
109+
title: string;
110+
colors: Color[];
111+
}
112+
113+
interface FluidSegmentedBarGradientColorSides {
114+
left: Color[];
115+
right: Color[];
116+
}
117+
```
118+
119+
## License
120+
121+
Apache License Version 2.0

‎content/plugins/fonticon.md‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
# Font Icon
2+
3+
A simpler way to use font icons with NativeScript. Reference icons by class name instead of unicode values.
4+
5+
## Installation
6+
7+
```bash
8+
npm install @nstudio/nativescript-fonticon
9+
```
10+
11+
## The Problem
12+
13+
You can use icon fonts with NativeScript by combining a class with a unicode reference:
14+
15+
```css
16+
.fa {
17+
font-family: FontAwesome;
18+
}
19+
```
20+
21+
```xml
22+
<Label class="fa" text="\uf293"></Label>
23+
```
24+
25+
This works but keeping up with unicodes is not fun.
26+
27+
## The Solution
28+
29+
With this plugin, reference icons by their class name instead:
30+
31+
```xml
32+
<Label class="fa" text="{{'fa-bluetooth' | fonticon}}"></Label>
33+
```
34+
35+
## Setup
36+
37+
### 1. Add Font Files
38+
39+
Place your font `.ttf` file in `app/fonts`:
40+
41+
```
42+
app/fonts/fontawesome-webfont.ttf
43+
```
44+
45+
### 2. Create CSS Class
46+
47+
In `app.css`:
48+
49+
```css
50+
.fa {
51+
font-family: FontAwesome, fontawesome-webfont;
52+
}
53+
```
54+
55+
**Note**: Android uses the filename, iOS uses the font name. You can rename the file to match.
56+
57+
### 3. Add Icon CSS
58+
59+
Copy the icon CSS file to your app:
60+
61+
```
62+
app/assets/font-awesome.css
63+
```
64+
65+
## Usage
66+
67+
### Vanilla NativeScript
68+
69+
```typescript
70+
import { Application } from '@nativescript/core';
71+
import { FontIconFactory, fonticon } from '@nstudio/nativescript-fonticon';
72+
73+
// Optional: Enable debug logging
74+
FontIconFactory.debug = true;
75+
76+
// Configure font icon CSS paths
77+
FontIconFactory.paths = {
78+
'fa': 'font-awesome.css',
79+
'ion': 'ionicons.css'
80+
};
81+
82+
// Load the CSS mappings
83+
FontIconFactory.loadCss();
84+
85+
// Make fonticon available in views
86+
Application.setResources({ fonticon });
87+
88+
Application.run({ moduleName: 'main-page' });
89+
```
90+
91+
```xml
92+
<Label class="fa" text="{{'fa-bluetooth' | fonticon}}"></Label>
93+
```
94+
95+
### Angular
96+
97+
```typescript
98+
import { FontIconModule, FontIconService } from '@nstudio/nativescript-fonticon/angular';
99+
100+
// Optional: Enable debug logging
101+
FontIconService.debug = true;
102+
103+
@NgModule({
104+
imports: [
105+
NativeScriptModule,
106+
FontIconModule.forRoot({
107+
'fa': require('~/app/assets/css/fa-5.css'),
108+
'ion': require('~/app/assets/css/ionicons.css')
109+
})
110+
]
111+
})
112+
export class AppModule {}
113+
```
114+
115+
```html
116+
<Label class="fa" [text]="'fa-bluetooth' | fonticon"></Label>
117+
```
118+
119+
## API
120+
121+
### FontIconFactory (Vanilla)
122+
123+
| Property/Method | Description |
124+
| --- | --- |
125+
| `debug` | Enable console logging of CSS mappings |
126+
| `paths` | Object mapping prefixes to CSS file paths |
127+
| `loadCss()` | Load and parse the CSS files |
128+
129+
### FontIconModule (Angular)
130+
131+
| Method | Description |
132+
| --- | --- |
133+
| `forRoot(config)` | Configure with prefix-to-CSS mappings |
134+
135+
### FontIconService (Angular)
136+
137+
| Property | Description |
138+
| --- | --- |
139+
| `debug` | Enable console logging |
140+
141+
## Supported Icon Fonts
142+
143+
- FontAwesome
144+
- Ionicons
145+
- Material Icons
146+
- Any custom icon font with CSS mappings
147+
148+
## License
149+
150+
Apache License Version 2.0

0 commit comments

Comments
 (0)