Estilos con Tailwind CSS
w-full
- Ancho completoaspect-video
- Relación de aspecto 16:9rounded-xl
- Esquinas redondeadas grandesblock
,hidden
- Control de visualizacióndark:hidden
,dark:block
- Visibilidad en modo oscuro
style
.
CSS personalizado
MDX
.
Agregar style.css
style.css
para personalizar el estilo de la barra de navegación y el pie de página.
Uso de identificadores y selectores
Usa la herramienta Inspeccionar elemento para encontrar referencias a los elementos que quieres personalizar.
Identificadores
Identificadores
- APIPlaygroundInput:
api-playground-input
- AssistantEntry:
assistant-entry
- AssistantEntryMobile:
assistant-entry-mobile
- Banner:
banner
- 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
- 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
Selectores
Selectores
- 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
Las referencias y el estilo de los elementos comunes están sujetos a cambios a medida que la plataforma evolucione. Usa estilos personalizados con precaución.
JavaScript personalizado
<script>
con código JS en cada página.
Agregar JavaScript personalizado
.js
dentro del directorio de contenido de tu documentación se incluirá en cada página. Por ejemplo, puedes agregar el siguiente archivo ga.js
para habilitar Google Analytics en toda la documentación.
Úsalo con precaución para no introducir vulnerabilidades de seguridad.