Por el momento, el panel no parece realmente un panel. Los componentes están demasiado juntos y no están correctamente alineados. Cambiamos eso.
Agregue relleno a cada uno
Card
y elShellBar
Para agregar relleno a las tarjetas, puede usarlo
spacing
otra vez. Interior de propiedad de estilo propagar unspacing
Protesta y adjunta el estilo. Haz esto por cada uno de ellosCard
componente.<Card style={{ width: "300px", ...spacing.sapUiContentPadding }} avatar={<Icon name={toggleCharts === "lineChart" ? "line-chart" : "horizontal-bar-chart"} />} heading="Stock Price" headerInteractive onHeaderClick={handleHeaderClick} subheading={`Click here to switch to ${switchToChart}`} >
<Card heading="Progress" subheading="List" style={{ width: "300px", ...spacing.sapUiContentPadding }} avatar={<Icon name="list" />}>
<Card heading="AnalyticalTable" subheading="List" style={{ width: "900px", ...spacing.sapUiContentPadding }} avatar={<Icon name="table-view" />}>
Alinear los elementos
Para alinear correctamente los mosaicos, use un
FlexBox
componente y envoltura paraCards
en el interior hay. Utilizar eljustifyContent
prop para alinear todas las características ywrap
para pasar a la siguiente línea si no hay suficiente espacio disponible, agregue elstyle
agregue un accesorio de relleno a la gama completa de materiales.<FlexBox justifyContent={FlexBoxJustifyContent.Center} wrap={FlexBoxWrap.Wrap} > style={spacing.sapUiContentPadding} ... </FlexBox>
Su componente ahora debería verse así:
import React, { useState } from "react";
import {
Avatar,
Card,
Text,
ShellBar,
ShellBarItem,
List,
StandardListItem,
ValueState,
ProgressIndicator,
Title,
TitleLevel,
FlexBox,
FlexBoxJustifyContent,
FlexBoxWrap,
FlexBoxDirection,
AnalyticalTable,
Icon
} from "@ui5/webcomponents-react";
import { spacing } from "@ui5/webcomponents-react-base";
import { BarChart, LineChart } from "@ui5/webcomponents-react-charts";
import "@ui5/webcomponents-icons/dist/line-chart.js";
import "@ui5/webcomponents-icons/dist/horizontal-bar-chart.js";
import "@ui5/webcomponents-icons/dist/add.js";
import "@ui5/webcomponents-icons/dist/list.js";
import "@ui5/webcomponents-icons/dist/table-view.js";
export function MyApp() {
const [toggleCharts, setToggleCharts] = useState("lineChart");
const [loading, setLoading] = useState(false);
const contentTitle =
toggleCharts === "lineChart" ? "Line Chart" : "Bar Chart";
const switchToChart =
toggleCharts === "lineChart" ? "Bar Chart" : "Line Chart";
const tableData = new Array(500).fill(null).map((_, index) => {
return {
name: `name${index}`,
age: Math.floor(Math.random() * 100),
friend: {
name: `friend.Name${index}`,
age: Math.floor(Math.random() * 100)
}
};
});
const tableColumns = [
{
Header: "Name",
accessor: "name" // String-based value accessors!
},
{
Header: "Age",
accessor: "age"
},
{
Header: "Friend Name",
accessor: "friend.name"
},
{
Header: "Friend Age",
accessor: "friend.age"
}
];
const handleHeaderClick = () => {
if (toggleCharts === "lineChart") {
setLoading(true);
setTimeout(() => {
setLoading(false);
setToggleCharts("barChart");
}, 2000);
} else {
setLoading(true);
setTimeout(() => {
setLoading(false);
setToggleCharts("lineChart");
}, 2000);
}
};
const dataset = [
{
month: "January",
data: 65
},
{
month: "February",
data: 59
},
{
month: "March",
data: 80
},
{
month: "April",
data: 81
},
{
month: "May",
data: 56
},
{
month: "June",
data: 55
},
{
month: "July",
data: 40
}
];
return (
<div>
<ShellBar
logo={<img src="reactLogo.png" />}
profile={<Avatar image="profilePictureExample.png" />}
primaryTitle="My App"
>
<ShellBarItem icon="add" text="Add" />
</ShellBar>
<FlexBox
justifyContent={FlexBoxJustifyContent.Center}
wrap={FlexBoxWrap.Wrap}
style={spacing.sapUiContentPadding}
>
<Card
avatar={
<Icon
name={
toggleCharts === "lineChart"
? "line-chart"
: "horizontal-bar-chart"
}
/>
}
heading="Stock Price"
style={{ width: "300px" }}
headerInteractive
onHeaderClick={handleHeaderClick}
subheading={`Click here to switch to ${switchToChart}`}
>
<Text style={spacing.sapUiContentPadding}>{contentTitle}</Text>
{toggleCharts === "lineChart" ? (
<LineChart
dimensions={[{ accessor: "month" }]}
measures={[{ accessor: "data", label: "Stock Price" }]}
dataset={dataset}
loading={loading}
/>
) : (
<BarChart
dimensions={[{ accessor: "month" }]}
measures={[{ accessor: "data", label: "Stock Price" }]}
dataset={dataset}
loading={loading}
/>
)}
</Card>
<Card
heading="Progress"
subheading="List"
style={{ width: "300px", ...spacing.sapUiContentPadding }}
avatar={<Icon name="list" />}
>
<List>
<StandardListItem info="finished" infoState={ValueState.Success}>
Activity 1
</StandardListItem>
<StandardListItem info="failed" infoState={ValueState.Error}>
Activity 2
</StandardListItem>
<StandardListItem
info="in progress"
infoState={ValueState.Warning}
style={{ height: "80px" }}
>
<FlexBox direction={FlexBoxDirection.Column}>
<Title level={TitleLevel.H5}>Activity 3</Title>
<ProgressIndicator value={89} valueState={ValueState.Success} />
</FlexBox>
</StandardListItem>
<StandardListItem
info="in progress"
infoState={ValueState.Warning}
style={{ height: "80px" }}
>
<FlexBox direction={FlexBoxDirection.Column}>
<Title level={TitleLevel.H5}>Activity 4</Title>
<ProgressIndicator value={5} valueState={ValueState.Error} />
</FlexBox>
</StandardListItem>
</List>
</Card>
<Card
heading="AnalyticalTable"
style={{ maxWidth: "900px", ...spacing.sapUiContentPadding }}
avatar={<Icon name="table-view" />}
>
<AnalyticalTable
data={tableData}
columns={tableColumns}
visibleRows={5}
/>
</Card>
</FlexBox>
</div>
);
}