Right to Left (RTL) Support

    RTL Support

    Most of the components in the framework have full right-to-left (RTL) support by default. To switch to RTL direction you have to just set the dir attribute of the html or the body tag to rtl.

    Example:

    // $direction defaults to ltr if it's omitted.
@include igx-core($direction: rtl);

    Currently the following components have only partial RTL support:

    • Grid (igx-grid)

    RTL Example

    This section shows the accessibility (ARIA) support of the framework as well as how easily manageable the directionality of the components is.

    Enabling right-to-left direction (RTL).

    Ignite UI for Angular library is susceptible to directionality manipulation only when setting dir attribute on either html or body tags. Also, keep in mind that runtime changes are not detected.

    With that being said, let's move to the following example:

    Step 1 - Setting the 'dir' attribute on both tags.

    <html dir="rtl">
...
</html>

    or

    <html>
  <body dir="ltr">
  ...
  </body>
</html>
    Note

    Currently the Igx-Grid component only has partial(visual) RTL support.

    Note

    Breaking Changes in version 13.2.0

    All RTL specific stylesheets have been removed, therefore, users who have previously used *-rtl.css specific themes must switch to the regular theme files.