Skip to content

Commit bd818c4

Browse files
committed
chore: readme
1 parent 44ac472 commit bd818c4

File tree

1 file changed

+54
-5
lines changed

1 file changed

+54
-5
lines changed

packages/collectionview/README.md

Lines changed: 54 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,14 @@
5252
* [Usage in Angular](#usage-in-angular)
5353
* [Simple Example](#simple-example-1)
5454
* [Templates Example](#templates-example-1)
55-
* [Usage in Vue](#usage-in-vue)
55+
* [Usage in Vue 3](#usage-in-vue-3)
5656
* [Simple Example](#simple-example-2)
57-
* [Usage in Svelte](#usage-in-svelte)
57+
* [Usage in Vue 2](#usage-in-vue-2)
5858
* [Simple Example](#simple-example-3)
59-
* [Usage in React](#usage-in-react)
59+
* [Usage in Svelte](#usage-in-svelte)
6060
* [Simple Example](#simple-example-4)
61+
* [Usage in React](#usage-in-react)
62+
* [Simple Example](#simple-example-5)
6163
* [Demos](#demos)
6264
* [Demos and Development](#demos-and-development)
6365
* [Repo Setup](#repo-setup)
@@ -266,9 +268,56 @@ If you want to use multiple item templates, you can do that very similarly to ho
266268
For a more complete example, look in the `demo-ng` directory.
267269

268270

269-
[](#usage-in-vue)
271+
[](#usage-in-vue-3)
272+
273+
## Usage in Vue 3
274+
275+
Register the plugin in your `app.ts`.
276+
277+
```ts
278+
import CollectionView from '@nativescript-community/ui-collectionview/vue3';
279+
280+
const app = createApp(YourComponent);
281+
app.use(CollectionView);
282+
app.start();
283+
```
284+
285+
### Simple Example
286+
In your component, add the following to make a simple array of objects.
287+
288+
```html
289+
<script setup lang="ts">
290+
import { ObservableArray } from '@nativescript/core';
291+
import { ref } from "nativescript-vue";
292+
293+
const itemList = ref(new ObservableArray([
294+
{ name: 'TURQUOISE', color: '#1abc9c' },
295+
{ name: 'EMERALD', color: '#2ecc71' },
296+
{ name: 'PETER RIVER', color: '#3498db' },
297+
{ name: 'AMETHYST', color: '#9b59b6' },
298+
{ name: 'WET ASPHALT', color: '#34495e' }
299+
]));
300+
</script>
301+
```
302+
303+
Then add the following XML to your component.
304+
305+
```xml
306+
<CollectionView :items="itemList" colWidth="50%" rowHeight="100">
307+
<template #default="{ item }">
308+
<StackLayout :backgroundColor="item.color" >
309+
<Label :text="item.name"/>
310+
</StackLayout>
311+
</template>
312+
</CollectionView>
313+
```
314+
315+
For a more complete example, look in the `demo-vue3` and [demo-snippets/vue3](https://github.com/nativescript-community/ui-collectionview/tree/master/demo-snippets/vue3) directory.
316+
317+
318+
[](#usage-in-vue-2)
270319

271-
## Usage in Vue
320+
## Usage in Vue 2
272321

273322
Register the plugin in your `app.ts`.
274323

0 commit comments

Comments
 (0)