mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
refactor(react): update tab-bar requirement on tabs (#29868)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> As mentioned in this [PR](https://github.com/ionic-team/ionic-docs/pull/3797), React `IonTabs` requires `IonTabBar` do be a child, else it doesn't render and throws an error. Angular, JS, and Vue doesn't have this requirement. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> I didn't see any reason why React does not mimic the other frameworks. In order to keep consistency, I've updated the React tabs. This would allow `ion-tabs` and `ion-tab-bar` can be used as standalone elements as mentioned in the [docs](https://ionicframework.com/docs/api/tabs). - React follows the same structure as the other frameworks: `IonTabs` doesn't require `IonTabBar` to be a child to render. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: 8.3.1-dev.11726159792.1a6f49de How to test: 1. Create a Ionic React app through the Ionic CLI with tabs as the starter 2. Run the app 3. Comment out the `IonTabBar` 4. Notice that the `IonTabs` does not render 5. Notice that there's an error in the console: "IonTabs needs a IonTabBar" 6. Install the dev build: `npm install @ionic/react@8.3.1-dev.11726159792.1a6f49de` 7. Make sure the `IonTabBar` is still commented out 8. Verify that `IonTabs` renders 9. Verify that there isn't an error in the console
This commit is contained in:
@ -165,9 +165,6 @@ export const IonTabs = /*@__PURE__*/ (() =>
|
|||||||
if (outlet && hasTab) {
|
if (outlet && hasTab) {
|
||||||
throw new Error('IonTabs cannot contain an IonRouterOutlet and an IonTab at the same time');
|
throw new Error('IonTabs cannot contain an IonRouterOutlet and an IonTab at the same time');
|
||||||
}
|
}
|
||||||
if (!tabBar) {
|
|
||||||
throw new Error('IonTabs needs a IonTabBar');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (hasTab) {
|
if (hasTab) {
|
||||||
return <IonTabsInner {...this.props}></IonTabsInner>;
|
return <IonTabsInner {...this.props}></IonTabsInner>;
|
||||||
@ -223,11 +220,11 @@ export const IonTabs = /*@__PURE__*/ (() =>
|
|||||||
</PageManager>
|
</PageManager>
|
||||||
) : (
|
) : (
|
||||||
<div className={className ? `${className}` : 'ion-tabs'} {...props} style={hostStyles}>
|
<div className={className ? `${className}` : 'ion-tabs'} {...props} style={hostStyles}>
|
||||||
{tabBar.props.slot === 'top' ? tabBar : null}
|
{tabBar?.props.slot === 'top' ? tabBar : null}
|
||||||
<div style={tabsInner} className="tabs-inner">
|
<div style={tabsInner} className="tabs-inner">
|
||||||
{outlet}
|
{outlet}
|
||||||
</div>
|
</div>
|
||||||
{tabBar.props.slot === 'bottom' ? tabBar : null}
|
{tabBar?.props.slot === 'bottom' ? tabBar : null}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</IonTabsContext.Provider>
|
</IonTabsContext.Provider>
|
||||||
|
|||||||
Reference in New Issue
Block a user