Clases de utilidades.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

Cada elemento tiene un campo HTML classes con una lista de clases con nombre. Las utilidades de Bootstrap 5 y las sombras están integradas. Tu tema puede añadir un grupo propio con su .info.yml, y un módulo con un hook de alteración. Esta página explica qué contiene la lista y cómo registras tus propias clases, para que las personas que editan escojan un aspecto de marca por nombre en lugar de escribir nombres de clases.

Aplica una clase

  1. Abre los ajustes del elemento y busca HTML classes al final del panel General.
  2. Haz clic en el recuadro y escoge una clase de la lista. Escribir en el recuadro filtra la lista.
  3. Para introducir una clase que no está en la lista, haz clic en Edit as text y escríbela.
  4. Haz clic en Save en el diálogo, y luego en Save en la barra del constructor.

Las clases van al atributo class del elemento en el HTML guardado. ID y clases HTML guía a quienes editan por los usos comunes.

Qué contiene la lista

El editor crea la lista al arrancar. Fusiona tres orígenes en este orden:

  1. La lista integrada. Tiene un grupo Drop shadows, un grupo corto Bootstrap classes y las utilidades de Bootstrap 5, agrupadas por tarea: Display & Visibility, Responsive Visibility, Margins, Padding, Text Colors y más.
  2. Un grupo por cada tema instalado cuyo .info.yml tiene una clave dxpr_builder_classes. El grupo lleva el nombre del tema.
  3. Cambios desde módulos; consulta Registra clases desde un módulo.

Lista HTML classes abierta en el panel General de un elemento Text, desplazada al grupo llamado DXPR Theme con entradas como Inline Form y Background color: DXPR Theme accent1

Así que cada sitio tiene clases de espacio, como mt-3 y px-4, de visualización, como d-none, y de texto, como text-center y fw-bold. No configuras nada para ellas.

Registra clases en un tema

Añade un mapeo dxpr_builder_classes al .info.yml del tema. Cada clave es un nombre de clase, o varios separados por espacios; cada valor es la etiqueta que ven las personas que editan. DXPR Theme registra sus clases así:

dxpr_builder_classes:
  dxpr-theme-form-inline: 'Inline Form'
  dxpr-theme-util-background-accent1: 'Background color: DXPR Theme accent1'
  dxpr-theme-util-border-accent1: 'Border color: DXPR Theme accent1'

  1. Añade el mapeo a themes/custom/mytheme/mytheme.info.yml:

    dxpr_builder_classes:
  brand-card: 'Brand card'
  brand-card shadow-lg: 'Brand card with shadow'

  2. Escribe el CSS de las clases en una biblioteca que el tema carga en cada página; consulta CSS personalizado.

  3. Limpia cachés con drush cr, para que Drupal lea de nuevo el archivo info.

  4. Abre los ajustes de un elemento y comprueba que HTML classes muestra un grupo con el nombre de tu tema y las dos entradas.

Cada tema instalado con la clave añade su grupo, no solo el tema predeterminado. El grupo siempre lleva el nombre del tema; el archivo info no puede renombrarlo.

Registra clases desde un módulo

Un módulo personalizado puede añadir clases, o quitar clases que registró un tema, con un hook de alteración. No puede quitar las entradas integradas de Bootstrap, porque el editor las añade en el navegador. El código está en Referencia de la API de hooks.

Versión de Bootstrap

La lista integrada es Bootstrap 5. Si tu tema no carga Bootstrap 5, fija Sideload Bootstrap files en Bootstrap 5 dentro de Bootstrap en DXPR Studio > DXPR Builder > General Settings, para que las clases tengan CSS detrás. Consulta Rendimiento para ver lo que eso carga.

Si no ves tus clases

  • El grupo de tu tema falta en las HTML classes. Drupal aún usa la copia vieja del archivo info del tema. Haz clic en Clear all caches en Configuration > Development > Performance (/admin/config/development/performance), o ejecuta drush cr.
  • Un tema con la clave no añade ningún grupo. Solo cuentan los temas instalados. Instala el tema en Appearance (/admin/appearance); no necesita ser el tema predeterminado.
  • El elemento se ve igual tras elegir una clase. Ningún CSS de esa clase se carga en la página. Añade las reglas a una biblioteca que tu tema carga; consulta CSS personalizado. Para clases Bootstrap, consulta Versión de Bootstrap.

¿Qué sigue?