Por defecto, los Dashboards de la Plataforma incluyen una serie de Gadgets disponibles para su uso por parte de los usuarios.
Para añadir esto tipo de Gadgets, se desplegará la sección de gadgets predefinidos en el selector de Gadgets del Dashboard y se arrastrarán sobre el fondo.
A continuación explicamos cómo usar cada uno de ellos.
...
<style>
.card-container {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 600px;
margin: 20px;
}
.card-row {
display: flex;
gap: 20px;
justify-content: flex-start;
}
.card {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
text-align: center;
cursor: pointer;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.card img {
width: 40px;
height: 40px;
margin-bottom: 10px;
}
.card p {
font-size: 14px;
color: #333;
margin: 0;
}
</style>
<div class="card-container">
<div class="card-row">
<div class="card">
<img src="https://cdn-icons-png.freepik.com/256/11195/11195605.png" alt="BarChart">
<p>BarChart</p>
</div>
<div class="card">
<img src="https://cdn-icons-png.freepik.com/256/11195/11195605.png" alt="LineChart">
<p>LineChart</p>
</div>
<div class="card">
<img src="https://cdn-icons-png.freepik.com/256/11195/11195605.png" alt="PieChart">
<p>PieChart</p>
</div>
</div>
<div class="card-row">
<div class="card">
<img src="https://cdn-icons-png.freepik.com/256/11195/11195605.png" alt="MapChart">
<p>MapChart</p>
</div>
<div class="card">
<img src="https://cdn-icons-png.freepik.com/256/11195/11195605.png" alt="TableChart">
<p>TableChart</p>
</div>
<div class="card">
<img src="https://cdn-icons-png.freepik.com/256/11195/11195605.png" alt="DatePicker">
<p>DatePicker</p>
</div>
</div>
<div class="card-row">
<div class="card">
<img src="https://cdn-icons-png.freepik.com/256/11195/11195605.png" alt="Bar">
<p>Bar</p>
</div>
<div class="card">
<img src="https://cdn-icons-png.freepik.com/256/11195/11195605.png" alt="Line">
<p>Line</p>
</div>
<div class="card">
<img src="https://cdn-icons-png.freepik.com/256/11195/11195605.png" alt="Mixed">
<p>Mixed</p>
</div>
</div>
<div class="card-row">
<div class="card">
<img src="https://cdn-icons-png.freepik.com/256/11195/11195605.png" alt="Pie">
<p>Pie</p>
</div>
</div>
</div>...
| Child pages (Children Display) | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|