@ionic/core

What is @ionic/core?

@ionic/core is a library of web components that allows developers to build high-quality mobile and desktop apps using web technologies like HTML, CSS, and JavaScript. It provides a comprehensive set of UI components and utilities that are designed to work seamlessly across different platforms.

What are @ionic/core's main functionalities?

UI Components

Ionic Core provides a wide range of UI components such as buttons, cards, forms, and more. These components are designed to be highly customizable and work across different platforms.

<ion-button>Click Me</ion-button>

Navigation

Ionic Core includes a powerful routing system that allows developers to define navigation paths and manage the app's state. This makes it easy to create complex navigation flows.

<ion-router><ion-route url="/home" component="home-page"></ion-route></ion-router>

Theming

Ionic Core allows developers to easily customize the look and feel of their app using CSS variables. This makes it simple to apply consistent theming across the entire application.

:root { --ion-color-primary: #3880ff; }

Gestures

Ionic Core provides a gesture system that allows developers to add custom touch interactions to their components. This is useful for creating interactive and responsive user interfaces.

const gesture = createGesture({ el: myElement, gestureName: 'my-gesture', onMove: ev => console.log(ev) }); gesture.enable();

Other packages similar to @ionic/core

framework7

Framework7 is a free and open-source framework for developing mobile, desktop, and web apps with a native look and feel. It provides a rich set of UI components and features similar to Ionic Core, but it is more focused on providing a native-like experience.

onsenui

Onsen UI is a front-end UI framework for developing hybrid mobile apps. It offers a wide range of UI components and is designed to work with popular frameworks like Angular, React, and Vue. Onsen UI is similar to Ionic Core in terms of providing cross-platform UI components, but it emphasizes performance and ease of use.

quasar

Quasar Framework is a Vue.js-based framework that allows developers to create responsive websites, PWAs, and mobile apps. It provides a comprehensive set of UI components and utilities, similar to Ionic Core, but it is built specifically for the Vue.js ecosystem.

README

@ionic/core

This contains the core stencil components for ionic based applications.

Let's get started

1. Install global dependencies

• stencil
• np
• jest
• tsc
• tslint

npm i -g stencil np jest tsc tslint

2. Clone your ionic fork

[e-mail]:ionic-team/ionic.git
cd ionic

3. Run npm install

npm install
cd packages/core
npm install

Notice that ionic-core lives in packages/core.

4. Run npm run dev

Make sure you are inside packages/core

How to contribute

1. npm run dev allows you to modify the components and have live reloading, just like another ionic app.

2. When everything looks good, run npm run validate to verify the tests linter and production build passes.

More commands

• npm run build: build ionic-core for production.
• npm run dev: live reloading server for ionic developement,
• npm run test: runs unit tests.
• npm run clean: cleans dist folder.
• npm run lint: runs typescript linter.
• npm run lint-fix: tries to auto-fix linter issues.
• npm run validate: runs tests, linter and production build.
• npm run deploy: publishes a new version to NPM.