Skip to content

Commit 1ef84ec

Browse files
committed
chore: readme
1 parent c8b32f0 commit 1ef84ec

File tree

2 files changed

+45
-3
lines changed

2 files changed

+45
-3
lines changed

packages/ui-canvas/README.md

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
* [XML](#xml)
4444
* [NativeScript + Angular](#nativescript--angular)
4545
* [NativeScript + Vue](#nativescript--vue)
46+
* [NativeScript + Svelte](#nativescript--svelte)
4647
* [Draw Method ](#draw-method-)
4748
* [Examples:](#examples)
4849
* [Demos and Development](#demos-and-development)
@@ -119,11 +120,35 @@ Vue.use(CanvasPlugin);
119120
```
120121
121122
123+
[](#nativescript--svelte)
124+
125+
## NativeScript + Svelte
126+
127+
```ts
128+
// app/app.ts
129+
import { registerNativeViewElement } from 'svelte-native/dom';
130+
registerNativeViewElement('canvasView', () => require('@nativescript-community/ui-canvas').CanvasView);
131+
```
132+
133+
```svelte
134+
<!-- app/components/Foo.svelte -->
135+
<stackLayout>
136+
<canvasView width="300" height="300" on:draw={draw} />
137+
</stackLayout>
138+
```
139+
140+
122141
[](#draw-method-)
123142
124143
## Draw Method
125-
```typescript
144+
145+
```ts
146+
import type { Canvas } from '@nativescript-community/ui-canvas';
147+
import { Paint, createRect } from '@nativescript-community/ui-canvas';
148+
import { Color } from '@nativescript/core';
149+
126150
function draw(event: { canvas: Canvas }) {
151+
const canvas = event.canvas;
127152
const paint = new Paint();
128153
paint.setColor(new Color('black'));
129154
paint.strokeWidth = 10;
@@ -241,4 +266,4 @@ One easy solution is t modify `~/.gitconfig` and add
241266
242267
## Questions
243268
244-
If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).
269+
If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).

packages/ui-svg/README.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@
3939

4040
* [Installation](#installation)
4141
* [Configuration](#configuration)
42+
* [NativeScript + Vue](#nativescript--vue)
43+
* [NativeScript + Svelte](#nativescript--svelte)
4244
* [Examples:](#examples)
4345
* [Demos and Development](#demos-and-development)
4446
* [Repo Setup](#repo-setup)
@@ -67,6 +69,8 @@ Run the following command from the root of your project:
6769

6870
For now only `vue` (and core) is supported.
6971

72+
### NativeScript + Vue
73+
7074
```ts
7175
import CanvasSVG from '@nativescript-community/ui-svg/vue';
7276
Vue.use(CanvasSVG);
@@ -100,6 +104,19 @@ Or within and Canvas View extending `CanvasView` like `CanvasLabel`
100104
</CanvasSVG>
101105
```
102106

107+
### NativeScript + Svelte
108+
109+
```ts
110+
// app/app.ts
111+
import { registerNativeViewElement } from 'svelte-native/dom';
112+
registerNativeViewElement('svgView', () => require('@nativescript-community/ui-svg').SVGView);
113+
```
114+
115+
```svelte
116+
<!-- app/components/Foo.svelte -->
117+
<svgView src="~/assets/foo.svg" aspectFit="stretch" />
118+
```
119+
103120
### Examples:
104121

105122
- [Basic](demo-snippets/vue/SVG.vue)
@@ -202,4 +219,4 @@ One easy solution is t modify `~/.gitconfig` and add
202219

203220
## Questions
204221

205-
If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).
222+
If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).

0 commit comments

Comments
 (0)