Passer au contenu principal
Utilisez CSS pour mettre en forme les éléments HTML, ou ajoutez du CSS et du JavaScript personnalisés afin d’adapter entièrement l’apparence et l’expérience de votre documentation.

​
Styliser avec Tailwind CSS

Utilisez Tailwind CSS v3 pour styliser les éléments HTML. Vous pouvez contrôler la mise en page, l’espacement, les couleurs et d’autres propriétés visuelles. Quelques classes courantes :
  • w-full - Pleine largeur
  • aspect-video - Ratio 16:9
  • rounded-xl - Grandes bordures arrondies
  • block, hidden - Contrôle de l’affichage
  • dark:hidden, dark:block - Visibilité en mode sombre
Les valeurs arbitraires de Tailwind CSS ne sont pas prises en charge. Pour des valeurs personnalisées, utilisez plutôt la prop style. 
<img style={{ width: '350px', margin: '12px auto' }} src="/path/image.jpg" />
L’utilisation de la prop style peut provoquer un décalage de la mise en page au chargement, en particulier sur les pages en mode personnalisé. Utilisez plutôt des classes Tailwind CSS ou des fichiers CSS personnalisés pour éviter les décalages ou le scintillement.

​
Ajouter du CSS personnalisé

Ajoutez des fichiers CSS à votre référentiel pour appliquer les noms de classes qu’ils définissent et les rendre disponibles dans tous vos fichiers MDX.

​
Ajout de style.css

Par exemple, vous pouvez ajouter le fichier style.css suivant pour personnaliser la barre de navigation et le pied de page. 
#navbar {
  background: #fffff2;
  padding: 1rem;
}

footer {
  margin-top: 2rem;
}

​
Utilisation des identifiants et des sélecteurs

Mintlify propose un ensemble d’identifiants et de sélecteurs courants pour vous aider à baliser les éléments importants de l’interface utilisateur.
Utilisez l’outil d’inspection des éléments pour trouver les références aux éléments que vous souhaitez personnaliser.
  • APIPlaygroundInput: api-playground-input
  • AssistantEntry: assistant-entry
  • AssistantEntryMobile: assistant-entry-mobile
  • Banner: banner
  • BodyContent: body-content
  • ChangelogFilters: changelog-filters
  • ChangelogFiltersContent: changelog-filters-content
  • ChatAssistantSheet: chat-assistant-sheet
  • ChatAssistantTextArea: chat-assistant-textarea
  • ContentArea: content-area
  • ContentContainer: content-container
  • ContentSideLayout: content-side-layout
  • FeedbackForm: feedback-form
  • FeedbackFormCancel: feedback-form-cancel
  • FeedbackFormInput: feedback-form-input
  • FeedbackFormSubmit: feedback-form-submit
  • FeedbackThumbsDown: feedback-thumbs-down
  • FeedbackThumbsUp: feedback-thumbs-up
  • Footer: footer
  • Header: header
  • NavBarTransition: navbar-transition
  • NavigationItems: navigation-items
  • Navbar: navbar
  • PageContextMenu: page-context-menu
  • PageContextMenuButton: page-context-menu-button
  • PageTitle: page-title
  • Pagination: pagination
  • Panel: panel
  • RequestExample: request-example
  • ResponseExample: response-example
  • SearchBarEntry: search-bar-entry
  • SearchBarEntryMobile: search-bar-entry-mobile
  • SearchInput: search-input
  • Sidebar: sidebar
  • SidebarContent: sidebar-content
  • TableOfContents: table-of-contents
  • TableOfContentsContent: table-of-contents-content
  • TableOfContentsLayout: table-of-contents-layout
  • TopbarCtaButton: topbar-cta-button
  • Accordion: accordion
  • AccordionGroup: accordion-group
  • AlmondLayout: almond-layout
  • AlmondNavBottomSection: almond-nav-bottom-section
  • AlmondNavBottomSectionDivider: almond-nav-bottom-section-divider
  • Anchor: nav-anchor
  • Anchors: nav-anchors
  • APISection: api-section
  • APISectionHeading: api-section-heading
  • APISectionHeadingSubtitle: api-section-heading-subtitle
  • APISectionHeadingTitle: api-section-heading-title
  • Callout: callout
  • Card: card
  • CardGroup: card-group
  • ChatAssistantSheet: chat-assistant-sheet
  • ChatAssistantSheetHeader: chat-assistant-sheet-header
  • ChatAssistantSheetContent: chat-assistant-sheet-content
  • ChatAssistantInput: chat-assistant-input
  • ChatAssistantSendButton: chat-assistant-send-button
  • CodeBlock: code-block
  • CodeGroup: code-group
  • Content: mdx-content
  • DropdownTrigger: nav-dropdown-trigger
  • DropdownContent: nav-dropdown-content
  • DropdownItem: nav-dropdown-item
  • DropdownItemTextContainer: nav-dropdown-item-text-container
  • DropdownItemTitle: nav-dropdown-item-title
  • DropdownItemDescription: nav-dropdown-item-description
  • DropdownItemIcon: nav-dropdown-item-icon
  • Expandable: expandable
  • Eyebrow: eyebrow
  • FeedbackToolbar: feedback-toolbar
  • Field: field
  • Frame: frame
  • Icon: icon
  • Link: link
  • LoginLink: login-link
  • Logo: nav-logo
  • Mermaid: mermaid
  • MethodNavPill: method-nav-pill
  • MethodPill: method-pill
  • NavBarLink: navbar-link
  • NavTagPill: nav-tag-pill
  • NavTagPillText: nav-tag-pill-text
  • OptionDropdown: option-dropdown
  • PaginationNext: pagination-next
  • PaginationPrev: pagination-prev
  • PaginationTitle: pagination-title
  • Panel: panel
  • SidebarGroup: sidebar-group
  • SidebarGroupIcon: sidebar-group-icon
  • SidebarGroupHeader: sidebar-group-header
  • SidebarNavGroupDivider: sidebar-nav-group-divider
  • SidebarTitle: sidebar-title
  • Step: step
  • Steps: steps
  • Tab: tab
  • Tabs: tabs
  • TabsBar: nav-tabs
  • TabsBarItem: nav-tabs-item
  • TableOfContents: toc
  • TableOfContentsItem: toc-item
  • Tooltip: tooltip
  • TopbarRightContainer: topbar-right-container
  • TryitButton: tryit-button
  • Update: update
Attributs de donnéesCertains éléments exposent des attributs de données que vous pouvez utiliser comme sélecteurs CSS.État actif (data-active) :
  • Élément actif dans un menu déroulant de navigation : nav-dropdown-item[data-active]
  • Onglet actif dans la navigation mobile : mobile-nav-tabs-item[data-active]
  • Groupe actif de la barre latérale : sidebar-group[data-active]
  • Lien actif de la barre latérale : #sidebar-content li[data-active]
  • Onglet actif de la navigation supérieure : .nav-tabs-item[data-active] — s’applique uniquement aux onglets simples ; les onglets avec menus déroulants ne reçoivent pas data-active. Notez le . initial : il cible une classe sur un élément <a> standard, contrairement à la plupart des autres composants qui utilisent des noms d’éléments personnalisés.
  • Élément actif de la table des matières : toc-item[data-active]
  • Élément le plus profond actif de la table des matières : toc-item[data-active-deepest] — uniquement présent sur le titre exactement visible, contrairement à data-active qui est également défini sur ses titres parents.
Nom de composant (data-component-name) :Utilisez data-component-name pour cibler des composants d’interface spécifiques avec un sélecteur stable qui persiste même si les noms de classes internes changent.
  • Conteneur de diagramme Mermaid : [data-component-name="mermaid-container"] — inclut la superposition des contrôles de zoom
  • Contrôles de zoom et de déplacement Mermaid : [data-component-name="mermaid-controls-wrapper"]
  • Bouton principal de l’en-tête : [data-component-name="primary-header-button"] — thème Sequoia uniquement
  • Bascule de thème : [data-component-name="theme-toggle"]
Attributs Badge :
  • Badge : [data-badge]
  • Badge par couleur : [data-badge][data-color="blue"]
  • Badge par taille : [data-badge][data-size="sm"]
Les références et la mise en forme des éléments courants sont susceptibles d’évoluer au fil des mises à jour de la plateforme. Veillez à utiliser les styles personnalisés avec prudence.

​
JavaScript personnalisé

Le JavaScript personnalisé vous permet d’ajouter du code exécutable personnalisé à l’échelle du site. C’est l’équivalent d’ajouter une balise <script> contenant du code JS sur chaque page.

​
Ajout de JavaScript personnalisé

Mintlify inclut tout fichier .js situé dans le répertoire de contenu de votre documentation dans chaque page de votre site de documentation. Par exemple, vous pouvez ajouter le fichier ga.js suivant pour activer Google Analytics sur l’ensemble de la documentation. 
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TAG_ID');
Veuillez l’utiliser avec prudence afin de ne pas introduire de vulnérabilités de sécurité.