@e-square/bdir
v3.0.3
Published
A bidirectional support library for angular
Downloads
26
Readme
@e-square/bdir
A bidirectional support lib for angular
Features
- ✅ Runtime compatible
- ✅ CDK compatible
- ✅ Language to Direction support
Table of Contents
Installation
NPM
npm install @e-square/bdir
Yarn
yarn add @e-square/bdir
Usage
Import the
BDirModule
:import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BDirModule } from '@e-square/bdir'; @NgModule({ imports: [ BrowserModule, BDirModule ], bootstrap: [AppComponent] }) export class AppModule { }
Add
bdir
directive In the application wrapper:<div id="app-wrapper" bdir> <h1> Welcome to {{ title }}! </h1> <router-outlet></router-outlet> </div>
Start using
scss mixins
:@import "~@e-square/bdir/styles/mixins"; h1 { color: darkslategray; @include padding-start(20px); }
Now the
h1
element will transpile to:h1 { color: darkslategray; } *[dir=ltr] h1 { padding-right: 20px; } *[dir=rtl] h1 { padding-left: 20px; }
API
The service and directive implements Angular CDK's Directionality class and uses its API.
BDirService
Methods:
*setLang(lang: Lang)
- Setting the current language which will determine the direction value
*setDir(dir: Direction)
- Set the current direction value.
*getDir$(): Observable<Direction>
- Get the current direction value as observable.
*setLang(lang: Lang)
- Get the opposite direction value as observable.
BDirDirective
bdir: 'start' | 'end'
- Will set a dir
attribute to the hosting element with rtl | ltr
value accordingly start
, is the default value.
<element bdir="start"></element>
<!-- Can also be written as -->
<element bdir></element>
Tokens
RTL_LANGUAGES
- Define which language will consider as rtl
languages, default value: ['he', 'ar', 'hy', 'dv', 'ff', 'ku', 'fa']
.
DEFAULT_LANG
- Define the default language, default value: 'en'
Mixins
All
mixins
were written following to thecss
syntax, simply change left & right with start & end.
Also the
mixins
were developed in a way that the transpiled code will be as minimal as possible.
*$encapsulation
property used for inner components to be affected by their host's direction by using angular's :host-context
padding-start($value, $encapsulation: true)
padding-end($value, $encapsulation: true)
margin-start($value, $encapsulation: true)
margin-end($value, $encapsulation: true)
border-start($value, $encapsulation: true)
border-end($value, $encapsulation: true)
float($start: true, $encapsulation: true)
dir($start: true, $encapsulation: true)
start($value, $encapsulation: true)
end($value, $encapsulation: true)
transformTranslate($x, $y: 0, $encapsulation: true)
transformScale($x, $y: 1, $encapsulation: true)
mirror($encapsulation: true)
FAQ
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!