サイズ

size 設定の表示は、大規模データセットのビジュアル表示を大きく改善します。Ignite UI for Angular では、large、medium、small の事前定義されたオプションセットが提供されています。

--ig-size カスタム CSS プロパティを使用すると、アプリケーションまたはコンポーネントレベルでサイズを設定できます。

Angular サイズの例

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 { DisplayDensityComponent } from "./display-density/display-density.component";
import { 
	IgxInputGroupModule,
	IgxButtonGroupModule,
	IgxIconModule
 } from "igniteui-angular";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	DisplayDensityComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxInputGroupModule,
	IgxButtonGroupModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, Inject, OnInit } from '@angular/core';
import { DisplayDensityToken, IDisplayDensityOptions } from 'igniteui-angular';

@Component({
    providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: 'comfortable' } }],
    selector: 'app-display-density',
    styleUrls: ['./display-density.component.scss'],
    templateUrl: './display-density.component.html'
})

export class DisplayDensityComponent implements OnInit {
    public displayDensities;
    public density: any;
    public user;

    constructor(@Inject(DisplayDensityToken) public displayDensityOptions: IDisplayDensityOptions) { }

    public ngOnInit() {
        const initialDensity = this.displayDensityOptions.displayDensity;
        this.displayDensities = [
            {
                label: 'compact',
                selected: initialDensity === 'compact',
                togglable: true
            },
            {
                label: 'cosy',
                selected: initialDensity === 'cosy',
                togglable: true
            },
            {
                label: 'comfortable',
                selected: initialDensity === 'comfortable',
                togglable: true
            }
        ];

        this.user = {
            firstName: 'John',
            lastName: 'Smith',
            phone: 888123456
        };
    }

    public changeDensity(eventArgs) {
        this.density = this.displayDensities[eventArgs.index].label;
        this.displayDensityOptions.displayDensity = this.density;
    }
}
ts

<div class="density-chooser">
    <igx-buttongroup [values]="displayDensities" (selected)="changeDensity($event)"></igx-buttongroup>
</div>

<igx-input-group>
    <input igxInput name="firstName" type="text" [(ngModel)]="user.firstName" />
    <label igxLabel for="firstName">First Name</label>
</igx-input-group>

<igx-input-group>
    <input igxInput name="lastName" type="text" [(ngModel)]="user.lastName" required />
    <label igxLabel for="lastName">Last Name</label>
</igx-input-group>

<igx-input-group>
    <igx-prefix>+359</igx-prefix>
    <label igxLabel for="phone">Phone</label>
    <input type="number" igxInput name="phone" [(ngModel)]="user.phone" />
    <igx-suffix>
        <igx-icon>phone</igx-icon>
    </igx-suffix>
    <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
</igx-input-group>
html

:host {
    display: block;
    padding: 8px;
}

.density-chooser {
    margin-bottom: 16px;
}

igx-buttongroup, igx-input-group {
    display: block;
    width: 500px;
}scss

このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

Ignite UI for Angular コンポーネントをプロジェクトに追加する前に、必要なすべての依存関係を構成し、プロジェクトのセットアップが正しく完了したことを確認してください。インストールのトピックで手順をご確認ください。

使用方法

アプリケーションやコンポーネントレベルでサイズを設定する

サイズを設定するには、--ig-size CSS カスタムプロパティを使用します。body 要素で前述のプロパティを設定することで、アプリ内のすべてのコンポーネントのサイズを設定できます。

--ig-size に使用可能な値は、--ig-size-small、--ig-size-medium、--ig-size-large です。

body {
    --ig-size: var(--ig-size-small);
}
css

コンポーネントレベルでサイズを設定するには、要素セレクターを対象とします。たとえば、入力グループのサイズを small に設定するには、次のようにします。

igx-input-group {
    --ig-size: var(--ig-size-small);
}
css

独自のコンポーネントとレイアウトにサイズを組み込む

Ignite UI for Angular は、--ig-size CSS プロパティの変更に反応するレイアウトを実装できるようにするいくつかの Sass 関数とミックスインを公開します。

以下は、--ig-size の値に基づいて要素の幅と高さを変更する方法の例です。

<div class="my-elem"></div>
html

@use "igniteui-angular/theming" as *;

.my-elem {
    // Make the element sizable
    @include sizable();

    // Define the default size of the element and hook it to the `--ig-size` property
    --component-size: var(--ig-size, var(--ig-size-large));

    // Define sizes for small (10px), medium (20px), and large (30px)
    --size: #{sizable(10px, 20px, 30px)};
    width: var(--size);
    height: var(--size);
}
scss

これで、--ig-size の値が変更されるたびに、.my-elem のサイズが変更されます。

API リファレンス

サイズと間隔の関数

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

サイズ