Frameworks and features
Accessibility and Directionality
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
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"> ... <body dir="ltr"> </body> </html>
The precedence takes the inner tag which in the above case is the attribute at the
Step 2 - Notifying the theming engine for the respective direction.
$direciton parameter of igx-core mixin does the magic.
@include igx-core($direction: rtl);
These are all the steps needed to adjust your content.
Most of the components in the framework now have full right-to-left (RTL) support via the newly included RTL themes.
For CSS-based projects add
node_modules/igniteui-angular/styles/igniteui-angular-rtl.css to your
angular.json styles collection.
For Sass-based projects pass
$direction to the
igx-core mixin in your root stylesheet.
// $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)
- Tabs (igx-tabs)