AiToolKeyValue
Пара «ключ — значение» для содержимого инструмента. Собрана из AiToolText, поэтому поддерживает mono и error.
Когда использовать
- Вывод полей результата инструмента (region, status, id).
- Строка в составе
AiToolObjectилиAiToolArray.
Анатомия
Variant (default line)
line— ключ слева, значение справа.column— значение под ключом.
Mono / Error
Наследуются из контекста AiToolDetails (внутри карточки — всегда mono, в состоянии error — красный) либо задаются пропом явно.
Установка
pnpm add @cloud-ru/ds-ai-toolimport { AiToolKeyValue } from '@cloud-ru/ds-ai-tool'Примеры использования
Раскладки
regionru-central1
descriptionПостоянный инстанс для прод-окружения
tsx
import { AiToolKeyValue } from '@cloud-ru/ds-ai-tool';
export function KeyValuePair() {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: 320 }}>
<AiToolKeyValue label='region' value='ru-central1' variant='line' />
<AiToolKeyValue label='description' value='Постоянный инстанс для прод-окружения' variant='column' />
</div>
);
}Props
Types
Props
AiToolKeyValueProps| 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-key-value | no | |
error | boolean | — | no | Состояние ошибки: ключ и значение красные. По умолчанию наследуется от `AiToolDetails`. |
label | ReactNode | — | no | Ключ (левая / верхняя часть пары). |
mono | boolean | — | no | Моноширинный режим ключа и значения. По умолчанию наследуется от `AiToolDetails`. |
value | ReactNode | — | no | Значение (правая / нижняя часть пары). |
variant | "column" | "line" | line | no | Раскладка пары: `line` — ключ и значение в строку, `column` — стопкой. |