La tarjeta Ignite UI for React 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.
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Uso
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
Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:
npm install igniteui-react
cmd
A continuación, tendrás que importar el IgrCard CSS necesario y registrar su módulo, así:
Para obtener una introducción completa a la Ignite UI for React, lea el tema Primeros pasos.
Luego, para representar la plantilla de la tarjeta de demostración, podemos agregar el siguiente código:
<IgrCard><IgrCardMedia><imgsrc="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50"></img></IgrCardMedia><IgrCardHeader><h3slot="title">New York City</h3><h5slot="subtitle">City in New York</h5></IgrCardHeader><IgrCardContent><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></IgrCardContent><IgrCardActions><IgrButton><span>Read more</span><IgrRipple /></IgrButton><divslot="end"><IgrIconButtonname="twitter"collection="material"><IgrRipple /></IgrIconButton><IgrIconButtonname="facebook"collection="material"><IgrRipple /></IgrIconButton></div></IgrCardActions></IgrCard>tsx
Notarás algunas cosas arriba. Primero, cuando queremos etiquetar un elemento como título de encabezado, como el h3 encabezado, lo colocamos entre las IgrCardHeader etiquetas y establecemos su nombre de title ranura. Por el contrario, si quisiéramos hacer otro elemento de encabezado a subtitle, nombraríamos su ranura subtitle.
Cualquier imagen o vídeo que queramos mostrar en la tarjeta, lo envolvemos dentro de las IgrCardMedia etiquetas. Nos IgrCardMedia permite dimensionar el 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, el objeto se recortará para que encaje.
Puedes colocar cualquier cosa dentro de las IgrCardContent etiquetas. Por lo general, el texto va allí.
Por último, es IgrCardActions donde se colocan los elementos procesables, como los 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 anterior como ejemplo, podemos editar el contenido de la IgrCardHeader 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:
<IgrCard><divclassName="card-horizontal"><div><IgrCardHeader><imgsrc="https://static.infragistics.com/xplatform/images/music/rozes.jpg"slot="thumbnail"></img><h5slot="title">Rozes</h5><h5slot="subtitle">Under the Grave (2016)</h5></IgrCardHeader><IgrCardContent><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></IgrCardContent></div><divclassName="divider"></div><IgrCardActions><spanclassName="material-icons">skip_previous</span><spanclassName="material-icons">play_arrow</span><spanclassName="material-icons">skip_next</span></IgrCardActions></div></IgrCard>tsx
Estamos usando un elemento adicional div para agrupar el IgrCardHeader y juntos, manteniéndolos alineados verticalmente y IgrCardContent aplicando la clase al elemento de div envoltura para alinear las dos secciones de la.card-horizontal tarjeta horizontalmente.
Si todo ha ido bien nuestra tarjeta debería quedar así:
EXAMPLE
TSX
CSS
importReactfrom'react';
importReactDOMfrom'react-dom/client';
import'./index.css';
import'./CardHorizontal.css';
import { IgrCard, IgrCardHeader, IgrCardContent, IgrCardActions, IgrCardModule } from"@infragistics/igniteui-react";
import'igniteui-webcomponents/themes/light/bootstrap.css';
IgrCardModule.register();
exportdefaultclass CardHorizontal extendsReact.Component<any, any> {
constructor(props: any) {
super(props);
}
publicrender(): JSX.Element {
return (
<divclassName="container sample"><divclassName="card-wrapper"><IgrCard><divkey="cardContainer"className="card-horizontal"><divkey="cardHeaderContainer"><IgrCardHeaderkey="cardHeader"><imgkey="headerImg"src="https://static.infragistics.com/xplatform/images/music/rozes.jpg"slot="thumbnail"></img><h5key="headerTitle"slot="title">Rozes</h5><h5key="headerSubtitle"slot="subtitle">Under the Grave (2016)</h5></IgrCardHeader><IgrCardContentkey="cardContent"><pkey="content">As I have always said: I write what’s real and what’s true,
even if it means throwing myself under the bus.</p></IgrCardContent></div><divkey="divider"className="divider"></div><IgrCardActionskey="cardActions"><spankey="actionsPrevious"className="material-icons">skip_previous</span><spankey="actionsPlay"className="material-icons">play_arrow</span><spankey="actionsNext"className="material-icons">skip_next</span></IgrCardActions></div></IgrCard></div></div>
);
}
}
// rendering above class to the React DOMconstroot = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CardHorizontal/>);
tsx
Puedes ser aún más creativo con el diseño de la IgrCard.
A continuación se muestra un ejemplo que muestra cómo se puede crear una tarjeta semihorizontal, en la que tenemos cada sección de la tarjeta dispuesta verticalmente, mientras que la IgrCardMedia aparece junto a las secciones verticales.
<IgrCard><divclassName="semi-horizontal"><div><IgrCardHeader><IgrAvatarsrc="https://static.infragistics.com/xplatform/images/music/singer_with_mic.jpg"slot="thumbnail" /><h5slot="title">HERE</h5><h5slot="subtitle">by Mellow D</h5></IgrCardHeader><IgrCardContent><p>Far far away, behind the word mountains,
far from the countries Vokalia and Consonantia,
there live the blind texts.</p></IgrCardContent><IgrCardActions><IgrButton><span>Play Album</span></IgrButton></IgrCardActions></div><IgrCardMediaclassName='card-media'><imgsrc="https://static.infragistics.com/xplatform/images/music/singer_female.jpg"></img></IgrCardMedia></div></IgrCard>tsx
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, el estilo se realiza mediante el estilo de sus componentes básicos: el encabezado, el contenido, los medios y los subcomponentes de acciones. Además, el header componente (IgrCardHeader) expone tres partes CSS -header,y subtitle que le permiten aplicar estilo al elemento de envoltura, title así como a los dos elementos de título.
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 React 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.