mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
129 lines
3.3 KiB
Markdown
129 lines
3.3 KiB
Markdown
## @ionic/react (beta)
|
|
|
|
These are React specific building blocks on top of [@ionic/core](https://www.npmjs.com/package/@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.
|
|
|
|
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 an example app of the implementation please go to our [react conference app](https://github.com/ionic-team/ionic-react-conference-app)
|
|
|
|
|
|
# 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 |
|
|
| ------------------ |
|
|
| `IonActionSheet` |
|
|
| `IonAlert` |
|
|
| `IonAnchor` |
|
|
| `IonApp` |
|
|
| `IonAvatar` |
|
|
| `IonBackButton` |
|
|
| `IonBackdrop` |
|
|
| `IonBadge` |
|
|
| `IonButton` |
|
|
| `IonButtons` |
|
|
| `IonCard` |
|
|
| `IonCardContent` |
|
|
| `IonCardHeader` |
|
|
| `IonCardSubtitle` |
|
|
| `IonCardTitle` |
|
|
| `IonCheckbox` |
|
|
| `IonChip` |
|
|
| `IonCol` |
|
|
| `IonContent` |
|
|
| `IonDatetime` |
|
|
| `IonFab` |
|
|
| `IonFabButton` |
|
|
| `IonFabList` |
|
|
| `IonFooter` |
|
|
| `IonGrid` |
|
|
| `IonHeader` |
|
|
| `IonIcon` |
|
|
| `IonImg` |
|
|
| `IonInfiniteScroll` |
|
|
| `IonInput` |
|
|
| `IonItem` |
|
|
| `IonItemDivider` |
|
|
| `IonItemGroup` |
|
|
| `IonItemOption` |
|
|
| `IonItemOptions` |
|
|
| `IonItemSliding` |
|
|
| `IonLabel` |
|
|
| `IonList` |
|
|
| `IonListHeader` |
|
|
| `IonLoading` |
|
|
| `IonMenu` |
|
|
| `IonMenuButton` |
|
|
| `IonMenuToggle` |
|
|
| `IonModal` |
|
|
| `IonNote` |
|
|
| `IonPicker` |
|
|
| `IonPickerColumn` |
|
|
| `IonPopover` |
|
|
| `IonProgressBar` |
|
|
| `IonRadio` |
|
|
| `IonRadioGroup` |
|
|
| `IonRange` |
|
|
| `IonRefresher` |
|
|
| `IonRefresherContent` |
|
|
| `IonReorder` |
|
|
| `IonReorderGroup` |
|
|
| `IonRippleEffect` |
|
|
| `IonRouterOutlet` |
|
|
| `IonRow` |
|
|
| `IonSearchbar` |
|
|
| `IonSegment` |
|
|
| `IonSegmentButton` |
|
|
| `IonSelect` |
|
|
| `IonSelectOption` |
|
|
| `IonSelectPopover` |
|
|
| `IonSkeletonText` |
|
|
| `IonSlide` |
|
|
| `IonSlides` |
|
|
| `IonSpinner` |
|
|
| `IonSplitPane` |
|
|
| `IonTab` |
|
|
| `IonTabBar` |
|
|
| `IonTabButton` |
|
|
| `IonTabs` |
|
|
| `IonText` |
|
|
| `IonTextarea` |
|
|
| `IonThumbnail` |
|
|
| `IonTitle` |
|
|
| `IonToast` |
|
|
| `IonToggle` |
|
|
| `IonToolbar` |
|
|
| `IonVirtualScroll` |
|
|
|
|
## 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)
|