La tarjeta Ignite UI for Blazor muestra texto, imágenes, iconos y botones en una presentación visualmente rica que puede servir como punto de entrada a información más detallada. Las tarjetas se pueden utilizar para crear un panel de control multimedia.
Ejemplo de tarjeta Blazor
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbButtonModule),
typeof(IgbCardModule),
typeof(IgbIconModule),
typeof(IgbIconButtonModule),
typeof(IgbRippleModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。
Las tarjetas le permiten mostrar fácilmente contenido compuesto por diferentes tipos de objetos u objetos similares cuyo tamaño y acciones admitidas pueden variar.
Empezando
Antes de utilizar la IgbCard, debe registrarla de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbCardModule));
razor
También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbCard componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:
Para obtener una introducción completa a la Ignite UI for Blazor, lea el tema Primeros pasos.
Luego, para representar la plantilla de la tarjeta de demostración, podemos agregar el siguiente código:
<IgbCard><IgbCardMedia><imgsrc="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50"></IgbCardMedia><IgbCardHeader><h3slot="title">New York City</h3><h5slot="subtitle">City in New York</h5></IgbCardHeader><IgbCardContent><p>New York City comprises 5 boroughs sitting where the
Hudson River meets the Atlantic Ocean. At its core is Manhattan,
a densely populated borough that's among the world's major commercial,
financial and cultural centers.</p></IgbCardContent><IgbCardActions><IgbButtonslot="start"><IgbRipple />
Read more
</IgbButton><divslot="end"><IgbIconButtonname="twitter" ><IgbRipple /></IgbIconButton><IgbIconButtonname="facebook" ><IgbRipple /></IgbIconButton></div></IgbCardActions></IgbCard>razor
Notarás algunas cosas arriba. Primero, cuando queremos etiquetar un elemento como título de encabezado, como el encabezado h3, lo colocamos entre las etiquetas IgbCardHeader y configuramos su nombre de ranura en title. Por el contrario, si quisiéramos convertir otro elemento de encabezado en un subtitle, nombraríamos su espacio subtitle.
Cualquier imagen o vídeo que queramos mostrar en la tarjeta, lo envolvemos dentro de las etiquetas IgbCardMedia. IgbCardMedia nos permite ajustar el tamaño del contenido colocado en su interior para que mantenga su relación de aspecto mientras llena todo el cuadro de contenido del elemento. Si la relación de aspecto del objeto no coincide con la relación de aspecto de su cuadro, entonces el objeto se recortará para ajustarse.
Puede colocar cualquier cosa dentro de las etiquetas IgbCardContent. Normalmente el texto va ahí.
Finalmente, IgbCardActions es donde colocaría los elementos procesables, como botones.
Medios, pulgares y avatares
Si desea mostrar una imagen o icono en el encabezado de la tarjeta junto al título y subtítulo, puede hacerlo asignando la propiedad de ranura del elemento a thumbnail.
Tomando la tarjeta de arriba como ejemplo, podemos editar el contenido de IgbCardHeader y agregar un avatar con slot="thumbnail":
El ejemplo anterior mostrará el avatar junto al título y subtítulo en el encabezado de la tarjeta.
Tarjetas delineadas
La tarjeta tiene un atributo outlined que, si se configura, elimina las sombras de la tarjeta y las reemplaza con un borde delgado para separar la tarjeta del fondo.
Diseño horizontal
De forma predeterminada, todas las secciones de la tarjeta (encabezado, contenido, medios, acciones) están dispuestas verticalmente. Esto es bueno cuando tenemos mucho espacio vertical. Digamos que queremos disponer las secciones de la tarjeta de forma horizontal. Podemos lograr dicho diseño con un poco de CSS simple.
A continuación se muestra un ejemplo de una tarjeta horizontal delineada:
<IgbCard><divclass="card-horizontal"><div><IgbCardHeader><imgslot="thumbnail"src="ROZES-Under-the-Grave.jpg" /><h5slot="title">Rozes</h5><h5slot="subtitle">Under the Grave (2016)</h5></IgbCardHeader><IgbCardContent><p>
As I have always said: I write what's real and what's true,
even if it means throwing myself under the bus.
</p></IgbCardContent></div><divclass="divider"></div><IgbCardActions><IgbIconButtonName="previous" /><IgbIconButtonName="play" /><IgbIconButtonName="next" /></IgbCardActions></div></IgbCard>razor
Estamos usando un elemento div adicional para agrupar IgbCardHeader e IgbCardContent, manteniéndolos alineados verticalmente y aplicando la clase.card-horizontal al elemento div envolvente para alinear las dos secciones de la tarjeta horizontalmente.
Si todo ha ido bien nuestra tarjeta debería quedar así:
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbCardModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container sample"style="align-items: center"><divclass="card-wrapper"style="max-width: 25rem; min-width: 15.625rem;"><IgbCard><divclass="card-horizontal"style="display: flex; flex-direction: row; flex: 1 1 0%;"><div><IgbCardHeader><imgslot="thumbnail"src="https://static.infragistics.com/xplatform/images/music/rozes.jpg"width="64"height="64"/><h5slot="title">Rozes</h5><h5slot="subtitle">Under the Grave (2016)</h5></IgbCardHeader><IgbCardContent><p>
As I have always said: I write what's real and what's true,
even if it means throwing myself under the bus.
</p></IgbCardContent></div><divclass="divider"style="border-right: 1px solid darkgray;"></div><IgbCardActionsstyle="justify-content: center;"><spanclass="material-icons">skip_previous</span><spanclass="material-icons">play_arrow</span><spanclass="material-icons">skip_next</span></IgbCardActions></div></IgbCard></div></div>@code {}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Diseños alternativos
Puede ser aún más creativo con el diseño de la IgbCard.
A continuación se muestra un ejemplo que muestra cómo se puede crear una tarjeta semihorizontal, donde tenemos cada sección de la tarjeta dispuesta verticalmente, mientras que IgbCardMedia aparece junto a las secciones verticales.
<IgbCard><divclass="semi-horizontal"><div><IgbCardHeader><IgbAvatarslot="thumbnail"src/><h5slot="title">HERE</h5><h5slot="subtitle">by Mellow D</h5></IgbCardHeader><IgbCardContent><p>Far far away, behind the word mountains,
far from the countries Vokalia and Consonantia,
there live the blind texts.</p></IgbCardContent><IgbCardActions><IgbButton>Play Album</IgbButton></IgbCardActions></div><IgbCardMediaclass="card-media"><imgsrc="here_media.jpg" /></IgbCardMedia></div></IgbCard>razor
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbAvatarModule),
typeof(IgbButtonModule),
typeof(IgbCardModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container vertical"style="align-items: center"><divclass="card-wrapper"style="max-width: 25rem; min-width: 15.625rem;"><IgbCard><divclass="semi-horizontal"style="display: flex; flex-direction: row; flex-grow: 1;"><div><IgbCardHeader><IgbAvatarSrc="https://static.infragistics.com/xplatform/images/music/singer_with_mic.jpg"slot="thumbnail"/><h5slot="title">HERE</h5><h5slot="subtitle">by Mellow D</h5></IgbCardHeader><IgbCardContent><p>Far far away, behind the word mountains,
far from the countries Vokalia and Consonantia,
there live the blind texts.</p></IgbCardContent><IgbCardActions><IgbButton>Play Album</IgbButton></IgbCardActions></div><IgbCardMediaclass="card-media"style="width: 6rem; min-width: 6rem;"><imgsrc="https://static.infragistics.com/xplatform/images/music/singer_female.jpg" /></IgbCardMedia></div></IgbCard></div></div>@code {}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Acciones de tarjeta
El área de acciones de la tarjeta permite una configuración adicional a lo que ya hemos comentado.
Puede invertir el orden del botón de texto y los botones de ícono cambiando los nombres de las ranuras.
<IgbCardActions><IgbButtonslot="start"><IgbRipple />
Read more
</IgbButton><divslot="end"><IgbIconButtonname="twitter"><IgbRipple /></IgbIconButton><IgbIconButtonname="facebook" ><IgbRipple /></IgbIconButton></div></IgbCardActions>razor
Ahora los botones de iconos aparecerán antes del botón de texto.
También puede agregar más contenido en el medio simplemente omitiendo la propiedad de la ranura y dejando que los elementos vayan a la ranura predeterminada.
Estilo
Dado que la tarjeta es un contenedor que envuelve diferentes elementos, su estilo se realiza aplicando estilo a sus componentes básicos: el encabezado, el contenido, los medios y los subcomponentes de acciones. Además, el componente header (IgbCardHeader) expone tres partes CSS: header, title y subtitle que le permiten diseñar el elemento envolvente así como los dos elementos del título.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbCardModule),
typeof(IgbIconButtonModule),
typeof(IgbIconModule),
typeof(IgbRippleModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Resumen
En este artículo cubrimos mucho terreno con el componente de la tarjeta. Creamos una tarjeta simple y agregamos algunas imágenes para hacerla un poco más atractiva. Utilizamos algunos Blazor adicionales dentro de nuestra tarjeta, como avatares, botones e iconos, para enriquecer la experiencia y agregar algunas funcionalidades. Y finalmente, cambiamos la apariencia de la carta cambiando los colores principales de los bloques de construcción.