如何在不更改标签位置的情况下显示错误弹出窗口？

Question

你能告诉我如何在不改变标签位置的情况下显示错误弹出窗口吗？如果你从组件中删除下面的行，它会在输入 field.but 上方显示标签，当我们添加此行时需要 space 和在标签和输入字段之间插入。

`

error={{ content: 'Please enter your first name', pointing: 'below' }}

codesandbox

我试图用这个 CSS 删除它，但它改变了所有工具提示的位置。

/* .error.field  .ui.pointing{
position: absolute;
top:-10px
} */

`

Answer 1

你的 CSS 只需要更具体一点，以瞄准正确的 class。此外，您应该尽量避免像这样全局定位 classes，因为您可能会无意中影响不需要此样式的其他标记。特异性至关重要。

此外，为了使您的样式更具体且更不容易出错，请为每个 Form.Input 赋予其自己的 class。

Example.js

import React from "react";
import { Form } from "semantic-ui-react";

const FormExampleFieldErrorLabel = () => (
  <Form>
    <Form.Input
      className="first-name"
      error={{ content: "Please enter your first name", pointing: "below" }}
      fluid
      label="First name"
      placeholder="First name"
    />

    <Form.Input
      className="last-name"
      error={{
        content: "Please enter your last name",
        pointing: "below"
      }}
      fluid
      label="Last name"
      placeholder="Last name"
    />

    <Form.Checkbox
      label="I agree to the Terms and Conditions"
      error={{
        content: "You must agree to the terms and conditions",
        pointing: "left"
      }}
    />
  </Form>
);

export default FormExampleFieldErrorLabel;

然后在我们的样式-sheet中，我们将在我们的选择器前面加上每个class给每个Form.Input的名称，并覆盖语义-[=34提供的样式=].

styles.css

.first-name .pointing.below.label {
  top: -13px;
  position: absolute;
  left: -2px;
}

.last-name .pointing.below.label {
  position: absolute;
  top: 63px;
  left: -2px;
}

这里还有工作 sandbox。

如何在不更改标签位置的情况下显示错误弹出窗口？

How to show error popup without changing label position?

reactjs

semantic-ui

semantic-ui-react

Example.js

styles.css