From 4c896c529b981c926aad74d182705306ee2d5890 Mon Sep 17 00:00:00 2001 From: Josh Thomas Date: Tue, 22 Jan 2019 22:06:17 -0600 Subject: [PATCH] docs(): update alpha docs for react and vue. (#17216) --- README.md | 4 +- react/README.md | 219 ++++++++++++++++++++++++++++-------------------- vue/README.md | 4 +- 3 files changed, 132 insertions(+), 95 deletions(-) diff --git a/README.md b/README.md index ee9473bee89..577afd8fc02 100644 --- a/README.md +++ b/README.md @@ -12,8 +12,8 @@ Ionic is based on [Web Components](https://www.webcomponents.org/introduction) a | ------- | ------- | ------- |:-----:| | **Core** | [`@ionic/core`](https://www.npmjs.com/package/@ionic/core) | [![version](https://img.shields.io/npm/v/@ionic/core/latest.svg)](https://www.npmjs.com/package/@ionic/core) | [`README.md`](core/README.md) | **Angular** | [`@ionic/angular`](https://www.npmjs.com/package/@ionic/angular) | [![version](https://img.shields.io/npm/v/@ionic/angular/latest.svg)](https://www.npmjs.com/package/@ionic/angular) | [`README.md`](angular/README.md) -| **Vue** | `@ionic/vue` | | [`README.md`](vue/README.md) -| **React** | `@ionic/react` | | [`README.md`](react/README.md) +| **Vue** | [`@ionic/vue`](https://www.npmjs.com/package/@ionic/vue) | [![version](https://img.shields.io/npm/v/@ionic/vue/latest.svg)](https://www.npmjs.com/package/@ionic/vue) | [`README.md`](vue/README.md) +| **React** | [`@ionic/react`](https://www.npmjs.com/package/@ionic/react) | [![version](https://img.shields.io/npm/v/@ionic/react/latest.svg)](https://www.npmjs.com/package/@ionic/react) | [`README.md`](react/README.md) Looking for the `ionic-angular` package? Ionic 3 has been moved to the [`ionic-v3`](https://github.com/ionic-team/ionic-v3) repo. See [Earlier Versions](#earlier-versions). diff --git a/react/README.md b/react/README.md index fd3d680db7c..5d28dbf2832 100644 --- a/react/README.md +++ b/react/README.md @@ -1,13 +1,25 @@ +## @ionic/react (alpha) -## React +These are React specific building blocks on top of [@ionic/core](https://www.npmjs.com/package/@ionic/core) components/services. -These are React specific building blocks on top of `@ionic/core` components/services. +To get started simply install `@ionic/react` and `@ionic/core` with npm into your project. We recommend you use `create-react-app` to get started +and to use TypeScript for the best experience. -This is still under heavy development. It has not yet been released to NPM but if you want to download and build it please do so. If you would like to see an example app of the implementation please go to our [react conference app](https://github.com/ionic-team/ionic-react-conference-app) +We are currently working on providing more detailed documentation on usage but please refer to our example application for now. +If you would like to see a example app of the implementation please go to our [react conference app](https://github.com/ionic-team/ionic-react-conference-app) -## To Build + +```ts +import React from 'react'; +import ReactDOM from 'react-dom'; +import { registerIonic } from '@ionic/react'; +import App from './App'; + +registerIonic(); + +ReactDOM.render(, document.getElementById('root')); +``` -Run `npm run build` to build a distro to `dist` directory. # Current Status of Components @@ -15,89 +27,114 @@ Below is a list of components and their current status. Please know that these | Component | Development Status | Tests | | ------------------ |:------------------:|:-------------:| -| `ion-action-sheet` | :white_check_mark: | :black_square_button: | -| `ion-alert` | :white_check_mark: | :black_square_button: | -| `ion-anchor` | :white_check_mark: | :black_square_button: | -| `ion-app` | :white_check_mark: | :black_square_button: | -| `ion-avatar` | :white_check_mark: | :black_square_button: | -| `ion-back-button` | :black_square_button: | :black_square_button: | -| `ion-backdrop` | :white_check_mark: | :black_square_button: | -| `ion-badge` | :white_check_mark: | :black_square_button: | -| `ion-button` | :white_check_mark: | :black_square_button: | -| `ion-buttons` | :white_check_mark: | :black_square_button: | -| `ion-card` | :white_check_mark: | :black_square_button: | -| `ion-card-content` | :white_check_mark: | :black_square_button: | -| `ion-card-header` | :white_check_mark: | :black_square_button: | -| `ion-card-subtitle` | :white_check_mark: | :black_square_button: | -| `ion-card-title` | :white_check_mark: | :black_square_button: | -| `ion-checkbox` | :white_check_mark: | :black_square_button: | -| `ion-chip` | :white_check_mark: | :black_square_button: | -| `ion-col` | :white_check_mark: | :black_square_button: | -| `ion-content` | :white_check_mark: | :black_square_button: | -| `ion-datetime` | :white_check_mark: | :black_square_button: | -| `ion-fab` | :white_check_mark: | :black_square_button: | -| `ion-fab-button` | :white_check_mark: | :black_square_button: | -| `ion-fab-list` | :white_check_mark: | :black_square_button: | -| `ion-footer` | :white_check_mark: | :black_square_button: | -| `ion-grid` | :white_check_mark: | :black_square_button: | -| `ion-header` | :white_check_mark: | :black_square_button: | -| `ion-icon` | :white_check_mark: | :black_square_button: | -| `ion-img` | :white_check_mark: | :black_square_button: | -| `ion-infinite-scroll` | :white_check_mark: | :black_square_button: | -| `ion-input` | :white_check_mark: | :black_square_button: | -| `ion-item` | :white_check_mark: | :black_square_button: | -| `ion-item-divider` | :white_check_mark: | :black_square_button: | -| `ion-item-group` | :white_check_mark: | :black_square_button: | -| `ion-item-option` | :white_check_mark: | :black_square_button: | -| `ion-item-options` | :white_check_mark: | :black_square_button: | -| `ion-item-sliding` | :white_check_mark: | :black_square_button: | -| `ion-label` | :white_check_mark: | :black_square_button: | -| `ion-list` | :white_check_mark: | :black_square_button: | -| `ion-list-header` | :white_check_mark: | :black_square_button: | -| `ion-loading` | :white_check_mark: | :black_square_button: | -| `ion-menu` | :white_check_mark: | :black_square_button: | -| `ion-menu-button` | :white_check_mark: | :black_square_button: | -| `ion-menu-toggle` | :white_check_mark: | :black_square_button: | -| `ion-modal` | :white_check_mark: | :black_square_button: | -| `ion-nav` | :white_check_mark: | :black_square_button: | -| `ion-nav-pop` | :black_square_button: | :black_square_button: | -| `ion-nav-push` | :black_square_button: | :black_square_button: | -| `ion-nav-set-root` | :black_square_button: | :black_square_button: | -| `ion-note` | :white_check_mark: | :black_square_button: | -| `ion-picker` | :white_check_mark: | :black_square_button: | -| `ion-picker-column` | :white_check_mark: | :black_square_button: | -| `ion-popover` | :white_check_mark: | :black_square_button: | -| `ion-progress-bar` | :white_check_mark: | :black_square_button: | -| `ion-radio` | :white_check_mark: | :black_square_button: | -| `ion-radio-group` | :white_check_mark: | :black_square_button: | -| `ion-range` | :white_check_mark: | :black_square_button: | -| `ion-refresher` | :white_check_mark: | :black_square_button: | -| `ion-refresher-content` | :white_check_mark: | :black_square_button: | -| `ion-reorder` | :white_check_mark: | :black_square_button: | -| `ion-reorder-group` | :white_check_mark: | :black_square_button: | -| `ion-ripple-effect` | :white_check_mark: | :black_square_button: | -| `ion-router-outlet` | :black_square_button: | :black_square_button: | -| `ion-row` | :white_check_mark: | :black_square_button: | -| `ion-searchbar` | :white_check_mark: | :black_square_button: | -| `ion-segment` | :white_check_mark: | :black_square_button: | -| `ion-segment-button` | :white_check_mark: | :black_square_button: | -| `ion-select` | :white_check_mark: | :black_square_button: | -| `ion-select-option` | :white_check_mark: | :black_square_button: | -| `ion-select-popover` | :white_check_mark: | :black_square_button: | -| `ion-skeleton-text` | :white_check_mark: | :black_square_button: | -| `ion-slide` | :white_check_mark: | :black_square_button: | -| `ion-slides` | :white_check_mark: | :black_square_button: | -| `ion-spinner` | :white_check_mark: | :black_square_button: | -| `ion-split-pane` | :white_check_mark: | :black_square_button: | -| `ion-tab` | :white_check_mark: | :black_square_button: | -| `ion-tab-bar` | :white_check_mark: | :black_square_button: | -| `ion-tab-button` | :white_check_mark: | :black_square_button: | -| `ion-tabs` | :white_check_mark: | :black_square_button: | -| `ion-text` | :white_check_mark: | :black_square_button: | -| `ion-textarea` | :white_check_mark: | :black_square_button: | -| `ion-thumbnail` | :white_check_mark: | :black_square_button: | -| `ion-title` | :white_check_mark: | :black_square_button: | -| `ion-toast` | :white_check_mark: | :black_square_button: | -| `ion-toggle` | :white_check_mark: | :black_square_button: | -| `ion-toolbar` | :white_check_mark: | :black_square_button: | -| `ion-virtual-scroll` | :white_check_mark: | :black_square_button: | +| `IonActionSheet` | :white_check_mark: | :black_square_button: | +| `IonAlert` | :white_check_mark: | :black_square_button: | +| `IonAnchor` | :white_check_mark: | :black_square_button: | +| `IonApp` | :white_check_mark: | :black_square_button: | +| `IonAvatar` | :white_check_mark: | :black_square_button: | +| `IonBackButton` | :white_check_mark: | :black_square_button: | +| `IonBackdrop` | :white_check_mark: | :black_square_button: | +| `IonBadge` | :white_check_mark: | :black_square_button: | +| `IonButton` | :white_check_mark: | :black_square_button: | +| `IonButtons` | :white_check_mark: | :black_square_button: | +| `IonCard` | :white_check_mark: | :black_square_button: | +| `IonCardContent` | :white_check_mark: | :black_square_button: | +| `IonCardHeader` | :white_check_mark: | :black_square_button: | +| `IonCardSubtitle` | :white_check_mark: | :black_square_button: | +| `IonCardTitle` | :white_check_mark: | :black_square_button: | +| `IonCheckbox` | :white_check_mark: | :black_square_button: | +| `IonChip` | :white_check_mark: | :black_square_button: | +| `IonCol` | :white_check_mark: | :black_square_button: | +| `IonContent` | :white_check_mark: | :black_square_button: | +| `IonDatetime` | :white_check_mark: | :black_square_button: | +| `IonFab` | :white_check_mark: | :black_square_button: | +| `IonFabButton` | :white_check_mark: | :black_square_button: | +| `IonFabList` | :white_check_mark: | :black_square_button: | +| `IonFooter` | :white_check_mark: | :black_square_button: | +| `IonGrid` | :white_check_mark: | :black_square_button: | +| `IonHeader` | :white_check_mark: | :black_square_button: | +| `IonIcon` | :white_check_mark: | :black_square_button: | +| `IonImg` | :white_check_mark: | :black_square_button: | +| `IonInfiniteScroll` | :white_check_mark: | :black_square_button: | +| `IonInput` | :white_check_mark: | :black_square_button: | +| `IonItem` | :white_check_mark: | :black_square_button: | +| `IonItemDivider` | :white_check_mark: | :black_square_button: | +| `IonItemGroup` | :white_check_mark: | :black_square_button: | +| `IonItemOption` | :white_check_mark: | :black_square_button: | +| `IonItemOptions` | :white_check_mark: | :black_square_button: | +| `IonItemSliding` | :white_check_mark: | :black_square_button: | +| `IonLabel` | :white_check_mark: | :black_square_button: | +| `IonList` | :white_check_mark: | :black_square_button: | +| `IonListHeader` | :white_check_mark: | :black_square_button: | +| `IonLoading` | :white_check_mark: | :black_square_button: | +| `IonMenu` | :white_check_mark: | :black_square_button: | +| `IonMenuButton` | :white_check_mark: | :black_square_button: | +| `IonMenuToggle` | :white_check_mark: | :black_square_button: | +| `IonModal` | :white_check_mark: | :black_square_button: | +| `IonNote` | :white_check_mark: | :black_square_button: | +| `IonPicker` | :white_check_mark: | :black_square_button: | +| `IonPickerColumn` | :white_check_mark: | :black_square_button: | +| `IonPopover` | :white_check_mark: | :black_square_button: | +| `IonProgressBar` | :white_check_mark: | :black_square_button: | +| `IonRadio` | :white_check_mark: | :black_square_button: | +| `IonRadioGroup` | :white_check_mark: | :black_square_button: | +| `IonRange` | :white_check_mark: | :black_square_button: | +| `IonRefresher` | :white_check_mark: | :black_square_button: | +| `IonRefresherContent` | :white_check_mark: | :black_square_button: | +| `IonReorder` | :white_check_mark: | :black_square_button: | +| `IonReorderGroup` | :white_check_mark: | :black_square_button: | +| `IonRippleEffect` | :white_check_mark: | :black_square_button: | +| `IonRouterOutlet` | :white_check_mark: | :black_square_button: | +| `IonRow` | :white_check_mark: | :black_square_button: | +| `IonSearchbar` | :white_check_mark: | :black_square_button: | +| `IonSegment` | :white_check_mark: | :black_square_button: | +| `IonSegmentButton` | :white_check_mark: | :black_square_button: | +| `IonSelect` | :white_check_mark: | :black_square_button: | +| `IonSelectOption` | :white_check_mark: | :black_square_button: | +| `IonSelectPopover` | :white_check_mark: | :black_square_button: | +| `IonSkeletonText` | :white_check_mark: | :black_square_button: | +| `IonSlide` | :white_check_mark: | :black_square_button: | +| `IonSlides` | :white_check_mark: | :black_square_button: | +| `IonSpinner` | :white_check_mark: | :black_square_button: | +| `IonSplitPane` | :white_check_mark: | :black_square_button: | +| `IonTab` | :white_check_mark: | :black_square_button: | +| `IonTabBar` | :white_check_mark: | :black_square_button: | +| `IonTabButton` | :white_check_mark: | :black_square_button: | +| `IonTabs` | :white_check_mark: | :black_square_button: | +| `IonText` | :white_check_mark: | :black_square_button: | +| `IonTextarea` | :white_check_mark: | :black_square_button: | +| `IonThumbnail` | :white_check_mark: | :black_square_button: | +| `IonTitle` | :white_check_mark: | :black_square_button: | +| `IonToast` | :white_check_mark: | :black_square_button: | +| `IonToggle` | :white_check_mark: | :black_square_button: | +| `IonToolbar` | :white_check_mark: | :black_square_button: | +| `IonVirtualScroll` | :white_check_mark: | :black_square_button: | + +## Publishing a Native Application + +You can now make use of all of the ionic components in your React application. +If you want to publish your app to the App Store or Google Play you will need to use the ionic cli to execute Capacitor commands to do so. + +More information on this can be found here. https://beta.ionicframework.com/docs/cli +If you want to learn more about Capacitor our dedicated site can be found here. https://capacitor.ionicframework.com/ + +The commands that you will need to execute are below. +```sh +ionic capacitor add +ionic capacitor copy +ionic capacitor run +``` + +## Related + +* [Ionic Core Components](https://www.npmjs.com/package/@ionic/core) +* [Ionic Documentation](https://beta.ionicframework.com/docs/) +* [Ionic Worldwide Slack](http://ionicworldwide.herokuapp.com/) +* [Ionic Forum](https://forum.ionicframework.com/) +* [Ionicons](http://ionicons.com/) +* [Capacitor](https://capacitor.ionicframework.com/) + + +## License + +* [MIT](https://raw.githubusercontent.com/ionic-team/ionic/master/LICENSE) diff --git a/vue/README.md b/vue/README.md index 079c21c6854..19c06214d21 100644 --- a/vue/README.md +++ b/vue/README.md @@ -1,9 +1,9 @@ -# @ionic/vue +# @ionic/vue (alpha) Ionic Vue.js specific building blocks on top of [@ionic/core](https://www.npmjs.com/package/@ionic/core) components. To get started simply install `@ionic/vue` and `@ionic/core` with npm into your project and then register `@ionic/vue` as a plugin to your vue application. - + ```ts import Vue from 'vue'; import Ionic from '@ionic/vue';