Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions es/customize/custom-scripts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<block>` o `<block>-<part>`, 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.
Expand Down
34 changes: 34 additions & 0 deletions fr/customize/custom-scripts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<block>` ou `<block>-<part>`, 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.
Expand Down
34 changes: 34 additions & 0 deletions zh/customize/custom-scripts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -429,6 +429,40 @@ CSS 定位钩子使用不同的语法:
- `[data-badge][data-color="blue"]`—按颜色筛选的 badge。
- `[data-badge][data-size="sm"]`—按尺寸筛选的 badge。

搜索部分 (`data-search-item`):

使用 `data-search-item` 通过稳定的选择器为搜索栏和搜索对话框设置样式,即使内部类名发生变化,这些选择器也会保持不变。值遵循 `<block>` 或 `<block>-<part>` 模式,状态则使用单独的属性。

- `[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 样式。
Expand Down
Loading