Builderall Vue UI

# RTL Support

Bootstrap Vue does not have RTL support, but it is possible to add RTL support to your Builderall Vue Ui application just by inserting the document direction in the html tag and informing if you want your application to behave in RTL when using the library (you can use the dir attribute itself for that)

index.html

<html dir="rtl">
<html dir="ltr">

app.js

Vue.use(BuilderallVueUi, {
	rtl: document.documentElement.dir == 'rtl'
})

Note: This library offers RTL support only to its own components and to Bootstrap vue components with custom CSS. To customize other things, you can add necessary CSS within the selector html[dir=rtl]

# RTL Spacing Helper

Bootstrap Vue provides us with some fantastic spacing helper classes (opens new window)! However, if we want a specific spacing only when the application is in RTL, for example, this is not possible.
Therefore, the Builderall Vue UI includes some classes of add-ons that determine the spacing to be used only in specific directions!
For example, ml-rtl-3, will add a margin to the left of 1rem for a given element, only when in RTL.

The complete syntax is: ${property}${side}-${dir}-${size}

Expand to examples
    • ml-ltr-1
    • ml-ltr-2
    • ml-ltr-3
    • ml-ltr-4
    • ml-ltr-5
    • ml-ltrn-1
    • ml-ltrn-2
    • ml-ltrn-3
    • ml-ltrn-4
    • ml-ltrn-5
    • mr-ltr-1
    • mr-ltr-2
    • mr-ltr-3
    • mr-ltr-4
    • mr-ltr-5
    • mr-ltrn-1
    • mr-ltrn-2
    • mr-ltrn-3
    • mr-ltrn-4
    • mr-ltrn-5
    • pl-ltr-1
    • pl-ltr-2
    • pl-ltr-3
    • pl-ltr-4
    • pl-ltr-5
    • pr-ltr-1
    • pr-ltr-2
    • pr-ltr-3
    • pr-ltr-4
    • pr-ltr-5

If you change ltr tortl in the above classes, everything will work the same way. But only when the document direction is rtl

# RTL mirror helper

It is also possible to use the rtl-mirror class to mirror components when in rtl

# RTL display helper

  • d-rtl-none - to hide content in RTL dir

  • d-ltr-none - to hide content in non RTL dirs

← Fonts →