语义 UI - 为什么表单中没有消息？

Question

我正在使用 Semantic-UI，我正尝试向我的 Form 添加警告 message，如下所示：

<form>
    ...stuff...
    <div class="ui warning message">
        <div class="header">
            Title of the message
        </div>
        Text of the message
    </div>
</form>

但由于某种原因，它根本没有显示在页面上。只有在我发现这是因为 SemanticUI 自己的内部 CSS 规则明确地将消息隐藏在表单中之后。来自 semantic.min.css:

.ui.form .error.message, .ui.form .success.message, .ui.form .warning.message {
    display: none;
}

这是为什么？我可以覆盖它吗？我有理由不这样做吗？

Answer 1

你写在css.formclass但是你不习惯.formclass所以只能用formtag 在你的 css

试试这个

form .ui.error.message, 
form .ui.success.message, 
form .ui.warning.message {
    display: none;
}

Answer 2

嗯，我不是 100% 确定，但我猜测 error / success / warning classes 用于表单验证消息，因此它们默认隐藏的原因。我通过使用特定颜色 class 而不是 warning 解决了这个问题：

<form>
    ...stuff...
    <div class="ui yellow message">
        <div class="header">
            Title of the message
        </div>
        Text of the message
    </div>
</form>

这个效果很好，在视觉上与 warning 没有区别。

Answer 3

我也遇到了同样的问题。不确定您是否已经有了答案，但对于其他访问此 post:

用 <div> 和 class "ui form error".

包裹你 <form>

例如，

<div class="ui form error">
<form class="some class" method="POST" action="/some_acton">
..fields..
</form>
</div>

或

<form class="ui form error your_class" method="POST" action="/some_action">
..fields..
</form>

Answer 4

那是因为可见的属性默认是隐藏的。您可以使用 ngClass 将可见的属性动态设置为 true。例如：

<form class="ui form">
    <div class="field">
        <label for="x"> x </label>
        <input type="text" id="x">
        <div class="ui error message" [class.visible]="true">Error!</div>
    </div>
</form>

或

<form class="ui form">
    <div class="field">
        <label for="x"> x </label>
        <input type="text" id="x">
        <div class="ui error message" [ngClass]="{visible : true}>Error!</div>
    </div>
</form>

Answer 5

在消息 div 中添加 visible class 对我有用。试试这个，

<div class="ui warning visible message">

Answer 6

这是 Semantic-UI 故意设计的。

将错误状态放入表单将使其正常工作。

对于语义UIHTML/CSS，勾选here

<div class="ui form error">
  <div class="field">
    <label>E-mail</label>
    <input type="email" placeholder="joe@schmoe.com">
  </div>
  <div class="ui error message">
    <div class="header">Action Forbidden</div>
    <p>You can only sign up for an account once with a given e-mail address.</p>
  </div>
  <div class="ui submit button">Submit</div>
</div>

对于语义UI React，勾选here

import React from 'react'
import { Button, Form, Message } from 'semantic-ui-react'

const FormExampleError = () => (
  <Form error>
    <Form.Input label='Email' placeholder='joe@schmoe.com' />
    <Message
      error
      header='Action Forbidden'
      content='You can only sign up for an account once with a given e-mail address.'
    />
    <Button>Submit</Button>
  </Form>
)

export default FormExampleError

语义 UI - 为什么表单中没有消息？

Semantic UI - Why no message inside a Form?

html

css

forms

semantic-ui