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

什么是 Material Design 风格输入框？

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

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

Material Design 官网：https://material.io/components/text-fields

什么是 Ant Plus？

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

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

GitHub 地址：https://github.com/nanxiaobei/ant-plus

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

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

在线体验：https://nanxiaobei.github.io/ant-plus/input

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 更新内容：https://nanxiaobei.github.io/ant-plus/

欢迎尝试 Ant Plus ~ https://github.com/nanxiaobei/ant-plus