右から左 (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

Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

右から左方向 (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 固有のテーマを使用したことがあるユーザーは、通常のテーマファイルに切り替える必要があります。