在 Ant Design 项目中使用 Material Design 风格输入框

1,689 阅读1分钟

什么是 Material Design 风格输入框?

就是下面这个样子,点击输入框,提示语会以动画飘到左上角去:

它在 Material Design 中叫 Floating Label,即考虑了美观,又考虑了提示的明确性。

Material Design 官网:material.io/components/…

什么是 Ant Plus?

Ant Plus 是 Ant Design 表单系统的简化版,可以让你以最符合 html 直觉的方式来搭建表单。

因为在 Ant Design 之上渐进增强,不进行任何侵入,所以包体积非常小,压缩后只有 4.89k。

GitHub 地址:github.com/nanxiaobei/…

如何拥有 Material Design 风格输入框?

现在,使用 Ant Plus v4.2 的 Input 组件,添加 floatingLabel="提示文字" 属性,即可拥有 Ant Design + Material Design 风格输入框:

在线体验:nanxiaobei.github.io/ant-plus/in…

What's new in 4.2?

同时,4.2 版本还为 Form 组件增加了用于布局的 cols 属性。

使用 antd Form 需要这样写 labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}

使用 antx Form 只需这样写 cols={[8, 16]},一切都变的极其简便。

查看 4.2 更新内容:nanxiaobei.github.io/ant-plus/

欢迎尝试 Ant Plus ~ github.com/nanxiaobei/…