diff --git a/es/customize/custom-scripts.mdx b/es/customize/custom-scripts.mdx index ddf2f9587..774929a6b 100644 --- a/es/customize/custom-scripts.mdx +++ b/es/customize/custom-scripts.mdx @@ -1,6 +1,6 @@ --- title: "Scripts personalizados" -description: "Agrega JavaScript y CSS personalizados para adaptar por completo el aspecto y la experiencia de tu documentación." +description: "Agrega JavaScript y CSS personalizados a tu sitio de documentación para analíticas, widgets, personalización de estilos e integraciones con terceros." keywords: ["CSS", "JavaScript", "Tailwind CSS", "personalización de estilo"] --- @@ -28,16 +28,13 @@ Los valores arbitrarios de Tailwind CSS no están admitidos. Para valores person Usar la prop `style` puede causar un desplazamiento del diseño al cargar la página, especialmente en páginas en modo personalizado. En su lugar, usa clases de Tailwind CSS o archivos CSS personalizados para evitar desplazamientos o parpadeos. -
## Añadir CSS personalizado
Añade archivos CSS a tu repositorio y los nombres de clase que definas en ellos se aplicarán y estarán disponibles en todos tus archivos MDX. -
- ### Agregar `style.css` -
+Las referencias y el estilo de los elementos comunes están sujetos a cambios. Usa estilos personalizados con precaución, ya que pueden producirse cambios incompatibles en futuras actualizaciones. Por ejemplo, puedes agregar el siguiente archivo `style.css` para personalizar los estilos de la barra de navegación y el pie de página. @@ -52,183 +49,307 @@ footer { } ``` +Mintlify expone dos tipos de hooks CSS para segmentación: -
- ### Uso de identificadores y selectores -
- -Mintlify cuenta con un conjunto de identificadores y selectores comunes para ayudarte a etiquetar elementos importantes de la interfaz. +- **Selectores de ID**: elementos únicos a nivel de página que se apuntan con `#value { }` en CSS +- **Selectores de elemento**: elementos de componente y diseño que se apuntan con `value { }` en CSS (sin prefijo `#` o `.`) Usa Inspeccionar elemento para encontrar referencias a los elementos que quieres personalizar. +
+ ### Selectores de ID +
+ +Cada ID aparece una vez por página. Úsalos como `#value` en CSS. Por ejemplo, `#navbar { background: red; }`. + - - * 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` - - **Atributos de datos** + + - `#body-content` — Contenedor exterior del cuerpo de la página. + - `#content-area` — Área de contenido principal, excluyendo la barra lateral y la tabla de contenidos. + - `#content` — Elemento de contenido interno dentro del área de contenido. + - `#header` — Elemento de encabezado a nivel de página. + - `#banner` — Banner de anuncios que se muestra sobre la barra de navegación. + - `#footer` — Pie de página. También se puede apuntar como selector de elemento: `footer`. + - `#page-title` — El encabezado `

` en la parte superior de cada página. + - `#pagination` — Barra de paginación inferior con enlaces a la página anterior y siguiente. + - `#panel` — Panel flotante superpuesto. También se puede apuntar como selector de elemento: `panel`. + - `#background-color` — Elemento de color de fondo de la página. + + + - `#navbar` — Barra de navegación superior. + - `#topbar-cta-button` — Botón de llamada a la acción en la barra superior. + - `#mobile-nav` — Superposición de navegación móvil. + - `#mobile-nav-content` — Área de contenido dentro de la superposición de navegación móvil. + + + - `#sidebar` — Panel de navegación de la barra lateral. + - `#sidebar-content` — Área de contenido con desplazamiento dentro de la barra lateral. + + + - `#table-of-contents` — Panel de tabla de contenidos en el lado derecho de la página. + - `#table-of-contents-layout` — Contenedor de diseño para la tabla de contenidos. + - `#table-of-contents-content` — Contenido con desplazamiento dentro de la tabla de contenidos. + + + - `#search-bar-entry` — Disparador de la barra de búsqueda en la barra superior. + - `#search-bar-entry-mobile` — Disparador de la barra de búsqueda en móvil. + - `#search-input` — Campo de entrada de texto dentro del modal de búsqueda. + + + - `#assistant-entry` — Botón del asistente IA en la barra superior. + - `#assistant-entry-mobile` — Botón del asistente IA en móvil. + - `#chat-assistant-sheet` — Panel del chat del asistente IA. + - `#chat-assistant-textarea` — Entrada de texto dentro del panel del asistente IA. + + + - `#request-example` — Panel de ejemplo de solicitud en el playground de API. + - `#response-example` — Panel de ejemplo de respuesta en el playground de API. + - `#api-playground-input` — Sección de entrada del playground de API. + - `#endpoints-menu-trigger` — Botón que abre el desplegable del selector de endpoints. + + + - `#ask-ai-code-block-button` — Botón "Ask AI" que aparece en los bloques de código. + - `#code-snippet-feedback-button` — Botón de retroalimentación en los fragmentos de código. + - `#code-snippet-feedback-textarea` — Área de texto dentro del formulario de retroalimentación de fragmentos de código. + + + - `#feedback-thumbs-up` — Botón de pulgar arriba en la parte inferior de la página. + - `#feedback-thumbs-down` — Botón de pulgar abajo en la parte inferior de la página. + - `#feedback-form` — Formulario de retroalimentación mostrado después de una respuesta negativa. + - `#feedback-form-input` — Campo de texto dentro del formulario de retroalimentación. + - `#feedback-form-cancel` — Botón de cancelar dentro del formulario de retroalimentación. + - `#feedback-form-submit` — Botón de enviar dentro del formulario de retroalimentación. + + + - `#page-context-menu` — Menú de opciones contextuales para la página actual. + - `#page-context-menu-button` — Botón que abre el menú contextual de la página. + + + - `#localization-select-trigger` — Botón que abre el selector de idioma. + - `#localization-select-content` — Contenido del desplegable del selector de idioma. + - `#localization-select-item` — Opción individual de idioma dentro del selector. + + + - `#changelog-filters` — Controles de filtro en una página de registro de cambios. + - `#changelog-filters-content` — Área de contenido dentro del panel de filtros del registro de cambios. + + + - `#multi-view-dropdown` — Desplegable para cambiar entre vistas de documentación. + + + - `#text-selection-tooltip` — Tooltip que aparece al seleccionar texto en la página. + - `#text-selection-tooltip-button` — Botón de acción dentro del tooltip de selección de texto. + + + +
+ ### Selectores de elemento +
+Pueden aparecer múltiples instancias de estos elementos en una página. Úsalos como `value` en CSS. Por ejemplo, `accordion { border: 1px solid red; }`. + + + + - `accordion` — Elemento de acordeón desplegable. + - `accordion-group` — Contenedor que agrupa múltiples acordeones. + - `callout` — Bloque de llamada de atención (Note, Warning, Tip, etc.). + - `card` — Elemento de tarjeta individual. + - `card-group` — Contenedor que agrupa múltiples tarjetas. Obsoleto a favor de `columns`, pero conservado por compatibilidad. + - `columns` — Contenedor de diseño multicolumna. + - `code-block` — Elemento de bloque de código. + - `code-block-icon` — Icono mostrado en el encabezado de un bloque de código. + - `code-group` — Grupo con pestañas de bloques de código. + - `expandable` — Elemento de sección expandible. + - `frame` — Contenedor de marco para imágenes o contenido incrustado. + - `icon` — Elemento de icono en línea. + - `mermaid` — Contenedor de diagrama Mermaid. + - `step` — Paso individual dentro de una secuencia de pasos. + - `steps` — Contenedor de pasos numerados. + - `tab-icon` — Icono mostrado dentro de una pestaña. + - `tabs` — Contenedor de contenido con pestañas. + - `tile` — Elemento de componente tile. + - `tooltip` — Elemento de tooltip. + - `update` — Entrada de actualización del registro de cambios. + + + - `mdx-content` — Área de contenido MDX renderizado. + - `panel` — Componente de panel flotante. También se puede apuntar como selector de ID: `#panel`. + - `eyebrow` — Pequeña etiqueta que se muestra sobre el título de la página. + - `link` — Elemento de enlace anchor. + - `breadcrumb-list` — Lista de navegación por migas de pan. + - `breadcrumb-item` — Elemento individual de miga de pan. + + + - `nav-logo` — Logo en la barra de navegación. + - `navbar-link` — Elemento de enlace dentro de la barra de navegación. + - `nav-anchors` — Contenedor de enlaces de anclaje en la barra superior. + - `nav-anchor` — Enlace de anclaje individual en la barra superior. + - `nav-tabs` — Barra de pestañas en la navegación superior. + - `nav-tabs-item` — Elemento de pestaña individual en la barra de pestañas de la navegación superior. + - `mobile-nav-tabs-item` — Elemento de pestaña en la barra de pestañas de la navegación móvil. + - `topbar-right-container` — Sección derecha de la barra superior. + - `nav-tag-pill` — Etiqueta tipo píldora en la navegación. + - `nav-tag-pill-text` — Texto dentro de una etiqueta tipo píldora de navegación. + + + - `nav-dropdown-trigger` — Botón que abre un desplegable de navegación. + - `nav-dropdown-content` — Contenedor de contenido de un desplegable de navegación. + - `nav-dropdown-item` — Elemento individual dentro de un desplegable de navegación. + - `nav-dropdown-item-text-container` — Contenedor de texto dentro de un elemento del desplegable. + - `nav-dropdown-item-title` — Texto del título dentro de un elemento del desplegable. + - `nav-dropdown-item-description` — Texto de descripción dentro de un elemento del desplegable. + - `nav-dropdown-item-icon` — Icono dentro de un elemento del desplegable. + + + - `nav-dropdown-products-selector-trigger` — Botón que abre el desplegable del selector de productos. + - `nav-dropdown-products-selector-content` — Contenedor de contenido del selector de productos. + - `nav-dropdown-products-selector-item` — Producto individual en el selector. + - `nav-dropdown-products-selector-item-title` — Título de un elemento del selector de productos. + - `nav-dropdown-products-selector-item-description` — Descripción de un elemento del selector de productos. + - `nav-dropdown-products-selector-item-icon` — Icono de un elemento del selector de productos. + + + - `sidebar-group` — Grupo de enlaces relacionados en la barra lateral. + - `sidebar-group-icon` — Icono de un grupo de la barra lateral. + - `sidebar-group-header` — Etiqueta de encabezado de un grupo de la barra lateral. + - `sidebar-title` — Título de nivel superior en la barra lateral. + - `sidebar-nav-group-divider` — Divisor entre grupos de navegación de la barra lateral. + + + - `toc` — Contenedor de la tabla de contenidos. + - `toc-item` — Entrada individual de encabezado en la tabla de contenidos. + + + - `footer` — Pie de página estándar. También se puede apuntar como selector de ID: `#footer`. + - `advanced-footer` — Pie de página extendido con columnas o contenido adicional. + + + - `pagination-prev` — Enlace a la página anterior en la barra de paginación. + - `pagination-next` — Enlace a la página siguiente en la barra de paginación. + - `pagination-title` — Título de página que se muestra en la barra de paginación. + + + - `api-section` — Sección completa para un endpoint de API. + - `api-section-heading` — Área de encabezado de una sección de endpoint de API. + - `api-section-heading-title` — Título dentro del encabezado de una sección de endpoint de API. + - `api-section-heading-subtitle` — Subtítulo dentro del encabezado de una sección de endpoint de API. + - `field` — Campo de parámetro o propiedad en la referencia de API. + - `option-dropdown` — Desplegable para seleccionar entre opciones de API. + - `tryit-button` — Botón "Try it" que abre el playground de API. + - `method-pill` — Insignia de método HTTP (GET, POST, etc.) en un endpoint. + - `method-nav-pill` — Insignia de método HTTP que se muestra en la navegación de la barra lateral. + - `prompt` — Componente de prompt en la referencia de API. + + + - `chat-assistant-sheet` — Contenedor del panel del asistente IA. + - `chat-assistant-sheet-header` — Encabezado del panel del asistente IA. + - `chat-assistant-sheet-content` — Área de contenido del panel del asistente IA. + - `chat-assistant-input` — Entrada de texto dentro del panel del asistente IA. + - `chat-assistant-floating-input` — Variante de entrada flotante del asistente IA. + - `chat-assistant-send-button` — Botón de enviar en el panel del asistente IA. + - `chat-assistant-disclaimer-text` — Texto de descargo de responsabilidad en el panel del asistente IA. + - `chat-assistant-payload-item` — Mensaje o resultado individual en el panel del asistente. + - `starter-question-text` — Pregunta sugerida de inicio mostrada en un panel de asistente vacío. + + + - `feedback-toolbar` — Barra de herramientas que contiene controles de retroalimentación de la página. + - `contextual-feedback-container` — Contenedor para retroalimentación contextual en línea. + - `contextual-feedback-form` — Formulario de retroalimentación contextual en línea. + - `contextual-feedback-form-title` — Título del formulario de retroalimentación contextual. + - `contextual-feedback-input` — Campo de texto dentro del formulario de retroalimentación contextual. + - `contextual-feedback-button` — Botón de acción dentro del formulario de retroalimentación contextual. + - `contextual-feedback-form-submit-button` — Botón de envío del formulario de retroalimentación contextual. + + + - `code-snippet-feedback-popover-content` — Contenido del popover para retroalimentación de fragmentos de código. + - `code-snippet-feedback-form` — Formulario de retroalimentación para un fragmento de código. + - `code-snippet-feedback-textarea` — Área de texto dentro del formulario de retroalimentación del fragmento de código. + - `code-snippet-feedback-form-title` — Título del formulario de retroalimentación del fragmento de código. + - `code-snippet-feedback-form-description` — Texto descriptivo en el formulario de retroalimentación del fragmento de código. + - `code-snippet-feedback-form-submit-button` — Botón de envío del formulario de retroalimentación del fragmento de código. + + + - `login-link` — Enlace que inicia el flujo de inicio de sesión. + - `logout-link` — Enlace que inicia el flujo de cierre de sesión. + + + - `multi-view-item` — Opción de vista individual en un conmutador de multi-vista. + - `multi-view-dropdown` — Desplegable para seleccionar entre múltiples vistas. + - `multi-view-dropdown-trigger` — Botón que abre el desplegable de multi-vista. + - `multi-view-dropdown-content` — Área de contenido del desplegable de multi-vista. + - `multi-view-dropdown-item` — Elemento individual dentro del desplegable de multi-vista. + + + - `directory` — Contenedor raíz para una página de directorio. + - `directory-group` — Grupo de páginas relacionadas dentro de un directorio. + - `directory-page` — Entrada de página individual en un directorio. + - `directory-card` — Entrada de página tipo tarjeta en un directorio. + + + - `not-found-container` — Contenedor raíz de la página 404. + - `not-found-status-code` — Visualización del código de estado en la página 404. + - `not-found-title` — Encabezado del título en la página 404. + - `not-found-description` — Texto descriptivo en la página 404. + - `not-found-recommended-pages-list` — Lista de páginas recomendadas mostradas en la página 404. + - `not-found-recommended-page-link` — Enlace individual en la lista de páginas recomendadas. + + + - `color` — Elemento de muestra de color. + - `color-row` — Fila que agrupa muestras de color. + - `color-item` — Elemento de color individual dentro de una fila de colores. + + + - `tree` — Contenedor de árbol de archivos. + - `tree-folder` — Entrada de carpeta dentro de un árbol de archivos. + - `tree-file` — Entrada de archivo dentro de un árbol de archivos. + + Algunos elementos exponen atributos de datos que puedes usar como selectores CSS. Estado activo (`data-active`): - - Elemento activo en un desplegable de navegación: `nav-dropdown-item[data-active]` - - Pestaña activa en la navegación móvil: `mobile-nav-tabs-item[data-active]` - - Grupo activo de la barra lateral: `sidebar-group[data-active]` - - Enlace activo de la barra lateral: `#sidebar-content li[data-active]` - - Pestaña activa de la navegación superior: `.nav-tabs-item[data-active]` — solo se aplica a pestañas simples; las pestañas con menús desplegables no reciben `data-active`. Nota el `.` inicial: esto apunta a una clase en un elemento `` estándar, a diferencia de la mayoría de los otros componentes que usan nombres de elementos personalizados. - - Elemento activo de la tabla de contenidos: `toc-item[data-active]` - - Elemento más profundo activo de la tabla de contenidos: `toc-item[data-active-deepest]` — solo presente en el encabezado exacto actualmente visible, a diferencia de `data-active` que también se establece en sus encabezados padres. + - `nav-dropdown-item[data-active]` — Elemento activo en un desplegable de navegación. + - `mobile-nav-tabs-item[data-active]` — Pestaña activa en la navegación móvil. + - `sidebar-group[data-active]` — Grupo activo de la barra lateral. + - `#sidebar-content li[data-active]` — Enlace activo de la barra lateral. + - `.nav-tabs-item[data-active]` — Pestaña activa de la navegación superior. Solo se aplica a pestañas simples; las pestañas con menús desplegables no reciben `data-active`. Nota el `.` inicial: esto apunta a una clase en un elemento `` estándar, a diferencia de la mayoría de los otros componentes que usan nombres de elementos personalizados. + - `toc-item[data-active]` — Elemento activo de la tabla de contenidos. + - `toc-item[data-active-deepest]` — Elemento más profundo activo de la tabla de contenidos. Solo presente en el encabezado exacto actualmente visible, a diferencia de `data-active` que también se establece en sus encabezados padres. Nombre de componente (`data-component-name`): Usa `data-component-name` para apuntar a componentes de interfaz específicos con un selector estable que persiste si los nombres de clases internos cambian. - - Contenedor de diagrama Mermaid: `[data-component-name="mermaid-container"]` — incluye la superposición de controles de zoom - - Controles de zoom y desplazamiento de Mermaid: `[data-component-name="mermaid-controls-wrapper"]` - - Botón principal del encabezado: `[data-component-name="primary-header-button"]` — solo en el tema Sequoia - - Interruptor de tema: `[data-component-name="theme-toggle"]` + - `[data-component-name="mermaid-container"]` — Contenedor de diagrama Mermaid, incluyendo la superposición de controles de zoom. + - `[data-component-name="mermaid-controls-wrapper"]` — Controles de zoom y desplazamiento de Mermaid. + - `[data-component-name="primary-header-button"]` — Botón principal del encabezado. Solo en el tema Sequoia. + - `[data-component-name="theme-toggle"]` — Interruptor de tema. Parte de componente (`data-component-part`): Usa `data-component-part` para apuntar a sub-elementos dentro de un componente. - - Botón de contacto de soporte: `[data-component-part="contact-support-button"]` — el wrapper `` alrededor del enlace de contacto de soporte en el panel del asistente - - Icono de contacto de soporte: `[data-component-part="contact-support-icon"]` — el `` que envuelve el icono - - Texto de contacto de soporte: `[data-component-part="contact-support-text"]` — el elemento `

` que contiene la etiqueta + - `[data-component-part="contact-support-button"]` — El wrapper `` alrededor del enlace de contacto de soporte en el panel del asistente. + - `[data-component-part="contact-support-icon"]` — El `` que envuelve el icono. + - `[data-component-part="contact-support-text"]` — El elemento `

` que contiene la etiqueta. Atributos de Badge: - - Badge: `[data-badge]` - - Badge por color: `[data-badge][data-color="blue"]` - - Badge por tamaño: `[data-badge][data-size="sm"]` - + - `[data-badge]` — Cualquier elemento de badge. + - `[data-badge][data-color="blue"]` — Badge filtrado por color. + - `[data-badge][data-size="sm"]` — Badge filtrado por tamaño. - - Las referencias y el estilo de los elementos comunes pueden cambiar a medida que la plataforma evoluciona. Utiliza estilos personalizados con precaución. - -

El JavaScript personalizado te permite agregar código ejecutable a nivel global. Es equivalente a insertar una etiqueta `