direction

Mon, 01 Jan 0001 00:00:00 +0000

Use the native dir attribute and logical CSS properties on semantic blocks.

<section dir="rtl">
 <p align="start">Logical start aligns for right-to-left.</p>
</section>

Example

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Direction</title>
 <link rel="stylesheet" href="../../css/preflight.css" />
 <link rel="stylesheet" href="../../css/angular.css" />
 <link rel="stylesheet" href="../example.css" />
 <script src="../../js/angular-ts.umd.js"></script>
 <script src="../../js/angular-css.umd.js"></script>
 </head>
 <body ng-app="angular.css" ng-cloak>
 <div class="stack">
 <section id="direction-default" class="card">
 <header>
 <h2>LTR</h2>
 <p align="start">The chevron points forward.</p>
 </header>
 <section class="row">
 <span aria-hidden="true" class="rtl-flip">-&gt;</span>
 <span>Settings</span>
 </section>
 </section>

 <section id="direction-rtl" dir="rtl" lang="ar" class="card">
 <header>
 <h2>RTL</h2>
 <p align="start">
 تتبع المحاذاة المنطقية واتجاه الأيقونة اتجاه المستند.
 </p>
 </header>
 <section class="row" id="direction-nested">
 <span aria-hidden="true" class="rtl-flip">-&gt;</span>
 <span>الإعدادات</span>
 </section>
 </section>
 </div>
 </body>
</html>

Installation

Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.

Foundations on AngularCSS

direction

Example

Installation