0.0.2 • Published 7 years ago
@uoh/accessibility v0.0.2
@uoh/accessibility
University of Haifa Accessibility Menu & Features
Installation
$ npm install @uoh/accessibility --save
Note that the uoh-core
mixin from the @uoh/theme is required.
This library uses the material icons font. To import it add the following line to your index.html
:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Usage
Import the AccessibilityModule
in your app.module.ts
. For example:
import { AccessibilityModule } from '@uoh/accessibility';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AccessibilityModule, MatCardModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Then, wrap the contents of your app inside the uoh-accessibility
tag:
<uoh-accessibility [dir]="dir">
<div class="wrapper">
<mat-card class="small-card">
<mat-card-content>
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<h2>University of Haifa</h2>
</mat-card-content>
</mat-card>
</div>
</uoh-accessibility>
Note: You can set the direction of all the app contents by setting the dir input variable to rtl
(default) or ltr
.
Include the accessibility theme:
To set the theme of the accessibility button and menu add the following lines to your styles.scss
file:
@import '~@uoh/accessibility/accessibility.theme';
@include uoh-accessibility($default-theme);
.dark-theme {
@include uoh-accessibility($dark-theme);
}