Papel (Paper)
El componente Papel es un contenedor para mostrar contenidos en una superficie elevada.
Introducción
En Material Design, los componentes de superficie y los estilos de sombra están fuertemente influenciados por sus homólogos físicos del mundo real.
U-Ui implementa este concepto como el componente Paper, una superficie similar a un contenedor que cuenta con la propiedad elevation para extraer valores de sombra de caja (box-shadow) del tema.
Componente
import Paper from '@u_ui/u-ui/Paper';
Personalización
Elevación
Utilice la propiedad elevation para establecer jerarquías mediante el uso de sombras.
El nivel de elevación por defecto del componente Papel es 1.
La propiedad acepta valores de 0 a 24.
Cuanto mayor sea el número, más lejos parecerá estar el papel de su fondo.
En modo oscuro, al aumentar la elevación tambien se aclara el color del fondo.
Esto se consigue aplicando un degradado semitransparente con la propiedad CSS background-image.
Variantes
Establezca la variable variant prop en "outlined" para obtener un papel plano y contorneado sin sombras.
Esquinas
El componente Papel incluye esquinas redondeadas por defecto.
Añada la propiedad square para obtener esquinas cuadradas:
Anatomía
El componente Papel esta compuesto por una única raíz <div> que envuelve su contenido:
<div class="uiPaper-root">
<!-- Contenido del papel -->
</div>