# 输入框组文本

## 使用方法

放在 `InputGroup` 里面的一段前缀或后缀文字，也可以放图标。

把它塞进 `InputGroup` 的 `before` 或 `after` 插槽，就能在输入框两边显示单位、货币符号、协议名或者固定的域名。这段文字不能编辑，按 Tab 也跳不到它，所以不会挡住打字。

```vue
<script setup lang="ts">
import { InputGroup, InputGroupText } from '@astryx-vue/core/InputGroup'
import { TextInput } from '@astryx-vue/core/TextInput'
import { ref } from 'vue'

const price = ref('')
</script>

<template>
  <InputGroup label="价格">
    <template #before>
      <InputGroupText>$</InputGroupText>
    </template>
    <TextInput v-model="price" label="金额" is-label-hidden placeholder="0.00" />
    <template #after>
      <InputGroupText>USD</InputGroupText>
    </template>
  </InputGroup>
</template>
```

默认插槽里放文字。插槽接受任意标记，所以放图标也行；图标只当装饰，因为给读屏报名字的是整组的 `label`。

```ts
import { InputGroupText } from '@astryx-vue/core/InputGroup'
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `id` | `string` | — | 这个文本元素的 `id`。测试里要定位前缀或后缀，或者用 `aria-describedby` 指过来时会用到。 |

## 插槽

- `default`：要显示的文字或图标，原样放进文本元素里。

## 原生属性

这个组件渲染的是一个 `<span>`。没有声明成属性的东西会落到这个 span 上，所以 `class` 和 `style` 直接作用在前缀或后缀本身。