Right-To-Left (RTL) and Compact Mode
This section explains how to make UI5 Web Components render in RTL and compact mode.
Note: Both of these settings are not properties of the components per se, but rather markers you set on some part of the HTML page that affect all components inside.
Some UI5 Web Components are RTL-aware, meaning they render differently when placed in an RTL-designated part of the DOM tree.
To have the components render in RTL mode, just set the HTML attribute
rtl on the component itself, the
html or any other relevant region of your application.
<body dir="rtl"> ... </body>
(RTL will be set for all UI5 Web Components on the page.)
<body> <ui5-button>Button 1</ui5-button> <div dir="rtl"> <ui5-button>Button 2</ui5-button> </div> <ui5-button dir="rtl">Button 3</ui5-button> </body>
(RTL will be set for Button 2 and Button 3.)
Changing RTL Dynamically
The first time UI5 Web Components are rendered, they will take into account the
dir attribute of the respective part of the DOM tree they are placed in.
However, if you change
dir dynamically afterwards, you must call the
applyDirection method to re-render all RTL-aware components.
import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js"; document.body.dir = "rtl"; applyDirection();
Technical Note: Whenever you change the
dir attribute, the browser will automatically re-render that part of the DOM tree (including any Web Components) by default.
applyDirection call is only needed to adjust paddings, margins and other CSS selectors that are not affected by
dir. As more advanced CSS
features become available in the near future,
applyDirection will not be needed and will eventually be deprecated.
Some UI5 Web Components support compact mode, meaning they can be rendered with smaller sizes, margins and paddings in order to preserve as much space as possible.
To enable compact mode, use any of the following markers on the component itself, the
html or any other relevant region of your application:
<body data-ui5-compact-size> ... </body>
(Compact mode is set for all UI5 Web Components on the page.)
<body> <ui5-button>Button 1</ui5-button> <div data-ui5-compact-size> <ui5-button>Button 2</ui5-button> </div> <ui5-button class="ui5-content-density-compact">Button 3</ui5-button> </body>
(Compact mode will be set for Button 2 and Button 3.)
Unlike RTL, compact mode does not require additional APIs when its markers are changed dynamically.