diff --git a/es/customize/custom-scripts.mdx b/es/customize/custom-scripts.mdx index f0e899232..2fdbfb2af 100644 --- a/es/customize/custom-scripts.mdx +++ b/es/customize/custom-scripts.mdx @@ -429,6 +429,40 @@ Pueden aparecer múltiples instancias de estos hooks en una página. La lista in - `[data-badge][data-color="blue"]`—Badge filtrado por color. - `[data-badge][data-size="sm"]`—Badge filtrado por tamaño. + Partes de la búsqueda (`data-search-item`): + + Usa `data-search-item` para aplicar estilos a la barra de búsqueda y al cuadro de diálogo de búsqueda con selectores estables que se mantienen aunque cambien los nombres de clase internos. Los valores siguen el patrón `` o `-`, y los estados usan atributos independientes. + + - `[data-search-item="trigger"]`—Barra de búsqueda en la barra de navegación que abre el cuadro de diálogo de búsqueda. Contiene `trigger-icon`, `trigger-label` y `trigger-hint` (el atajo de teclado). + - `[data-search-item="backdrop"]`—Capa superpuesta detrás del cuadro de diálogo de búsqueda. + - `[data-search-item="dialog"]`—Contenedor del cuadro de diálogo de búsqueda. + - `[data-search-item="header"]`—Área de entrada de búsqueda. Contiene `header-icon`, `input`, `header-button` (el botón que envía la consulta al asistente de IA) y `header-hint`. Tiene `data-disabled` cuando la búsqueda no está disponible, por ejemplo en vistas previas locales antes de iniciar sesión en la CLI. + - `[data-search-item="filter-list"]`—Fila de filtros de búsqueda. Cada filtro tiene un `filter-trigger` con `filter-label`, además de una flecha `filter-indicator` o un `filter-button` que borra la selección. El menú abierto es `filter-content`, con entradas `filter-item` y `filter-item-label`. + - `[data-search-item="list"]`—Lista de resultados. Tiene `data-loading` mientras se cargan los resultados. La barra de desplazamiento es `list-scrollbar`. + - `[data-search-item="group"]`—Grupo de resultados. `data-variant` es `recent`, `results` o `ask-ai`. El encabezado del grupo es `group-title`. + - `[data-search-item="item"]`—Resultado individual. Contiene `item-icon`, `item-title`, `item-badge` (el método HTTP en los resultados de API), `item-breadcrumbs`, `item-breadcrumb`, `item-breadcrumb-separator` y `item-description`. La fila que pregunta al asistente de IA tiene `data-variant="assistant"`. + - `[data-search-item="footer"]`—Indicaciones de teclado en la parte inferior del cuadro de diálogo. Contiene `footer-hint` y `footer-icon`. + + Atributos de estado y variante en las partes de la búsqueda: + + - `[data-search-item="item"][data-highlighted]`—Resultado resaltado actualmente con el teclado o el puntero. + - `[data-search-item="item-icon"][data-variant="section"]`—Icono del resultado según su tipo. Los valores son `page`, `section` y `api-playground`. + - `[data-search-item="item-badge"][data-method="post"]`—Resultado de API según su método HTTP, en minúsculas. + - `[data-search-item="filter-trigger"][data-variant="version"]`—Filtro según su tipo. Los valores son `product` y `version`. + - `[data-search-item="filter-trigger"][data-open]`—Filtro cuyo menú está abierto. `filter-indicator` también tiene `data-open`. + - `[data-search-item="filter-trigger"][data-active]`—Filtro con un valor seleccionado. + - `[data-search-item="filter-item"][data-selected]`—Opción seleccionada en un menú de filtro. + + ```css style.css + [data-search-item="dialog"] { + border-radius: 0.5rem; + } + + [data-search-item="item"][data-highlighted] [data-search-item="item-title"] { + color: #0D9373; + } + ``` + Ruta actual (`data-current-path`): Usa `data-current-path` para aplicar CSS personalizado en páginas o subrutas específicas. diff --git a/fr/customize/custom-scripts.mdx b/fr/customize/custom-scripts.mdx index a3a92f7c0..fd99d4405 100644 --- a/fr/customize/custom-scripts.mdx +++ b/fr/customize/custom-scripts.mdx @@ -429,6 +429,40 @@ Plusieurs instances de ces hooks peuvent apparaître sur une page. La liste donn - `[data-badge][data-color="blue"]`—Badge filtré par couleur. - `[data-badge][data-size="sm"]`—Badge filtré par taille. + Parties de la recherche (`data-search-item`) : + + Utilisez `data-search-item` pour styliser la barre de recherche et la boîte de dialogue de recherche avec des sélecteurs stables qui persistent même si les noms de classes internes changent. Les valeurs suivent le modèle `` ou `-`, et les états utilisent des attributs distincts. + + - `[data-search-item="trigger"]`—Barre de recherche dans la barre de navigation qui ouvre la boîte de dialogue de recherche. Contient `trigger-icon`, `trigger-label` et `trigger-hint` (le raccourci clavier). + - `[data-search-item="backdrop"]`—Superposition derrière la boîte de dialogue de recherche. + - `[data-search-item="dialog"]`—Conteneur de la boîte de dialogue de recherche. + - `[data-search-item="header"]`—Zone de saisie de la recherche. Contient `header-icon`, `input`, `header-button` (le bouton qui envoie la requête à l'assistant IA) et `header-hint`. Possède `data-disabled` lorsque la recherche n'est pas disponible, par exemple dans les aperçus locaux avant de vous connecter à la CLI. + - `[data-search-item="filter-list"]`—Rangée de filtres de recherche. Chaque filtre possède un `filter-trigger` avec `filter-label`, ainsi qu'une flèche `filter-indicator` ou un `filter-button` qui efface la sélection. Le menu ouvert est `filter-content`, avec des entrées `filter-item` et `filter-item-label`. + - `[data-search-item="list"]`—Liste des résultats. Possède `data-loading` pendant le chargement des résultats. La barre de défilement est `list-scrollbar`. + - `[data-search-item="group"]`—Groupe de résultats. `data-variant` vaut `recent`, `results` ou `ask-ai`. Le titre du groupe est `group-title`. + - `[data-search-item="item"]`—Résultat individuel. Contient `item-icon`, `item-title`, `item-badge` (la méthode HTTP sur les résultats d'API), `item-breadcrumbs`, `item-breadcrumb`, `item-breadcrumb-separator` et `item-description`. La ligne qui interroge l'assistant IA possède `data-variant="assistant"`. + - `[data-search-item="footer"]`—Indications clavier en bas de la boîte de dialogue. Contient `footer-hint` et `footer-icon`. + + Attributs d'état et de variante sur les parties de la recherche : + + - `[data-search-item="item"][data-highlighted]`—Résultat actuellement mis en surbrillance avec le clavier ou le pointeur. + - `[data-search-item="item-icon"][data-variant="section"]`—Icône du résultat selon son type. Les valeurs sont `page`, `section` et `api-playground`. + - `[data-search-item="item-badge"][data-method="post"]`—Résultat d'API selon sa méthode HTTP, en minuscules. + - `[data-search-item="filter-trigger"][data-variant="version"]`—Filtre selon son type. Les valeurs sont `product` et `version`. + - `[data-search-item="filter-trigger"][data-open]`—Filtre dont le menu est ouvert. `filter-indicator` possède également `data-open`. + - `[data-search-item="filter-trigger"][data-active]`—Filtre avec une valeur sélectionnée. + - `[data-search-item="filter-item"][data-selected]`—Option sélectionnée dans un menu de filtre. + + ```css style.css + [data-search-item="dialog"] { + border-radius: 0.5rem; + } + + [data-search-item="item"][data-highlighted] [data-search-item="item-title"] { + color: #0D9373; + } + ``` + Chemin actuel (`data-current-path`) : Utilisez `data-current-path` pour appliquer du CSS personnalisé sur des pages ou des sous-chemins spécifiques. diff --git a/zh/customize/custom-scripts.mdx b/zh/customize/custom-scripts.mdx index e31b39b55..c31d43793 100644 --- a/zh/customize/custom-scripts.mdx +++ b/zh/customize/custom-scripts.mdx @@ -429,6 +429,40 @@ CSS 定位钩子使用不同的语法: - `[data-badge][data-color="blue"]`—按颜色筛选的 badge。 - `[data-badge][data-size="sm"]`—按尺寸筛选的 badge。 + 搜索部分 (`data-search-item`): + + 使用 `data-search-item` 通过稳定的选择器为搜索栏和搜索对话框设置样式,即使内部类名发生变化,这些选择器也会保持不变。值遵循 `` 或 `-` 模式,状态则使用单独的属性。 + + - `[data-search-item="trigger"]`—导航栏中用于打开搜索对话框的搜索栏。包含 `trigger-icon`、`trigger-label` 和 `trigger-hint`(键盘快捷键)。 + - `[data-search-item="backdrop"]`—搜索对话框后面的遮罩层。 + - `[data-search-item="dialog"]`—搜索对话框容器。 + - `[data-search-item="header"]`—搜索输入区域。包含 `header-icon`、`input`、`header-button`(将查询发送给 AI 助手的按钮)和 `header-hint`。当搜索不可用时(例如在登录 CLI 之前的本地预览中),带有 `data-disabled`。 + - `[data-search-item="filter-list"]`—搜索筛选器所在的行。每个筛选器都有一个带 `filter-label` 的 `filter-trigger`,以及一个 `filter-indicator` 箭头或一个用于清除选择的 `filter-button`。打开的菜单为 `filter-content`,其中包含 `filter-item` 和 `filter-item-label` 条目。 + - `[data-search-item="list"]`—结果列表。结果加载期间带有 `data-loading`。滚动条为 `list-scrollbar`。 + - `[data-search-item="group"]`—结果分组。`data-variant` 为 `recent`、`results` 或 `ask-ai`。分组标题为 `group-title`。 + - `[data-search-item="item"]`—单个结果。包含 `item-icon`、`item-title`、`item-badge`(API 结果上的 HTTP 方法)、`item-breadcrumbs`、`item-breadcrumb`、`item-breadcrumb-separator` 和 `item-description`。向 AI 助手提问的那一行带有 `data-variant="assistant"`。 + - `[data-search-item="footer"]`—对话框底部的键盘提示。包含 `footer-hint` 和 `footer-icon`。 + + 搜索部分的状态和变体属性: + + - `[data-search-item="item"][data-highlighted]`—当前通过键盘或指针高亮的结果。 + - `[data-search-item="item-icon"][data-variant="section"]`—按类型区分的结果图标。值为 `page`、`section` 和 `api-playground`。 + - `[data-search-item="item-badge"][data-method="post"]`—按 HTTP 方法区分的 API 结果,使用小写。 + - `[data-search-item="filter-trigger"][data-variant="version"]`—按类型区分的筛选器。值为 `product` 和 `version`。 + - `[data-search-item="filter-trigger"][data-open]`—菜单处于打开状态的筛选器。`filter-indicator` 也带有 `data-open`。 + - `[data-search-item="filter-trigger"][data-active]`—已选择值的筛选器。 + - `[data-search-item="filter-item"][data-selected]`—筛选器菜单中已选中的选项。 + + ```css style.css + [data-search-item="dialog"] { + border-radius: 0.5rem; + } + + [data-search-item="item"][data-highlighted] [data-search-item="item-title"] { + color: #0D9373; + } + ``` + 当前路径 (`data-current-path`): 使用 `data-current-path` 在特定页面或子路径上应用自定义 CSS 样式。