Vuely
  • Introduction
  • Folder Structure
  • Vuely VueJs
    • Different Layouts
      • Adding Menu In Different Layouts
    • Installation
    • Adding New Component
    • Translate The App(Multi Language Support)
    • Adding New Widgets
    • Themes
    • Style Customization
    • Build an App from Scratch
    • Seed Project
    • Deployment
    • UI Components
      • Buttons
      • Cards
      • Selection controls
      • Carousel
      • Chips
      • Date/Month Pickers
      • Dialog
      • Grid
      • Input / Text field
      • List
      • Menu
      • Progress
      • Banner
      • Select
      • Slider
      • Tabs
      • Toolbar
      • Timepicker
      • Forms
  • Vuely-Laravel
    • Folder Structure
    • Installation Vuely-Laravel
    • Customization
  • Vuely-Laravel with Api Authentication
    • Getting Started
    • Passport Authentication
    • Run Vuely-Laravel-Passport
  • Vuely ExpressJs
    • Folder Structure
    • Installation
    • Layouts
    • Style Customization
    • Deployment
    • Translate the App
    • Browsers Compatibilty
    • Credits
  • Vuely Angular Version
    • Folder Structure
    • Installation
    • Layouts
    • Adding/Deleting Menu & Component
    • RTL
    • Deployment
  • Credits
  • Template Update
  • FAQ's (Frequently Asked Questions)
  • Changelog
  • Customer Support
Powered by GitBook
On this page
  1. Vuely Angular Version

RTL

Vuely Angular provides you the ability to make the template display the RTL languages properly. You just need to read the below document carefully and implement the steps given.

RTL will help to display the RTL languages properly. To enable RTL in the template follow the steps given below:

Step 1: Simply open src->app->Layouts->VerticalLayout->VerticalLayout.component.html file and add dir="rtl" on the top of the div. Whole site will be reflected as RTL.

Add dir="rtl" to that div and remove [dir]="layout" from the div. As shown in code.

VerticalLayout.component.html
<div dir="rtl" class="app-main theme-light sidebar sidebar-overlay-dark header-light {{isHeaderFilterClass}} {{isSidebarFilterClass}}" [ngClass] = "{'collapsed-sidebar': coreService.isCheckboxOpen}" [class.side-panel-opened]="coreService.sidebarOpen"  [class.side-panel-closed]="!coreService.sidebarOpen">
    
    .....
    .....
    
</div>
PreviousAdding/Deleting Menu & ComponentNextDeployment

Last updated 6 years ago