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.
Para restringir el
width
de ElCard
, añade elstyle
apuntalar.<Card heading="Card" style={{ width: "300px" }}> <Text>This is the content area of the Card</Text> </Card>
El contenido de la tarjeta está demasiado cerca del límite.
Card
, entonces unpadding
requerido. UI5 Web Components viene con unUtil
biblioteca, que comprendepadding
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í: