Crear un componente de tarjeta

En esta etapa, solo aplicaremos estilo en línea. También puede diseñar su componente JSS, pero esto se tratará en el Tutorial 6 de la serie de tutoriales.

La Tarjeta ahora se extiende por toda la pantalla, este transporte está destinado a ocupar todo el espacio de su contenedor.

1. Para restringir el width de El Card, añade el style apuntalar.

   <Card heading="Card" style={{ width: "300px" }}>
     <Text>This is the content area of the Card</Text>
   </Card>
   

2. El contenido de la tarjeta está demasiado cerca del límite. Card, entonces un padding requerido. UI5 Web Components viene con un Util biblioteca, que comprende padding Tamaños.

   Ejecute esto en su terminal:

   npm install @ui5/webcomponents-react-base --save
   

   Luego importe:

   import { spacing } from "@ui5/webcomponents-react-base";
   

   Y finalmente agrega esto a tu Text componente:

   <Text style={spacing.sapUiContentPadding}>
     This is the content area of the Card
   </Text>
   

   Con esto obtienes una almohadilla de material estandarizado. spacing muchas otras propiedades vienen con él, no dude en probarlas y ver lo que hacen.

Después de esta etapa MyApp.jsx Debe tener un aspecto como este:

import React from "react";
import { Card, Text } from "@ui5/webcomponents-react";
import { spacing } from "@ui5/webcomponents-react-base";

export function MyApp() {
  return (
    <div>
      <Card heading="Card" style={{ width: "300px" }}>
        <Text style={spacing.sapUiContentPadding}>
          This is the content area of the Card
        </Text>
      </Card>
    </div>
  );
}

Y tu aplicación es así: