|
52 | 52 | * [Usage in Angular](#usage-in-angular) |
53 | 53 | * [Simple Example](#simple-example-1) |
54 | 54 | * [Templates Example](#templates-example-1) |
55 | | -* [Usage in Vue](#usage-in-vue) |
| 55 | +* [Usage in Vue 3](#usage-in-vue-3) |
56 | 56 | * [Simple Example](#simple-example-2) |
57 | | -* [Usage in Svelte](#usage-in-svelte) |
| 57 | +* [Usage in Vue 2](#usage-in-vue-2) |
58 | 58 | * [Simple Example](#simple-example-3) |
59 | | -* [Usage in React](#usage-in-react) |
| 59 | +* [Usage in Svelte](#usage-in-svelte) |
60 | 60 | * [Simple Example](#simple-example-4) |
| 61 | +* [Usage in React](#usage-in-react) |
| 62 | + * [Simple Example](#simple-example-5) |
61 | 63 | * [Demos](#demos) |
62 | 64 | * [Demos and Development](#demos-and-development) |
63 | 65 | * [Repo Setup](#repo-setup) |
@@ -266,9 +268,56 @@ If you want to use multiple item templates, you can do that very similarly to ho |
266 | 268 | For a more complete example, look in the `demo-ng` directory. |
267 | 269 |
|
268 | 270 |
|
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) |
270 | 319 |
|
271 | | -## Usage in Vue |
| 320 | +## Usage in Vue 2 |
272 | 321 |
|
273 | 322 | Register the plugin in your `app.ts`. |
274 | 323 |
|
|
0 commit comments