# 字段状态

## 使用方法

`FieldStatus` 就是 `Field` 里面那条状态消息。自定义控件需要同样的错误、警告或成功样式时，单独引入它。

```vue
<script setup lang="ts">
import { FieldStatus } from '@astryx-vue/core/FieldStatus'
</script>

<template>
  <FieldStatus type="error" message="此字段为必填" variant="detached" />
</template>
```

`attached` 贴在带边框控件的下方。`detached` 是独立的一块，单独使用时用这个。错误会立刻播报，警告和成功则较缓和。它没有另一套实现，就是字段里的那个组件。

### 结构

- **消息盒**: 装着校验反馈的着色容器。
- **分离图标**: 只有分离变体才显示的前导状态符号。
- **消息文字**: 描述校验状态的文字。

## 最佳实践

| 指引 | 实践 |
| --- | --- |
| 推荐 | 消息没有贴在输入框外壳上时，用 `detached`。 |
| 避免 | 再做一套状态样式。字段已经在用这一套。 |

## 示例

### 基本用法

独立的错误消息和成功消息。

```vue
<script setup lang="ts">
import { FieldStatus } from '@astryx-vue/core/FieldStatus'
import { VStack } from '@astryx-vue/core/Stack'
</script>

<template>
  <VStack :gap="4">
    <FieldStatus type="error" message="This field is required" variant="detached" />
    <FieldStatus type="success" message="Your changes have been saved" variant="detached" />
  </VStack>
</template>
```

## FieldStatus 属性

| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `type` | `'error' \| 'warning' \| 'success'` | — | 必填。决定图标和颜色。 |
| `message` | `string` | — | 必填。文案。空字符串不显示可见内容。 |
| `variant` | `'attached' \| 'detached'` | `'attached'` | attached 叠在上方控件下面。detached 是独立的一块。 |
| `isVisuallyHidden` | `boolean` | `false` | 保留消息，但不显示色块。 |

类型 `FieldStatusProps` 和 `FieldStatusInput` 从 `@astryx-vue/core/Field` 导出。