opensourcemirror
/
Ionic
mirror of https://github.com/ionic-team/ionic.git
1
0
Fork 0
Code Issues Releases Wiki Activity

docs(): update alpha docs for react and vue. (#17216)

This commit is contained in:
Josh Thomas 2019-01-22 22:06:17 -06:00 committed by GitHub
parent b0aabc2739
commit 4c896c529b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 132 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -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).

219
react/README.md
View File

@ -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(<App />, 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)

4
vue/README.md
View File

@ -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';