GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects â†’ ionicthemes â†’ ionic-custom-components

ionicthemes / ionic-custom-components

Licence: MIT License
🌈 Ionic Tutorial: Mastering Web Components in Ionic Framework. This repo is an Ionic project showcasing Angular custom components and Stencil custom web components.

Programming Languages

typescript
32286 projects
SCSS
7915 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Labels

angularionicstencilweb-componentsionic-frameworkcss4shadow-domcustom-componentsstenciljs

Projects that are alternatives of or similar to ionic-custom-components

block-photos
A photos app built with Ionic and Blockstack as backend.
Stars: ✭ 24 (-20%)
Mutual labels:  ionic, stencil, ionic-framework, stenciljs
anywhere-webcomponents
A UI work in progress based on custom elements (web components) for use in anywhere.
Stars: ✭ 17 (-43.33%)
Mutual labels:  stencil, web-components, stenciljs
Awesome Stenciljs
List of Awesome Web Components Built with StencilJS
Stars: ✭ 520 (+1633.33%)
Mutual labels:  stencil, web-components, ionic-framework
Ionic Pwa Toolkit
Build lightning fast Progressive Web Apps with zero config and best practices built-in. Go from zero to production ready with Ionic and Stencil (Web Components).
Stars: ✭ 629 (+1996.67%)
Mutual labels:  ionic, web-components, ionic-framework
Stencil
A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
Stars: ✭ 9,880 (+32833.33%)
Mutual labels:  ionic, stencil, stenciljs
Shadow-DOM-inject-styles
🎉 A helper function to easily modify Shadow DOM CSS.
Stars: ✭ 47 (+56.67%)
Mutual labels:  web-components, shadow-dom, stenciljs
pdf-viewer
PDF viewer web component built in StencilJS. Reusable in Angular, Ionic, React, Vue.JS, etc.
Stars: ✭ 65 (+116.67%)
Mutual labels:  ionic, stencil, stenciljs
Ion Phaser
A web component to use Phaser Framework with Angular, React, Vue, etc 🎮
Stars: ✭ 152 (+406.67%)
Mutual labels:  ionic, web-components, ionic-framework
Ionic Framework
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
Stars: ✭ 45,802 (+152573.33%)
Mutual labels:  ionic, stencil, stenciljs
capacitor-site
Capacitor website
Stars: ✭ 0 (-100%)
Mutual labels:  ionic, stencil, stenciljs
stencil-shimmer
StencilJS component for adding shimmer UI effect to your applications.
Stars: ✭ 14 (-53.33%)
Mutual labels:  ionic, web-components, stenciljs
ionic-app-with-aws-cognito
Angular 4, Ionic 3, and AWS (Amazon) Cognito User Pools. Authentication out of the box.
Stars: ✭ 62 (+106.67%)
Mutual labels:  ionic, ionic-framework
ionicfirebaseauth
Exemplo de alguns tipos de autenticação com Ionic 2 e Firebase
Stars: ✭ 18 (-40%)
Mutual labels:  ionic, ionic-framework
ionic-3-video-calling-using-webrtc
This is demo code of how to implement video calling in ionic 3 using webrtc
Stars: ✭ 58 (+93.33%)
Mutual labels:  ionic, ionic-framework
ionic-image-upload
Ionic Plugin for Uploading Images to Amazon S3
Stars: ✭ 26 (-13.33%)
Mutual labels:  ionic, ionic-framework
generator-stencil
Scaffolding tool 🔨 for Stencil js applications
Stars: ✭ 16 (-46.67%)
Mutual labels:  stencil, stenciljs
ionic4-ngrx-firebase
A basic application for Ionic 4 with firebase & ngrx actions, reducers and effects
Stars: ✭ 17 (-43.33%)
Mutual labels:  ionic, ionic-framework
stencil-realworld-app
An example SPA written with Stencil
Stars: ✭ 56 (+86.67%)
Mutual labels:  stencil, stenciljs
ionic-firebase-image-upload
Building an Ionic App with Protected/Private Content. This app shows how to use Firebase Storage from an Ionic Angular app both with public and private content.
Stars: ✭ 19 (-36.67%)
Mutual labels:  ionic, ionic-framework
solar-components
Web Components Implementation of Solar Design System
Stars: ✭ 16 (-46.67%)
Mutual labels:  stencil, stenciljs
View All Similar Projects âž”

Web Components in Ionic Framework

This project is an Ionic app showcasing Angular custom components and Stencil custom web components. This repo is part of the post: Mastering Web Components in Ionic Framework.

Run the project

Install the dependencies: npm install

Run the project: ionic serve

Demo

Web Components, Shadow DOM, CSS Variables. Understanding the new components architecture in Ionic.

In our previous post Ionic 4 vs Ionic 3 — What you need to know about Ionic 4 we surfaced the main differences between Ionic 3 and Ionic 4.

Ionic 4 introduced a lot of changes that you need understand because they changed the way Ionic Framework components work.

Then, when Ionic 5 was released, we created the post What's new in Ionic 5 - Migration and Free Starter where we explain how to take advantage of the new benefits from Ionic 5.

In this series of posts we are going to go deeper on the structure and core concepts of Ionic apps and explore more advanced topics, so if you are new to Ionic, I strongly recommend that you first read our Introduction to Ionic tutorial.

Covering everything from styling and customizing Ionic components, to building custom web components with Stencil and then use them in your Ionic projects (or any other framework, as web components are framework agnostic!).

Get a premium Ionic 5 Starter App

Did you know that we recently released Ionic 5 Full Starter App? It's an ionic 5 template that you can use to jump start your Ionic app development and save yourself hundreds of hours of design and development.

It is also a PWA and uses Ionic Web Components. Try it on your phone to see how it works!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].