Classi di utilità.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

Ogni elemento ha un campo HTML classes con un elenco di classi con nome. Utilità Bootstrap 5 e ombre sono integrate. Il tuo tema può aggiungere un gruppo proprio tramite il suo .info.yml, e un modulo tramite un hook alter. Questa pagina spiega cosa contiene l’elenco e come registri le tue classi, così gli editor scelgono un aspetto brand per nome invece di digitare nomi di classi.

Applica una classe

  1. Apri le impostazioni dell’elemento e trova HTML classes in fondo al pannello General.
  2. Fai clic sul riquadro e scegli una classe dall’elenco. Digitare nel riquadro filtra l’elenco.
  3. Per inserire una classe non in elenco, fai clic su Edit as text e digitala.
  4. Fai clic su Save nella finestra, poi su Save nella barra del builder.

Le classi finiscono nell’attributo class dell’elemento nell’HTML salvato. ID HTML e classi guida gli editor negli usi comuni.

Cosa contiene l’elenco

L’editor costruisce l’elenco all’avvio. Unisce tre fonti in quest’ordine:

  1. L’elenco integrato. Contiene un gruppo Drop shadows, un breve gruppo Bootstrap classes e le utilità Bootstrap 5, raggruppate per compito: Display & Visibility, Responsive Visibility, Margins, Padding, Text Colors e altro.
  2. Un gruppo per ogni tema installato il cui .info.yml ha una chiave dxpr_builder_classes. Il gruppo è etichettato con il nome del tema.
  3. Modifiche dai moduli, vedi Registrare classi da un modulo.

L’elenco HTML classes aperto nel pannello General di un elemento Text, scorso al gruppo chiamato DXPR Theme con voci come Inline Form e Background color: DXPR Theme accent1

Quindi ogni sito ha classi per lo spazio, come mt-3 e px-4, per la visualizzazione, come d-none, e per il testo, come text-center e fw-bold. Non devi configurare niente per averle.

Registrare classi in un tema

Aggiungi una mappatura dxpr_builder_classes al .info.yml del tema. Ogni chiave è un nome di classe, o più nomi separati da spazi; ogni valore è l’etichetta vista dagli editor. DXPR Theme registra le sue classi così:

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. Aggiungi la mappatura a themes/custom/mytheme/mytheme.info.yml:

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

  2. Scrivi il CSS per le classi in una libreria che il tema carica su ogni pagina; vedi CSS personalizzato.

  3. Svuota le cache con drush cr, così Drupal rilegge il file info.

  4. Apri le impostazioni di un elemento e verifica che HTML classes mostri un gruppo con il nome del tuo tema e le due voci.

Ogni tema installato con la chiave aggiunge il suo gruppo, non solo il tema predefinito. Il gruppo porta sempre il nome del tema; il file info non può rinominarlo.

Registrare classi da un modulo

Un modulo personalizzato può aggiungere classi, o rimuovere classi registrate da un tema, con un hook alter. Non può rimuovere le voci Bootstrap integrate, perché l’editor le aggiunge nel browser. Il codice è in Riferimento API hook.

Versione Bootstrap

L’elenco integrato è Bootstrap 5. Se il tuo tema non carica Bootstrap 5, imposta Sideload Bootstrap files a Bootstrap 5 in Bootstrap in DXPR Studio > DXPR Builder > General Settings, così le classi hanno CSS dietro di sé. Vedi Performance per ciò che carica.

Se non vedi le tue classi

  • Il gruppo del tuo tema manca in HTML classes. Drupal usa ancora la vecchia copia del file info del tema. Fai clic su Clear all caches in Configuration > Development > Performance (/admin/config/development/performance), oppure esegui drush cr.
  • Un tema con la chiave non aggiunge gruppi. Contano solo i temi installati. Installa il tema in Appearance (/admin/appearance); non deve essere il tema predefinito.
  • L’elemento sembra uguale dopo aver scelto una classe. Nessun CSS per quella classe si carica nella pagina. Aggiungi le regole a una libreria caricata dal tuo tema, vedi CSS personalizzato. Per le classi Bootstrap, vedi Versione Bootstrap.

Prossimi passi