Styling

Personnalisez l'apparence et les polices de BookingJs : thème MUI pour les couleurs, la typographie et les composants, ainsi que l'intégration de polices web personnalisées.

Fonctionnalité PRO :

Personnalisez entièrement l'apparence de BookingJs – avec votre propre thème MUI pour les couleurs, la typographie et les composants, ainsi que vos propres polices. Disponible dans les forfaits Professional – Voir les tarifs.

Aperçu

timum utilise des composants Material-UI (MUI) pour tous les frontends. L'objet muiTheme permet des modifications de design globales qui affectent l'ensemble de l'apparence du widget.

Thème de base

Thème simple

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

Personnaliser la typographie

Typographie

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,
      },
    },
  }
);

Exemple de thème complet

Thème étendu

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', // Pas de majuscules
        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)',
          },
        },
      },
    },
  }
);

Composant React avec thème

React avec thème

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}
    />
  );
}

Options de thème disponibles

Option	Description
`palette`	Palette de couleurs (primary, secondary, error, warning, info, success)
`typography`	Police, tailles, graisses
`shape`	Rayon de bordure pour les coins arrondis
`spacing`	Espacement de base (par défaut : 8px)
`components`	Surcharges pour des composants individuels

Surcharges de composants

Vous pouvez surcharger le style de composants MUI individuels de manière ciblée :

Personnaliser les composants

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

Polices

BookingJs prend en charge deux stratégies de chargement des polices :

Polices en ligne : Déclaration @font-face directe dans le thème
Basé sur des liens : Intégration de fichiers CSS (par ex. Google Fonts)

Méthode 1 : police variable en ligne

La méthode la plus performante consiste à utiliser des polices variables avec une déclaration @font-face directe :

Police variable

timum.init(
  { ref: 'ihre-ressourcen-referenz' },
  {
    typography: {
      fontFamily: '"My Font", Roboto, Helvetica, Arial, sans-serif',
      fontFaces: [
        {
          family: 'My Font',
          style: 'normal',
          weight: '100 900',  // Plage de graisse variable
          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' }
          ]
        }
      ]
    }
  }
);

Propriétés fontFace

Propriété	Description
`family`	Nom de la famille de polices
`style`	normal, italic
`weight`	Valeur unique (400) ou plage (100 900)
`display`	swap, block, fallback, optional, auto
`src`	Tableau de sources (local, url avec format)

Méthode 2 : CSS basé sur des liens

Vous pouvez également utiliser des bundles CSS existants comme 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'
      ]
    }
  }
);

Déduplication automatique :

BookingJs empêche le chargement en double de la même URL CSS.

Polices spécifiques aux composants

Vous pouvez également utiliser des polices différentes pour différents composants :

Polices des composants

timum.init(
  { ref: 'ihre-ressourcen-referenz' },
  {
    typography: {
      fontFamily: '"Inter", sans-serif',
      fontFaces: [
        // Inter pour le texte principal
        {
          family: 'Inter',
          weight: '400 700',
          src: [{ url: '/fonts/inter-var.woff2', format: 'woff2' }]
        },
        // Sora pour les boutons
        {
          family: 'Sora',
          weight: '500 600',
          src: [{ url: '/fonts/sora.woff2', format: 'woff2' }]
        }
      ]
    },
    components: {
      MuiButton: {
        styleOverrides: {
          root: {
            fontFamily: '"Sora", sans-serif'
          }
        }
      }
    }
  }
);

Polices auto-hébergées

Auto-hébergé

// Placer les fichiers de police dans /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' }
          ]
        }
      ]
    }
  }
);

Bonnes pratiques

Utiliser WOFF2 : Taille de fichier plus petite, large prise en charge
Préférer les polices variables : Un seul fichier pour toutes les graisses
Utiliser display: swap : Évite le FOIT (Flash of Invisible Text)
Respecter les CORS : Définir les en-têtes corrects pour l'hébergement externe
local() en premier : Les polices déjà installées sont privilégiées