timum

Styling

Personalice la apariencia y las fuentes de BookingJs: tema MUI para colores, tipografía y componentes, así como la integración de fuentes web propias.

Función PRO:

Personalice completamente la apariencia de BookingJs, con su propio tema MUI para colores, tipografía y componentes, así como sus propias fuentes. Disponible en los planes Professional – Ver tarifas.

Resumen

timum utiliza componentes Material-UI (MUI) para todos los frontends. El objeto muiTheme permite realizar cambios de diseño globales que afectan a todo el aspecto del widget.

Personalización básica del tema

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

Personalizar la tipografía

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

Ejemplo de tema completo

Tema extenso
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', // Sin mayúsculas
        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}
    />
  );
}

Opciones de tema disponibles

OpciónDescripción
palettePaleta de colores (primary, secondary, error, warning, info, success)
typographyFuente, tamaños, pesos
shapeRadio de borde para esquinas redondeadas
spacingEspaciado base (por defecto: 8px)
componentsSobrescrituras para componentes individuales

Sobrescrituras de componentes

Puede sobrescribir de forma específica el estilo de componentes MUI individuales:

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

Fuentes

BookingJs admite dos estrategias para cargar fuentes:

  • Fuentes en línea: Declaración @font-face directa en el tema
  • Basado en enlaces: Integración de archivos CSS (p. ej., Google Fonts)

Método 1: fuente variable en línea

El método más eficiente es el uso de fuentes variables con una declaración @font-face directa:

Fuente 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',  // Rango de peso 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' }
          ]
        }
      ]
    }
  }
);

Propiedades de fontFace

PropiedadDescripción
familyNombre de la familia de fuentes
stylenormal, italic
weightValor único (400) o rango (100 900)
displayswap, block, fallback, optional, auto
srcArray de orígenes (local, url con format)

Método 2: CSS basado en enlaces

Alternativamente, puede utilizar paquetes CSS existentes como 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'
      ]
    }
  }
);

Deduplicación automática:

BookingJs evita la carga duplicada de la misma URL de CSS.

Fuentes específicas de componentes

También puede utilizar fuentes diferentes para distintos componentes:

Fuentes de componentes
timum.init(
  { ref: 'ihre-ressourcen-referenz' },
  {
    typography: {
      fontFamily: '"Inter", sans-serif',
      fontFaces: [
        // Inter para el texto principal
        {
          family: 'Inter',
          weight: '400 700',
          src: [{ url: '/fonts/inter-var.woff2', format: 'woff2' }]
        },
        // Sora para los botones
        {
          family: 'Sora',
          weight: '500 600',
          src: [{ url: '/fonts/sora.woff2', format: 'woff2' }]
        }
      ]
    },
    components: {
      MuiButton: {
        styleOverrides: {
          root: {
            fontFamily: '"Sora", sans-serif'
          }
        }
      }
    }
  }
);

Fuentes autoalojadas

Autoalojado
// Colocar los archivos de fuente en /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' }
          ]
        }
      ]
    }
  }
);

Mejores prácticas

  • Usar WOFF2: Menor tamaño de archivo, amplia compatibilidad
  • Preferir fuentes variables: Un solo archivo para todos los pesos
  • Usar display: swap: Evita el FOIT (Flash of Invisible Text)
  • Tener en cuenta CORS: Configurar las cabeceras correctas en alojamiento externo
  • local() primero: Se priorizan las fuentes ya instaladas

Temas relacionados

Recursos externos