@wordpress/components
Version:
UI components for WordPress.
144 lines (142 loc) • 4.32 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Navigator = void 0;
Object.defineProperty(exports, "useNavigator", {
enumerable: true,
get: function () {
return _useNavigator.useNavigator;
}
});
var _component = require("./navigator/component");
var _component2 = require("./navigator-screen/component");
var _component3 = require("./navigator-button/component");
var _component4 = require("./navigator-back-button/component");
var _useNavigator = require("./use-navigator");
/**
* Internal dependencies
*/
/**
* The `Navigator` component allows rendering nested views/panels/menus
* (via the `Navigator.Screen` component) and navigate between them
* (via the `Navigator.Button` and `Navigator.BackButton` components).
*
* ```jsx
* import { Navigator } from '@wordpress/components';
*
* const MyNavigation = () => (
* <Navigator initialPath="/">
* <Navigator.Screen path="/">
* <p>This is the home screen.</p>
* <Navigator.Button path="/child">
* Navigate to child screen.
* </Navigator.Button>
* </Navigator.Screen>
*
* <Navigator.Screen path="/child">
* <p>This is the child screen.</p>
* <Navigator.BackButton>
* Go back
* </Navigator.BackButton>
* </Navigator.Screen>
* </Navigator>
* );
* ```
*/
const Navigator = exports.Navigator = Object.assign(_component.Navigator, {
/**
* The `Navigator.Screen` component represents a single view/screen/panel and
* should be used in combination with the `Navigator`, the `Navigator.Button`
* and the `Navigator.BackButton` components.
*
* @example
* ```jsx
* import { Navigator } from '@wordpress/components';
*
* const MyNavigation = () => (
* <Navigator initialPath="/">
* <Navigator.Screen path="/">
* <p>This is the home screen.</p>
* <Navigator.Button path="/child">
* Navigate to child screen.
* </Navigator.Button>
* </Navigator.Screen>
*
* <Navigator.Screen path="/child">
* <p>This is the child screen.</p>
* <Navigator.BackButton>
* Go back
* </Navigator.BackButton>
* </Navigator.Screen>
* </Navigator>
* );
* ```
*/
Screen: Object.assign(_component2.NavigatorScreen, {
displayName: 'Navigator.Screen'
}),
/**
* The `Navigator.Button` component can be used to navigate to a screen and
* should be used in combination with the `Navigator`, the `Navigator.Screen`
* and the `Navigator.BackButton` components.
*
* @example
* ```jsx
* import { Navigator } from '@wordpress/components';
*
* const MyNavigation = () => (
* <Navigator initialPath="/">
* <Navigator.Screen path="/">
* <p>This is the home screen.</p>
* <Navigator.Button path="/child">
* Navigate to child screen.
* </Navigator.Button>
* </Navigator.Screen>
*
* <Navigator.Screen path="/child">
* <p>This is the child screen.</p>
* <Navigator.BackButton>
* Go back
* </Navigator.BackButton>
* </Navigator.Screen>
* </Navigator>
* );
* ```
*/
Button: Object.assign(_component3.NavigatorButton, {
displayName: 'Navigator.Button'
}),
/**
* The `Navigator.BackButton` component can be used to navigate to a screen and
* should be used in combination with the `Navigator`, the `Navigator.Screen`
* and the `Navigator.Button` components.
*
* @example
* ```jsx
* import { Navigator } from '@wordpress/components';
*
* const MyNavigation = () => (
* <Navigator initialPath="/">
* <Navigator.Screen path="/">
* <p>This is the home screen.</p>
* <Navigator.Button path="/child">
* Navigate to child screen.
* </Navigator.Button>
* </Navigator.Screen>
*
* <Navigator.Screen path="/child">
* <p>This is the child screen.</p>
* <Navigator.BackButton>
* Go back
* </Navigator.BackButton>
* </Navigator.Screen>
* </Navigator>
* );
* ```
*/
BackButton: Object.assign(_component4.NavigatorBackButton, {
displayName: 'Navigator.BackButton'
})
});
//# sourceMappingURL=index.js.map