Skip to content

Commit 43ee151

Browse files
committed
feat: custom elements in all flavors
1 parent c9110b8 commit 43ee151

File tree

1 file changed

+15
-5
lines changed

1 file changed

+15
-5
lines changed

content/guide/create-custom-native-elements.md

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -240,8 +240,14 @@ Let's create a `<Checkbox>` component that behaves consistently on iOS and Andro
240240

241241
<iframe style="width: 100%; min-height: 200px; aspect-ratio: 16 / 9;" src="https://www.youtube.com/embed/08uip43irOM" title="Creating custom elements with NativeScript" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
242242

243-
See the full working example on StackBlitz: https://stackblitz.com/edit/nativescript-create-custom-elements-checkbox?file=src%2Fapp%2Fcheckbox%2Fcommon.ts
244-
243+
See the full working example on StackBlitz:
244+
- Angular: https://stackblitz.com/edit/nativescript-create-custom-elements-checkbox?file=src%2Fapp%2Fcheckbox%2Fcommon.ts
245+
- React: https://stackblitz.com/edit/nativescript-create-custom-elements-checkbox-react?file=src%2Fcomponents%2FScreenOne.tsx
246+
- Solid: https://stackblitz.com/edit/nativescript-create-custom-elements-checkbox-solid?file=src%2Fcomponents%2Fhome.tsx
247+
- Svelte: https://stackblitz.com/edit/nativescript-create-custom-elements-checkbox-svelte?file=app%2Fcomponents%2FHome.svelte
248+
- TypeScript: https://stackblitz.com/edit/nativescript-create-custom-elements-checkbox-ts?file=app%2Fmain-page.xml
249+
- Vue: https://stackblitz.com/edit/nativescript-create-custom-elements-checkbox-vue?file=src%2Fcomponents%2FHome.vue
250+
245251
In NativeScript, creating custom UI components can be straightforward and powerful. In this guide, you'll learn how to build a simple, reusable Checkbox component using only built-in modules from `@nativescript/core`. We'll leverage a combination of `GridLayout`, `Label`, and Material Design icons.
246252

247253
### Step-by-Step Guide
@@ -421,10 +427,14 @@ selectionColorProperty.register(CheckboxCommon)
421427

422428
### Complete Example and Testing
423429

424-
Explore and interact with the complete example directly:
430+
Explore and interact with the complete example directly in the flavor you love:
425431

426-
- **Full Implementation:** [Common Checkbox Component](https://stackblitz.com/edit/nativescript-create-custom-elements-checkbox?file=src%2Fapp%2Fcheckbox%2Fcommon.ts)
427-
- **Element Registration:** [Checkbox Registration](https://stackblitz.com/edit/nativescript-create-custom-elements-checkbox?file=src%2Fapp%2Fapp.component.ts%3AL5)
432+
- Angular: https://stackblitz.com/edit/nativescript-create-custom-elements-checkbox?file=src%2Fapp%2Fcheckbox%2Fcommon.ts
433+
- React: https://stackblitz.com/edit/nativescript-create-custom-elements-checkbox-react?file=src%2Fcomponents%2FScreenOne.tsx
434+
- Solid: https://stackblitz.com/edit/nativescript-create-custom-elements-checkbox-solid?file=src%2Fcomponents%2Fhome.tsx
435+
- Svelte: https://stackblitz.com/edit/nativescript-create-custom-elements-checkbox-svelte?file=app%2Fcomponents%2FHome.svelte
436+
- TypeScript: https://stackblitz.com/edit/nativescript-create-custom-elements-checkbox-ts?file=app%2Fmain-page.xml
437+
- Vue: https://stackblitz.com/edit/nativescript-create-custom-elements-checkbox-vue?file=src%2Fcomponents%2FHome.vue
428438

429439
---
430440

0 commit comments

Comments
 (0)