AiToolDetailsLabel
Заголовок-чип части блока деталей — обычно «Запрос» или «Ответ». Опциональная кнопка-«глаз» (showSecret + onToggleSecret) переключает показ секретных значений в теле блока.
Когда использовать
- Подзаголовок секции внутри
AiToolDetails. - Переключатель показа секретов (токены, пароли) в результате инструмента.
Анатомия
State (default default)
default— нейтральный фон и текст.error— красный.
Secret
showSecret добавляет кнопку-«глаз». Видимое состояние — secretRevealed (источник истины — родитель): зачёркнутый глаз — секреты скрыты, открытый — показаны.
Установка
pnpm add @cloud-ru/ds-ai-toolimport { AiToolDetailsLabel } from '@cloud-ru/ds-ai-tool'Примеры использования
Переключение секрета
Ответ
tsx
import { AiToolDetailsLabel } from '@cloud-ru/ds-ai-tool';
import { useState } from 'react';
export function DetailsLabelSecret() {
const [revealed, setRevealed] = useState(false);
return (
<div style={{ width: 280 }}>
<AiToolDetailsLabel
label='Ответ'
showSecret
secretRevealed={revealed}
onToggleSecret={() => setRevealed(prev => !prev)}
/>
</div>
);
}Props
Types
Props
AiToolDetailsLabelProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
children | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined | — | no | |
className | string | — | no | Доп. класс корня. |
data-test-id | string | ai-tool-details-label | no | |
label | ReactNode | — | no | Текст лейбла (заголовок блока деталей). |
onToggleSecret | ((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) | — | no | Клик по кнопке-«глаз». Не вызывается, если `showSecret` не задан. |
secretRevealed | boolean | false | no | Секрет раскрыт: глаз открыт (секреты видны). Зачёркнутый глаз — секреты скрыты. Источник истины — родитель. |
showSecret | boolean | false | no | Показать кнопку-«глаз» для раскрытия секретного значения. |
state | "default" | "error" | default | no | Состояние: `default` — нейтральный, `error` — красный. |