Elevation
Elevation en Nuvex UI se expone mediante clases utilitarias que definen profundidad para superficies, barras y paneles superpuestos. Usa esta pagina para previsualizar cada nivel, entender la escala y copiar los nombres exactos de clase usados por el framework.
Uso
Elige un nivel de elevation e inspecciona la clase generada sobre una superficie neutra. Usa el resultado como token copiable para UI con capas.
Layered content with a visible shadow token.
Sintaxis de clases
Los helpers de elevation se expresan como e-elevation--{nivel}. Apliquelos sobre la superficie raiz del elemento que deba recibir profundidad.
Sufijo de nivel
Usa xs, sm, md, lg o xl para expresar la intensidad de la sombra.
Superficie raiz
Aplica elevation al contenedor externo, no a bloques internos de contenido.
Espaciado y radio
Combina elevation con bordes redondeados y espaciado interno para formar una superficie completa.
Referencia de escala
La escala documentada de elevation va desde la elevacion mas suave hasta la profundidad mas fuerte.
xs
Profundidad muy sutil para el tratamiento mas ligero.
sm
Elevation sutil por defecto para superficies de baja presencia.
md
Profundidad equilibrada para superficies levantadas y barras.
lg
Separacion clara para superficies flotantes mas prominentes.
xl
La profundidad documentada mas fuerte para superficies muy elevadas.
Ejemplos de implementacion
Usa elevation directamente sobre superficies que necesiten separacion visual del fondo de pagina.
Panel compacto
Una superficie pequena con padding y un token de sombra sutil.
Barra de herramientas
Una barra horizontal elevada con espaciado equilibrado y separacion mas clara.
Hoja flotante
Un panel superpuesto que se separa del resto de la interfaz.
Notas del framework
Estas notas resumen como se espera que se use elevation dentro del sistema de utilidades.
- Usa el nivel mas bajo que aun permita separar la superficie del fondo.
- Combina elevation con bordes redondeados y espaciado en lugar de sobrescribir box-shadow manualmente.
- Mantén elevation alineado con la jerarquia para que las superficies se lean de forma predecible en toda la app.