antd form 星号对齐
时间: 2024-08-27 21:02:11 浏览: 99
antd form表单数据回显操作
5星 · 资源好评率100%
antd 的 Form 组件提供了一个便捷的方式来管理表单输入,其中包括了对输入字段格式化的选项。如果你想让某些文本框的星号(*)对齐右边缘,可以使用 `Form.Item` 的 `rules` 属性,并结合 `message` 中的占位符功能。
例如,你可以这样做:
```jsx
import { Form, Input } from 'antd';
const FormItem = Form.Item;
FormItem({
rules: [
{
required: true,
message: '请输入必填内容 *',
trigger: 'blur', // 当输入失去焦点时验证
placeholder: '* 请输入内容...',
hasFeedback: true, // 显示反馈提示
wrapperCol: {
span: 6,
offset: 6, // 右对齐,通过设置 offset 来达到星号向右的效果
},
},
],
label: '邮箱地址',
colon: false, // 关闭标签后的冒号
})(<Input type="email" />);
```
在这个例子中,`wrapperCol` 配置使得输入框及其右侧的星号相对容器右对齐。`colon` 设置为 `false` 是为了让星号代替冒号作为标签的一部分。
阅读全文