@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
105 lines (104 loc) • 6.07 kB
TypeScript
import '@ui5/webcomponents/dist/Bar.js';
import type BarAccessibleRole from '@ui5/webcomponents/dist/types/BarAccessibleRole.js';
import type BarDesign from '@ui5/webcomponents/dist/types/BarDesign.js';
import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base';
import type { ReactNode } from 'react';
interface BarAttributes {
/**
* Defines the accessible ARIA name of the component.
*
* **Note:** Available since [v2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of **@ui5/webcomponents**.
* @default undefined
*/
accessibleName?: string | undefined;
/**
* Receives id(or many ids) of the elements that label the bar.
*
* **Note:** Available since [v2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of **@ui5/webcomponents**.
* @default undefined
*/
accessibleNameRef?: string | undefined;
/**
* Specifies the ARIA role applied to the component for accessibility purposes.
*
* **Note:**
*
* - By default, accessibleRole is set to "Toolbar", which renders the ARIA role "toolbar".
*
* - Use the default accessibleRole value "Toolbar" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.
*
* - If there is only one or no active element, set accessibleRole to "None" to avoid rendering the ARIA role "toolbar", as that role implies a grouping of multiple interactive controls.
*
* **Note:** Available since [v2.10.0](https://github.com/UI5/webcomponents/releases/tag/v2.10.0) of **@ui5/webcomponents**.
* @default "Toolbar"
*/
accessibleRole?: BarAccessibleRole | keyof typeof BarAccessibleRole;
/**
* Defines the component's design.
* @default "Header"
*/
design?: BarDesign | keyof typeof BarDesign;
}
interface BarDomRef extends Required<BarAttributes>, Ui5DomRef {
}
interface BarPropTypes extends BarAttributes, Omit<CommonProps, keyof BarAttributes | 'children' | 'endContent' | 'startContent'> {
/**
* Defines the content in the middle of the bar.
*
* __Supported Node Type/s:__ `Array<HTMLElement>`
*/
children?: ReactNode | ReactNode[];
/**
* Defines the content at the end of the bar.
*
* __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="endContent"`).
* 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>`
*/
endContent?: UI5WCSlotsNode;
/**
* Defines the content at the start of the bar.
*
* __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="startContent"`).
* 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>`
*/
startContent?: UI5WCSlotsNode;
}
/**
* The Bar is a container which is primarily used to hold titles, buttons and input elements
* and its design and functionality is the basis for page headers and footers.
* The component consists of three areas to hold its content - startContent slot, default slot and endContent slot.
* It has the capability to center content, such as a title, while having other components on the left and right side.
*
* ### Usage
* With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.
*
* **Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.
*
* ### Responsive Behavior
* The default slot will be centered in the available space between the startContent and the endContent areas,
* therefore it might not always be centered in the entire bar.
*
* ### Keyboard Handling
*
* #### Fast Navigation
* This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [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! [Bar UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/Bar) | [Repository](https://github.com/UI5/webcomponents)
*/
declare const Bar: import("react").ForwardRefExoticComponent<BarPropTypes & import("@ui5/webcomponents-react-base").WithWebComponentPropTypes & import("react").RefAttributes<BarDomRef>>;
export { Bar };
export type { BarDomRef, BarPropTypes };