使用 React 和 Ant 設計的浮動標簽

Question

對於我的 React 應用程序，我正在嘗試使用來自 Antd 的模板構建一個帶有浮動標簽的表單，該模板具有不同的輸入類型，僅使用 styles 使標簽浮動。 到目前為止，我已經能夠將 label 放在輸入后面，但是當我將轉換 + 轉換應用於我的 css 代碼時，它似乎根本不起作用。

這是我的表格的一部分：

switch (data.inputType) {
        case 'input':
          return (
            <Form.Item key={`frmItem-${data.id}`}>
              <label htmlFor={data.id} className="floating-label">
                {data.label}
              </label>

              <Input
                key={`input-${data.id}`}
                id={data.id}
                className="floating-label-field"
                project-field={data.id}
                defaultValue={projectData[data.id]}
                onChange={handleUpload}
                // placeholder={data.placeholder}
                allowClear
              />
            </Form.Item>
          )

這是我的 style.js：

export const StyledFormDiv = styled.div`
  .ant-form-item {
    position: relative;
  }

  .ant-form-item-control {
    height: 50px;
  }

  /* Floating label */
  .floating-label {
    /* top: 0; */
    /* left: 0; */
    position: absolute;
    /* z-index: 500; */
    /* transform: translate(0, 25px) scale(1); */
    /* transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, */
    /* transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms; */
    /* transition: width 0.4s ease; */
  }

  .floating-label-field {
    /* position: absolute; */
    /* touch-action: manipulation; */
    border-bottom: 1px solid #000 !important;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    /* transition: transform 0.25s, opacity 0.25s ease-in-out; */
    /* transform-origin: 0 0; */
    /* opacity: 0.5; */
    /* transition: padding-top 0.2s ease, margin-top 0.2s ease; */

    &::placeholder {
      color: transparent;
    }
  }

我想也許 antd 的某些東西不允許我浮動標簽，但我想要一種解決方法，不必安裝另一個 package 或制作另一個組件。

Answer 1

您可以為浮動 label 編寫簡單的組件，它可以包裝 antd 輸入。

看看這個FloatLabel組件，

import React, { useState } from "react";

import "./index.css";

const FloatLabel = props => {
  const [focus, setFocus] = useState(false);
  const { children, label, value } = props;

  const labelClass = focus || value ? "label label-float" : "label";

  return (
    <div
      className="float-label"
      onBlur={() => setFocus(false)}
      onFocus={() => setFocus(true)}
    >
      {children}
      <label className={labelClass}>{label}</label>
    </div>
  );
};

export default FloatLabel;

現在你可以像這樣用FloatLabel組件包裝你的 antd 輸入，

<FloatLabel label="First Name" name="firstName" value={firstName}>
  <Input value={firstName} onChange={e => setFirstName(e.target.value)} />
</FloatLabel>

您可以查看此代碼沙箱示例。

Answer 2

我知道為時已晚，但它可能會幫助某人。

如果我從您的問題中理解正確，沒有內置的解決方案可以使用 Ant 設計浮動 label，所以我已經對表單字段和 CSS 進行了一些調整，我的代碼如下。 祝你好運！！！

<FormItem label={""} className={"group-floating-label"}>
    {getFieldDecorator('name', {
        initialValue:'Jaison',
        rules: [{ required: true, message: 'Field required', whitespace:true }]
    })(
        <Input
            className="input-control"
            placeholder="."
            suffix={<label className="floating-label" htmlFor="name">Full Name</label>}
        />
    )}
</FormItem>



/* * * * * * * * * * * * * * * * * *
Floating Label - .less
* * * * * * * * * * * * * * * * * */

//Custom version of floating label using the ant suffix method
.group-floating-label {
    position: relative;
    margin-bottom: 30px !important;

    .input-control {
        .ant-input {
            display: block;
            width: 100%;
            line-height: 1.25;
            color: #000;
            background-color: #fff;
            background-image: none;
            background-clip: padding-box;
            border: 1px solid rgba(0, 0, 0, .15);
            border-radius: .25rem;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            border: 0;
            box-shadow: none;
            border-bottom: 1px solid #e8e8e8;
            border-radius: 0;
            .font-size(1.6);
            padding: 0;

            &.ant-input-disabled {
                background-color: rgba(245, 245, 245, 0.36);
                color: rgba(0, 0, 0, 0.36);
            }

            &:focus, &:hover {
                box-shadow: none;
                border-color: #4285f4;
            }

            &::-webkit-input-placeholder {
                color: #fff;

            }

            &::-moz-placeholder {
                color: #fff;
            }

            &:-ms-input-placeholder {
                color: #fff;
            }

            &:focus + .ant-input-suffix, &:not(:placeholder-shown) + .ant-input-suffix {
                .floating-label {
                    font-size: 85%;
                    transform: translate3d(0, -25px, 0);
                    color: rgba(0, 0, 0, .7);
                    padding-left: 0;
                }
            }
        }

        @supports (-ms-ime-align:auto) {
            .ant-input-suffix {
                .floating-label {
                    font-size: 85%;
                    transform: translate3d(0, -25px, 0);
                    color: rgba(0, 0, 0, .7);
                    padding-left: 0;
                }
            }
        }

        &.show-placeholder {
            .ant-input {
                &:focus {
                    &::-webkit-input-placeholder {
                        color: #ccc;
                        .font-size(1.3);
                    }

                    &::-moz-placeholder {
                        color: #ccc;
                        .font-size(1.3);
                    }

                    &:-ms-input-placeholder {
                        color: #ccc;
                        .font-size(1.3);
                    }
                }
            }
        }
    }

    &.input-prefix {
        .prefix {
            display: inline-block;
            border: 1px solid #e8e8e8;
            border-radius: 20px;
            padding: 5px 10px;
            line-height: 10px;
            margin-right: 20px;
            position: absolute;
            left: 0;
            top: 4px;
            .font-size(1.6);
            text-align: center;
            z-index: 9;
            color: #000;
        }

        .input-control {
            .ant-input {
                padding-left: 70px;
            }
        }

        .ant-input-suffix {
            .floating-label {
                padding-left: 70px;
            }
        }

        .ant-input-prefix {
            left: 0;
            top: 0;
        }
    }

    .ant-input-suffix {
        left: 0;
        right: 0;
        top: 0;

        .floating-label {
            position: absolute !important;
            top: 0;
            padding: 0px;
            transition: all 200ms;
            color: rgba(0, 0, 0, 0.5);
            line-height: 30px;
            transform: translate3d(0, 0, 0);
        }
    }

    .has-error {
        .ant-input {
            box-shadow: none !important;
        }

        .input-control {
            .ant-input {
                border-bottom: 2px solid red;
            }
        }
    }

    .ant-form-explain {
        margin-bottom: 0px;

        position: absolute;
        left: 0;
        right: 0;
        top: 35px;
    }

    .suffix-right {
        position: absolute;
        right: 0;
        top: 3px;
        cursor: pointer;
    }

    &.default-floated {
        .floating-label {
            transform: translate3d(0, -25px, 0) !important;
            padding-left: 0 !important;
        }
    }
}