Clases CSS que debes conocer de UI5

Cuando estamos desarrollando aplicaciones web con UI5, a menudo nos encontramos con la necesidad de aplicar estilos específicos a nuestros elementos HTML. Para facilitarnos la tarea, SAPUI5 nos proporciona una serie de clases CSS predefinidas que podemos utilizar en nuestros proyectos. Estas clases CSS son una herramienta valiosa para cualquier desarrollador de SAPUI5 que quiera mejorar el aspecto y la funcionalidad de sus aplicaciones.

Visibilidad y width

Disponemos de algunas utilidades para indicar width automático y distintas visibilidades en función del dispositivo. No siempre es necesario utilizar un modelo Device y bindar la propiedad visible.

.sapUiForceWidthAuto → Tamaño horizontal automático;
.sapUiHideOnPhone → Oculto en smartphone;
.sapUiHideOnTablet → Oculto en tablet;
.sapUiHideOnDesktop → Oculto en ordenador;
.sapUiVisibleOnlyOnPhone → Visible únicamente en smartphone;
.sapUiVisibleOnlyOnTablet → Visible únicamente en tablet;
.sapUiVisibleOnlyOnDesktop → Visible únicamente en ordenador;

Respecto a los css en función del dispositivo, UI5 añade automáticamente las siguientes clases al elemento raíz html del DOM: sap-desktop, sap-tablet y sap-phone. Por poner un ejemplo, podríamos cambiar el color de un texto en función del dispositivo de la siguiente manera:

.sap-desktop .texto {
  color: red;
}
.sap-tablet .texto {
  color: blue;
}
.sap-phone .texto {
  color: green;
}

Márgenes

UI5 dispone de cuatro clases css específicas para manejar márgenes. Éstas aplican un margen de distinto tamaño a los 4 lados del elemento al cual añadamos la clase css:

.sapUiTinyMargin → 0.5rem;
.sapUiSmallMargin → 1rem;
.sapUiMediumMargin → 2rem;
.sapUiLargeMargin → 3rem;

Cada una de estas clases tiene seis variantes, cuatro para especificar un lado concreto y dos para especificar lados paralelos:

.Top → Superior;
.Bottom → Inferior;
.Begin → Izquierda;
.End → Derecha;
.BeginEnd → Izquierda y derecha;
.TopBottom → Superior e inferior;

Las clases las podemos combinar como sea necesario. El siguiente ejemplo no tiene ningún sentido, funcionalmente hablando, pero técnicamente no hay problema en combinar las clases así:

<HBox class="sapUiTinyMarginTopBottom sapUiSmallMarginBeginEnd">
 <Text text="Margen derecha" class="sapUiSmallMarginEnd" />
 <Text text="Margen izquierda y derecha" class="sapUiSmallMarginBeginEnd sapUiTinyMarginTop" />
 <Text text="Margen izquierda" class="sapUiSmallMarginBegin" />
</HBox>

A continuación tienes una tabla con las combinaciones posibles:

También disponemos de las clases css para eliminar el margen en un lado dado:

.sapUiNoMarginTop → 0rem;
.sapUiNoMarginBottom → 0rem;
.sapUiNoMarginBegin → 0rem;
.sapUiNoMarginEnd → 0rem;

Adicionalmente, las siguientes clases también existen aunque no estén documentadas 😜:

.sapUiTinyNegativeMarginBeginEnd → -0.5rem;
.sapUiSmallNegativeMarginBeginEnd → -1rem;
.sapUiMediumNegativeMarginBeginEnd → -2rem;
.sapUiLargeNegativeMarginBeginEnd → -3rem;

Paddings

Disponemos de tres clases para establecer paddings en controles que tengan agregación content. Los controles que admiten estas clases son los siguientes: sap.m.Dialog, sap.m.IconTabBar, sap.m.Popover, sap.m.Page, sap.m.List, sap.m.Table, sap.m.Carousel, sap.m.Panel, sap.m.ScrollContainer, sap.ui.layout.HorizontalLayout, sap.ui.layout.VerticalLayout

.sapUiNoContentPadding → Sin padding;
.sapUiContentPadding → Con padding;
.sapUiResponsiveContentPadding → Padding responsive;

Además, existen estas clases para establecer paddings fijos a cualquier control UI5. Nuevamente, no son clases documentadas, pero lo que es existir, existen 🤣:

/* Paddings genéricos */
.sapUi-Std-PaddingS → 1rem;
.sapUi-Std-PaddingM → 2rem;
.sapUi-Std-PaddingL → 2rem;
.sapUi-Std-PaddingXL → 3rem;