Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Jan 23, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
080f33a
docs(): update alpha docs for react and vue.
jthoms1 Jan 23, 2019
ecc9af0
Merge branch 'master' into react-vue-docs
jthoms1 Jan 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand Down
219 changes: 128 additions & 91 deletions react/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,103 +1,140 @@
## @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

Below is a list of components and their current status. Please know that these will not be final implementations but this list can be used to understand current progress.

| 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 changes: 2 additions & 2 deletions vue/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down