右から左 (RTL) サポート

RTL サポート

フレームワークのほとんどのコンポーネントで、新しい RTL テーマを介した右から左 (RTL) がサポートされます。RTL 方向に切り替えるには、html の dir 属性または body タグを rtl に設定する必要があります。

例:

// $direction defaults to ltr if it's omitted.
@include igx-core($direction: rtl);
scss

現在、以下コンポーネントは RTL 機能の一部をサポートしています。

Grid (igx-grid)

RTL の例

このセクションでは、フレームワークのアクセシビリティ (ARIA) サポートと、コンポーネントの文字表記の方向の簡単な管理を示します。

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxCalendarModule,
	IgxPrefixModule,
	IgxSelectModule
 } from "igniteui-angular";
import { CalendarRtlSampleComponent } from "./calendar-rtl-sample/calendar-rtl-sample.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	CalendarRtlSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxCalendarModule,
	IgxPrefixModule,
	IgxSelectModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, ViewChild } from '@angular/core';
import { IgxCalendarComponent } from 'igniteui-angular';

@Component({
    selector: 'app-calendar',
    styleUrls: ['./calendar-rtl-sample.component.scss'],
    templateUrl: './calendar-rtl-sample.component.html'
})
export class CalendarRtlSampleComponent {
    @ViewChild('calendar', { read: IgxCalendarComponent }) public calendar: IgxCalendarComponent;

    public directionality = 'rtl';

    changeDirectionality(){
        this.directionality === 'rtl' ? this.directionality = 'ltr' : this.directionality = 'rtl';
    }
}
ts

<div class="calendar-wrapper">
    <div class="sample-column" (click)="changeDirectionality()">
        <button igxButton="raised" igxRipple>Change Directionality</button>
    </div>
    <div class="sample-column" [attr.dir]="directionality">
        <article>
            <igx-calendar #calendar [weekStart]="1"></igx-calendar>
        </article>
    </div>
</div>html

@use '../../variables' as *;

$border-color: color($color: gray, $variant: 300);

igx-calendar {
    border: 1px solid $border-color;
    border-radius: 6px;
}

.button-sample {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    flex: 1 0 30%;
    margin: 16px 0;
}

.calendar-wrapper {
    max-width: 650px;
    min-width: 300px;
    margin: 8px;
}

.location-wrapper {
    min-width: 200px;
    max-width: 640px;
    margin-bottom: 32px;
}
scss

右から左方向 (RTL) の有効化

Ignite UI for Angular ライブラリは、html または body タグの dir 属性を設定した場合のみ 文字表記の方向操作の影響を受けます。また、ランタイムの変更は検出されないことに注意してください。

次の例に移動します。

手順 1 - 両方のタグで 'dir' 属性を設定します。

<html dir="rtl">
...
</html>
html

または

<html>
  <body dir="ltr">
  ...
  </body>
</html>
html

現在、Igx-Grid コンポーネントは部分的 (視覚的) RTL のみをサポートしています。

バージョン 13.2.0 での重大な変更

RTL 固有のスタイルシートはすべて削除されているため、以前に *-rtl.css 固有のテーマを使用したことがあるユーザーは、通常のテーマファイルに切り替える必要があります。