@ui5/webcomponents-react

import '@ui5/webcomponents-fiori/dist/DynamicPage.js'; import type { DynamicPageAccessibilityAttributes } from '@ui5/webcomponents-fiori/dist/DynamicPage.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; interface DynamicPageAttributes { /** * Defines additional accessibility attributes on different areas of the component. * * The accessibilityAttributes object has the following fields, * where each field is an object supporting one or more accessibility attributes: * * - **root**: `root.role` and `root.name`. * - **header**: `header.role` and `header.name`. * - **content**: `content.role` and `content.name`. * - **footer**: `footer.role` and `footer.name`. * * The accessibility attributes support the following values: * * - **role**: Defines the accessible ARIA landmark role of the area. * Accepts the following values per section: * `root` — `none`, `main`, `region`; * `header` — `none`, `banner`, `region`; * `content` — `none`, `main`, `region`, `form`; * `footer` — `none`, `contentinfo`, `region`. * * - **name**: Defines the accessible ARIA name of the area. * Accepts any string. * * **Note:** Available since [v2.24.0](https://github.com/UI5/webcomponents/releases/tag/v2.24.0) of **@ui5/webcomponents-fiori**. * @default {} */ accessibilityAttributes?: DynamicPageAccessibilityAttributes; /** * Defines if the header is pinned. * @default false */ headerPinned?: boolean; /** * Defines if the header is snapped. * @default false */ headerSnapped?: boolean; /** * Defines if the pin button is hidden. * @default false */ hidePinButton?: boolean; /** * Defines if the footer is shown. * @default false */ showFooter?: boolean; } interface DynamicPageDomRef extends Required<DynamicPageAttributes>, Ui5DomRef { } interface DynamicPagePropTypes extends DynamicPageAttributes, Omit<CommonProps, keyof DynamicPageAttributes | 'children' | 'footerArea' | 'headerArea' | 'titleArea' | 'onPinButtonToggle' | 'onTitleToggle'> { /** * Defines the content of the Dynamic Page. * * __Supported Node Type/s:__ `Array<HTMLElement>` */ children?: ReactNode | ReactNode[]; /** * Defines the footer HTML Element. * * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="footerArea"`). * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. * * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). * * __Supported Node Type/s:__ `Array<HTMLElement>` */ footerArea?: UI5WCSlotsNode; /** * Defines the header HTML Element. * * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="headerArea"`). * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. * * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). * * __Supported Node Type/s:__ `Array<DynamicPageHeader>` */ headerArea?: UI5WCSlotsNode; /** * Defines the title HTML Element. * * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="titleArea"`). * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. * * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). * * __Supported Node Type/s:__ `Array<DynamicPageTitle>` */ titleArea?: UI5WCSlotsNode; /** * Fired when the pin header button is toggled. * * | cancelable | bubbles | * | :--------: | :-----: | * | ❌|✅| */ onPinButtonToggle?: (event: Ui5CustomEvent<DynamicPageDomRef>) => void; /** * Fired when the expand/collapse area of the title is toggled. * * | cancelable | bubbles | * | :--------: | :-----: | * | ❌|✅| */ onTitleToggle?: (event: Ui5CustomEvent<DynamicPageDomRef>) => void; } /** * A layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer. * * The component consist of several components: * * - `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`. * - `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties. * - `Content area` - a generic container, which can have a single UI5 layout. * - `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content. * * ### Usage * * Use the `DynamicPage` if you need to have a title, that is always visible * and a header, that has configurable Expanding/Snapping functionality. * If you don't need the Expanding/Snapping functionality it is better to use the * `Page` as a lighter component. * * The app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height), * or content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user * scroll through the content. * * ## Notes: * * - Snapping of the `DynamicPageTitle` is not supported in the following case: * - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling. * * ### Responsive Behavior * * Dynamic page web component implements the responsive paddings design. * * ### Keyboard Handling * * * ### Basic Navigation * * - [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated. * If focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header). * If focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header). * * ### Fast Navigation * - This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`. * In order to use this functionality, you need to import the following module: * * - `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"` * * * * __Note:__ This is a UI5 Web Component! [DynamicPage UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/DynamicPage) | [Repository](https://github.com/UI5/webcomponents) * * @since [2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents-fiori__. */ declare const DynamicPage: import("react").ForwardRefExoticComponent<DynamicPagePropTypes & import("@ui5/webcomponents-react-base").WithWebComponentPropTypes & import("react").RefAttributes<DynamicPageDomRef>>; export { DynamicPage }; export type { DynamicPageDomRef, DynamicPagePropTypes };