Tamaño

La configuración del tamaño puede mejorar significativamente la representación visual de grandes cantidades de datos. En Ignite UI for Angular, proporcionamos un conjunto predefinido de opciones:

grande
Medio
pequeño

Usando la propiedad CSS personalizada--ig-size, puede configurar el tamaño a nivel de aplicación o componente.

Angular Size Example

import { Component, HostBinding, OnInit } from '@angular/core';
import { IgxButtonGroupComponent, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective } from 'igniteui-angular';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-display-density',
    styleUrls: ['./display-density.component.scss'],
    templateUrl: './display-density.component.html',
    imports: [IgxButtonGroupComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective]
})

export class DisplayDensityComponent implements OnInit {
    public sizes: any[];
    public size = 'large';
    public user: any;

    public ngOnInit() {
        this.sizes = [
            {
                label: 'small',
                selected: this.size === 'small',
                togglable: true
            },
            {
                label: 'medium',
                selected: this.size === 'medium',
                togglable: true
            },
            {
                label: 'large',
                selected: this.size === 'large',
                togglable: true
            }
        ];

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

    @HostBinding('style.--ig-size')
    protected get sizeStyle() {
        return `var(--ig-size-${this.size})`;
    }

    public selectSize(eventArgs: any) {
        this.size = this.sizes[eventArgs.index].label;
    }
}
ts

<div class="density-chooser">
    <igx-buttongroup [values]="sizes" (selected)="selectSize($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

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.

Para comenzar a usar componentes Ignite UI for Angular en sus propios proyectos, asegúrese de haber configurado todas las dependencias necesarias y de haber realizado la configuración adecuada de su proyecto. Puede aprender a hacerlo en el tema de instalación.

Usage

Establecer el tamaño a nivel de aplicación/componente

Para establecer el tamaño, utilice la propiedad personalizada CSS--ig-size. Puede establecer el tamaño de todos los componentes de su aplicación configurando la propiedad antes mencionada en el elemento del cuerpo.

Los valores disponibles para--ig-size son--ig-size-small,--ig-size-medium y--ig-size-large.

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

Para establecer el tamaño a nivel de componente, apunte al selector de elementos. Por ejemplo, para establecer el tamaño del grupo de entrada en small, puede hacer:

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

Incorporating size in your own components and layouts

Ignite UI for Angular expone algunas funciones de Sass y una mezcla que le permiten implementar diseños que reaccionan a los cambios de la--ig-size propiedad CSS.

Aquí hay un ejemplo de cómo podemos hacer que un elemento cambie su ancho y alto según el valor de--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

Ahora, cada vez que cambie el valor de--ig-size,.my-elem cambiará su tamaño.

API References

Sizing and Spacing Functions

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.