timum

Styling

Personalizzi l'aspetto e i caratteri di BookingJs: tema MUI per colori, tipografia e componenti, oltre all'integrazione di font web personalizzati.

Funzione PRO:

Personalizzi completamente l'aspetto di BookingJs con un tema MUI personalizzato per colori, tipografia e componenti, oltre a font propri. Disponibile nei piani Professional – Visualizzi i piani.

Panoramica

timum utilizza componenti Material-UI (MUI) per tutti i frontend. L'oggetto muiTheme consente modifiche di design globali che influenzano l'intero aspetto del widget.

Personalizzazione di base del tema

Tema semplice
timum.init(
  { ref: 'ihre-ressourcen-referenz' },
  {
    palette: {
      primary: {
        main: '#337ab7',
      },
      secondary: {
        main: '#5cb85c',
      },
    },
  }
);

Personalizzare la tipografia

Tipografia
timum.init(
  { ref: 'ihre-ressourcen-referenz' },
  {
    typography: {
      fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
      h1: {
        fontSize: '2.5rem',
        fontWeight: 600,
      },
      h2: {
        fontSize: '2rem',
        fontWeight: 600,
      },
      body1: {
        fontSize: '1rem',
        lineHeight: 1.6,
      },
    },
  }
);

Esempio di tema completo

Tema esteso
timum.init(
  { ref: 'ihre-ressourcen-referenz' },
  {
    palette: {
      primary: {
        main: '#1a73e8',
        light: '#4791db',
        dark: '#115293',
        contrastText: '#ffffff',
      },
      secondary: {
        main: '#f50057',
      },
      background: {
        default: '#f5f5f5',
        paper: '#ffffff',
      },
      text: {
        primary: '#333333',
        secondary: '#666666',
      },
    },
    typography: {
      fontFamily: '"Inter", sans-serif',
      button: {
        textTransform: 'none', // Nessuna maiuscola
        fontWeight: 500,
      },
    },
    shape: {
      borderRadius: 8,
    },
    components: {
      MuiButton: {
        styleOverrides: {
          root: {
            borderRadius: 24,
            padding: '10px 24px',
          },
        },
      },
      MuiCard: {
        styleOverrides: {
          root: {
            boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
          },
        },
      },
    },
  }
);

Componente React con tema

React con tema
import { TimumBooking } from '@timum/booking';

const theme = {
  palette: {
    primary: {
      main: '#your-brand-color',
    },
  },
  typography: {
    fontFamily: 'Ihr-Font, sans-serif',
  },
};

function BookingPage() {
  return (
    <TimumBooking
      appConfig={{ ref: 'ihre-ressourcen-referenz' }}
      muiTheme={theme}
    />
  );
}

Opzioni del tema disponibili

OpzioneDescrizione
paletteTavolozza colori (primary, secondary, error, warning, info, success)
typographyCarattere, dimensioni, pesi
shapeRaggio del bordo per angoli arrotondati
spacingSpaziatura di base (predefinito: 8px)
componentsSovrascritture per singoli componenti

Sovrascritture dei componenti

Può sovrascrivere in modo mirato lo stile di singoli componenti MUI:

Personalizzare i componenti
{
  components: {
    MuiButton: {
      defaultProps: {
        disableElevation: true,
      },
      styleOverrides: {
        root: {
          borderRadius: 20,
        },
        containedPrimary: {
          '&:hover': {
            backgroundColor: '#darker-shade',
          },
        },
      },
    },
    MuiTextField: {
      defaultProps: {
        variant: 'outlined',
        size: 'small',
      },
    },
  },
}

Font

BookingJs supporta due strategie per il caricamento dei font:

  • Font inline: Dichiarazione @font-face diretta nel tema
  • Basato su link: Integrazione di file CSS (ad es. Google Fonts)

Metodo 1: font variabile inline

Il metodo più performante è l'uso di font variabili con una dichiarazione @font-face diretta:

Font variabile
timum.init(
  { ref: 'ihre-ressourcen-referenz' },
  {
    typography: {
      fontFamily: '"My Font", Roboto, Helvetica, Arial, sans-serif',
      fontFaces: [
        {
          family: 'My Font',
          style: 'normal',
          weight: '100 900',  // Intervallo di peso variabile
          display: 'swap',
          src: [
            { local: 'Inter' },
            { url: '/fonts/inter-var.woff2', format: 'woff2' }
          ]
        },
        {
          family: 'My Font',
          style: 'italic',
          weight: '100 900',
          display: 'swap',
          src: [
            { local: 'Inter Italic' },
            { url: '/fonts/inter-italic-var.woff2', format: 'woff2' }
          ]
        }
      ]
    }
  }
);

Proprietà di fontFace

ProprietàDescrizione
familyNome della famiglia di font
stylenormal, italic
weightValore singolo (400) o intervallo (100 900)
displayswap, block, fallback, optional, auto
srcArray di fonti (local, url con format)

Metodo 2: CSS basato su link

In alternativa, può utilizzare bundle CSS esistenti come Google Fonts:

Google Fonts
timum.init(
  { ref: 'ihre-ressourcen-referenz' },
  {
    typography: {
      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
      fontSource: [
        'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'
      ]
    }
  }
);

Deduplicazione automatica:

BookingJs impedisce il caricamento duplicato dello stesso URL CSS.

Font specifici per componente

Può anche utilizzare font diversi per componenti diversi:

Font dei componenti
timum.init(
  { ref: 'ihre-ressourcen-referenz' },
  {
    typography: {
      fontFamily: '"Inter", sans-serif',
      fontFaces: [
        // Inter per il testo principale
        {
          family: 'Inter',
          weight: '400 700',
          src: [{ url: '/fonts/inter-var.woff2', format: 'woff2' }]
        },
        // Sora per i pulsanti
        {
          family: 'Sora',
          weight: '500 600',
          src: [{ url: '/fonts/sora.woff2', format: 'woff2' }]
        }
      ]
    },
    components: {
      MuiButton: {
        styleOverrides: {
          root: {
            fontFamily: '"Sora", sans-serif'
          }
        }
      }
    }
  }
);

Font autoospitati

Autoospitato
// Inserire i file dei font in /public/fonts/
timum.init(
  { ref: 'ihre-ressourcen-referenz' },
  {
    typography: {
      fontFamily: '"Corporate Font", sans-serif',
      fontFaces: [
        {
          family: 'Corporate Font',
          style: 'normal',
          weight: 400,
          display: 'swap',
          src: [
            { url: '/fonts/corporate-regular.woff2', format: 'woff2' },
            { url: '/fonts/corporate-regular.woff', format: 'woff' }
          ]
        },
        {
          family: 'Corporate Font',
          style: 'normal',
          weight: 700,
          display: 'swap',
          src: [
            { url: '/fonts/corporate-bold.woff2', format: 'woff2' },
            { url: '/fonts/corporate-bold.woff', format: 'woff' }
          ]
        }
      ]
    }
  }
);

Best practice

  • Utilizzare WOFF2: Dimensioni file ridotte, ampio supporto
  • Preferire i font variabili: Un solo file per tutti i pesi
  • Utilizzare display: swap: Evita il FOIT (Flash of Invisible Text)
  • Considerare CORS: Impostare le intestazioni corrette per l'hosting esterno
  • local() per primo: I font già installati vengono preferiti

Argomenti correlati

Risorse esterne