javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 01:52:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(react): add missing simple components to react. (#16836)

Browse Source
This commit is contained in:
Josh Thomas
2018-12-20 09:29:03 -06:00
committed by GitHub
parent 99bdd1f016
commit 696f62cfab
2 changed files with 90 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
react/README.md
View File

@ -17,34 +17,34 @@ Below is a list of components and their current status. Please know that these
| ------------------ |:------------------:|:-------------:|
| `ion-action-sheet` | :white_check_mark: | :black_square_button: |
| `ion-alert` | :white_check_mark: | :black_square_button: |
| `ion-anchor` | :black_square_button: | :black_square_button: |
| `ion-anchor` | :white_check_mark: | :black_square_button: |
| `ion-animation` | :black_square_button: | :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` | :black_square_button: | :black_square_button: |
| `ion-badge` | :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` | :black_square_button: | :black_square_button: |
| `ion-card-title` | :black_square_button: | :black_square_button: |
| `ion-checkbox` | :black_square_button: | :black_square_button: |
| `ion-chip` | :black_square_button: | :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` | :black_square_button: | :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` | :black_square_button: | :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` | :black_square_button: | :black_square_button: |
| `ion-infinite-scroll` | :black_square_button: | :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: |
@ -60,23 +60,23 @@ Below is a list of components and their current status. Please know that these
| `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` | :black_square_button: | :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` | :black_square_button: | :black_square_button: |
| `ion-picker` | :black_square_button: | :black_square_button: |
| `ion-picker-column` | :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` | :black_square_button: | :black_square_button: |
| `ion-radio` | :black_square_button: | :black_square_button: |
| `ion-radio-group` | :black_square_button: | :black_square_button: |
| `ion-range` | :black_square_button: | :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` | :black_square_button: | :black_square_button: |
| `ion-reorder-group` | :black_square_button: | :black_square_button: |
| `ion-ripple-effect` | :black_square_button: | :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: |
@ -84,21 +84,21 @@ Below is a list of components and their current status. Please know that these
| `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` | :black_square_button: | :black_square_button: |
| `ion-skeleton-text` | :black_square_button: | :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` | :black_square_button: | :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` | :black_square_button: | :black_square_button: |
| `ion-text` | :white_check_mark: | :black_square_button: |
| `ion-textarea` | :white_check_mark: | :black_square_button: |
| `ion-thumbnail` | :black_square_button: | :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` | :black_square_button: | :black_square_button: |
| `ion-virtual-scroll` | :white_check_mark: | :black_square_button: |

98
react/src/components/index.ts
View File

@ -9,52 +9,78 @@ export { default as IonModal } from './IonModal';
export { default as IonPopover } from './IonPopover';
export { default as IonToast } from './IonToast';
export const IonIcon = createReactComponent<IoniconsComponents.IonIconAttributes, HTMLIonIconElement>('ion-icon');
export const IonAnchor = createReactComponent<Components.IonAnchorAttributes, HTMLIonAnchorElement>('ion-anchor');
export const IonApp = createReactComponent<Components.IonAppAttributes, HTMLIonAppElement>('ion-app');
export const IonMenu = createReactComponent<Components.IonMenuAttributes, HTMLIonMenuElement>('ion-menu');
export const IonHeader = createReactComponent<Components.IonHeaderAttributes, HTMLIonHeaderElement>('ion-header');
export const IonTitle = createReactComponent<Components.IonTitleAttributes, HTMLIonTitleElement>('ion-title');
export const IonNav = createReactComponent<Components.IonNavAttributes, HTMLIonNavElement>('ion-nav');
export const IonToolbar = createReactComponent<Components.IonToolbarAttributes, HTMLIonToolbarElement>('ion-toolbar');
export const IonButtons = createReactComponent<Components.IonButtonsAttributes, HTMLIonButtonsElement>('ion-buttons');
export const IonSelect = createReactComponent<Components.IonSelectAttributes, HTMLIonSelectElement>('ion-select');
export const IonSelectOption = createReactComponent<Components.IonSelectOptionAttributes, HTMLIonSelectOptionElement>('ion-select-option');
export const IonAvatar = createReactComponent<Components.IonAvatarAttributes, HTMLIonAvatarElement>('ion-avatar');
export const IonBackdrop = createReactComponent<Components.IonBackdropAttributes, HTMLIonBackdropElement>('ion-backdrop');
export const IonBadge = createReactComponent<Components.IonBadgeAttributes, HTMLIonBadgeElement>('ion-badge');
export const IonButton = createReactComponent<Components.IonButtonAttributes, HTMLIonButtonElement>('ion-button');
export const IonButtons = createReactComponent<Components.IonButtonsAttributes, HTMLIonButtonsElement>('ion-buttons');
export const IonCard = createReactComponent<Components.IonCardAttributes, HTMLIonCardElement>('ion-card');
export const IonCardContent = createReactComponent<Components.IonCardContentAttributes, HTMLIonCardContentElement>('ion-card-content');
export const IonCardHeader = createReactComponent<Components.IonCardHeaderAttributes, HTMLIonCardHeaderElement>('ion-card-header');
export const IonCardSubtitle = createReactComponent<Components.IonCardSubtitleAttributes, HTMLIonCardSubtitleElement>('ion-card-subtitle');
export const IonCardTitle = createReactComponent<Components.IonCardTitleAttributes, HTMLIonCardTitleElement>('ion-card-title');
export const IonCheckbox = createReactComponent<Components.IonCheckboxAttributes, HTMLIonCheckboxElement>('ion-checkbox');
export const IonCol = createReactComponent<Components.IonColAttributes, HTMLIonColElement>('ion-col');
export const IonContent = createReactComponent<Components.IonContentAttributes, HTMLIonContentElement>('ion-content');
export const IonList = createReactComponent<Components.IonListAttributes, HTMLIonListElement>('ion-list');
export const IonListHeader = createReactComponent<Components.IonListHeaderAttributes, HTMLIonListHeaderElement>('ion-list-header');
export const IonItem = createReactComponent<Components.IonItemAttributes, HTMLIonItemElement>('ion-item');
export const IonLabel = createReactComponent<Components.IonLabelAttributes, HTMLIonLabelElement>('ion-label');
export const IonChip = createReactComponent<Components.IonChipAttributes, HTMLIonChipElement>('ion-chip');
export const IonDatetime = createReactComponent<Components.IonDatetimeAttributes, HTMLIonDatetimeElement>('ion-datetime');
export const IonMenuButton = createReactComponent<Components.IonMenuButtonAttributes, HTMLIonMenuButtonElement>('ion-menu-button');
export const IonItemGroup = createReactComponent<Components.IonItemGroupAttributes, HTMLIonItemGroupElement>('ion-item-group');
export const IonFab= createReactComponent<Components.IonFabAttributes, HTMLIonFabElement>('ion-fab');
export const IonFabButton= createReactComponent<Components.IonFabButtonAttributes, HTMLIonFabButtonElement>('ion-fab-button');
export const IonFabList = createReactComponent<Components.IonFabListAttributes, HTMLIonFabListElement>('ion-fab-list');
export const IonFooter = createReactComponent<Components.IonFooterAttributes, HTMLIonFooterElement>('ion-footer');
export const IonGrid = createReactComponent<Components.IonGridAttributes, HTMLIonGridElement>('ion-grid');
export const IonHeader = createReactComponent<Components.IonHeaderAttributes, HTMLIonHeaderElement>('ion-header');
export const IonIcon = createReactComponent<IoniconsComponents.IonIconAttributes, HTMLIonIconElement>('ion-icon');
export const IonImg = createReactComponent<Components.IonImgAttributes, HTMLIonImgElement>('ion-img');
export const IonInfiniteScroll = createReactComponent<Components.IonInfiniteScrollAttributes, HTMLIonInfiniteScrollElement>('ion-infinite-scroll');
export const IonInput = createReactComponent<Components.IonInputAttributes, HTMLIonInputElement>('ion-input');
export const IonItem = createReactComponent<Components.IonItemAttributes, HTMLIonItemElement>('ion-item');
export const IonItemDivider = createReactComponent<Components.IonItemDividerAttributes, HTMLIonItemDividerElement>('ion-item-divider');
export const IonItemSliding = createReactComponent<Components.IonItemSlidingAttributes, HTMLIonItemSlidingElement>('ion-item-sliding');
export const IonItemGroup = createReactComponent<Components.IonItemGroupAttributes, HTMLIonItemGroupElement>('ion-item-group');
export const IonItemOption = createReactComponent<Components.IonItemOptionAttributes, HTMLIonItemOptionElement>('ion-item-option');
export const IonItemOptions = createReactComponent<Components.IonItemOptionsAttributes, HTMLIonItemOptionsElement>('ion-item-options');
export const IonInput = createReactComponent<Components.IonInputAttributes, HTMLIonInputElement>('ion-input');
export const IonGrid = createReactComponent<Components.IonGridAttributes, HTMLIonGridElement>('ion-grid');
export const IonRow = createReactComponent<Components.IonRowAttributes, HTMLIonRowElement>('ion-row');
export const IonCol = createReactComponent<Components.IonColAttributes, HTMLIonColElement>('ion-col');
export const IonSegment= createReactComponent<Components.IonSegmentAttributes, HTMLIonSegmentElement>('ion-segment');
export const IonSegmentButton= createReactComponent<Components.IonSegmentButtonAttributes, HTMLIonSegmentButtonElement>('ion-segment-button');
export const IonSearchbar= createReactComponent<Components.IonSearchbarAttributes, HTMLIonSearchbarElement>('ion-searchbar');
export const IonItemSliding = createReactComponent<Components.IonItemSlidingAttributes, HTMLIonItemSlidingElement>('ion-item-sliding');
export const IonLabel = createReactComponent<Components.IonLabelAttributes, HTMLIonLabelElement>('ion-label');
export const IonList = createReactComponent<Components.IonListAttributes, HTMLIonListElement>('ion-list');
export const IonListHeader = createReactComponent<Components.IonListHeaderAttributes, HTMLIonListHeaderElement>('ion-list-header');
export const IonMenu = createReactComponent<Components.IonMenuAttributes, HTMLIonMenuElement>('ion-menu');
export const IonMenuButton = createReactComponent<Components.IonMenuButtonAttributes, HTMLIonMenuButtonElement>('ion-menu-button');
export const IonMenuToggle = createReactComponent<Components.IonMenuToggleAttributes, HTMLIonMenuToggleElement>('ion-menu-toggle');
export const IonNote = createReactComponent<Components.IonNoteAttributes, HTMLIonNoteElement>('ion-note');
export const IonPicker = createReactComponent<Components.IonPickerAttributes, HTMLIonPickerElement>('ion-picker');
export const IonPickerColumn = createReactComponent<Components.IonPickerColumnAttributes, HTMLIonPickerColumnElement>('ion-picker-column');
export const IonNav = createReactComponent<Components.IonNavAttributes, HTMLIonNavElement>('ion-nav');
export const IonProgressBar = createReactComponent<Components.IonProgressBarAttributes, HTMLIonProgressBarElement>('ion-progress-bar');
export const IonRadio = createReactComponent<Components.IonRadioAttributes, HTMLIonRadioElement>('ion-radio');
export const IonRadioGroup = createReactComponent<Components.IonRadioGroupAttributes, HTMLIonRadioGroupElement>('ion-radio-group');
export const IonRange = createReactComponent<Components.IonRangeAttributes, HTMLIonRangeElement>('ion-range');
export const IonRefresher= createReactComponent<Components.IonRefresherAttributes, HTMLIonRefresherElement>('ion-refresher');
export const IonRefresherContent= createReactComponent<Components.IonRefresherContentAttributes, HTMLIonRefresherContentElement>('ion-refresher-content');
export const IonFab= createReactComponent<Components.IonFabAttributes, HTMLIonFabElement>('ion-fab');
export const IonFabList = createReactComponent<Components.IonFabListAttributes, HTMLIonFabListElement>('ion-fab-list');
export const IonFabButton= createReactComponent<Components.IonFabButtonAttributes, HTMLIonFabButtonElement>('ion-fab-button');
export const IonAvatar = createReactComponent<Components.IonAvatarAttributes, HTMLIonAvatarElement>('ion-avatar');
export const IonCard = createReactComponent<Components.IonCardAttributes, HTMLIonCardElement>('ion-card');
export const IonCardHeader = createReactComponent<Components.IonCardHeaderAttributes, HTMLIonCardHeaderElement>('ion-card-header');
export const IonCardContent = createReactComponent<Components.IonCardContentAttributes, HTMLIonCardContentElement>('ion-card-content');
export const IonTextarea = createReactComponent<Components.IonTextareaAttributes, HTMLIonTextareaElement>('ion-textarea');
export const IonTabs = createReactComponent<Components.IonTabsAttributes, HTMLIonTabsElement>('ion-tabs');
export const IonReorder = createReactComponent<Components.IonReorderAttributes, HTMLIonReorderElement>('ion-reorder');
export const IonReorderGroup = createReactComponent<Components.IonReorderGroupAttributes, HTMLIonReorderGroupElement>('ion-reorder-group');
export const IonRippleEffect = createReactComponent<Components.IonRippleEffectAttributes, HTMLIonRippleEffectElement>('ion-ripple-effect');
export const IonRow = createReactComponent<Components.IonRowAttributes, HTMLIonRowElement>('ion-row');
export const IonSearchbar= createReactComponent<Components.IonSearchbarAttributes, HTMLIonSearchbarElement>('ion-searchbar');
export const IonSegment= createReactComponent<Components.IonSegmentAttributes, HTMLIonSegmentElement>('ion-segment');
export const IonSegmentButton= createReactComponent<Components.IonSegmentButtonAttributes, HTMLIonSegmentButtonElement>('ion-segment-button');
export const IonSelect = createReactComponent<Components.IonSelectAttributes, HTMLIonSelectElement>('ion-select');
export const IonSelectOption = createReactComponent<Components.IonSelectOptionAttributes, HTMLIonSelectOptionElement>('ion-select-option');
export const IonSelectPopover = createReactComponent<Components.IonSelectPopoverAttributes, HTMLIonSelectPopoverElement>('ion-select-popover');
export const IonSkeletonText = createReactComponent<Components.IonSkeletonTextAttributes, HTMLIonSkeletonTextElement>('ion-skeleton-text');
export const IonSlide = createReactComponent<Components.IonSlideAttributes, HTMLIonSlideElement>('ion-slide');
export const IonSlides = createReactComponent<Components.IonSlidesAttributes, HTMLIonSlidesElement>('ion-slides');
export const IonSpinner = createReactComponent<Components.IonSpinnerAttributes, HTMLIonSpinnerElement>('ion-spinner');
export const IonSplitPane = createReactComponent<Components.IonSplitPaneAttributes, HTMLIonSplitPaneElement>('ion-split-pane');
export const IonTab = createReactComponent<Components.IonTabAttributes, HTMLIonTabElement>('ion-tab');
export const IonTabBar = createReactComponent<Components.IonTabBarAttributes, HTMLIonTabBarElement>('ion-tab-bar');
export const IonTabButton = createReactComponent<Components.IonTabButtonAttributes, HTMLIonTabButtonElement>('ion-tab-button');
export const IonSlides = createReactComponent<Components.IonSlidesAttributes, HTMLIonSlidesElement>('ion-slides');
export const IonSlide = createReactComponent<Components.IonSlideAttributes, HTMLIonSlideElement>('ion-slide');
export const IonSplitPane = createReactComponent<Components.IonSplitPaneAttributes, HTMLIonSplitPaneElement>('ion-split-pane');
export const IonMenuToggle = createReactComponent<Components.IonMenuToggleAttributes, HTMLIonMenuToggleElement>('ion-menu-toggle');
export const IonTabs = createReactComponent<Components.IonTabsAttributes, HTMLIonTabsElement>('ion-tabs');
export const IonText = createReactComponent<Components.IonTextAttributes, HTMLIonTextElement>('ion-text');
export const IonTextarea = createReactComponent<Components.IonTextareaAttributes, HTMLIonTextareaElement>('ion-textarea');
export const IonThumbnail = createReactComponent<Components.IonThumbnailAttributes, HTMLIonThumbnailElement>('ion-thumbnail');
export const IonTitle = createReactComponent<Components.IonTitleAttributes, HTMLIonTitleElement>('ion-title');
export const IonToggle = createReactComponent<Components.IonToggleAttributes, HTMLIonToggleElement>('ion-toggle');
export const IonToolbar = createReactComponent<Components.IonToolbarAttributes, HTMLIonToolbarElement>('ion-toolbar');
export const IonVirtualScroll = createReactComponent<Components.IonVirtualScrollAttributes, HTMLIonVirtualScrollElement>('ion-virtual-scroll');