标签: semantic-ui

有没有办法让一行中的列大小相同？我希望我的十宽列与六宽列的高度相同。代码如下。

<div class="ui grid">
    <div class="row">
        <div class="ten wide column">
            <div class="ui segment purple inverted">
                Text
                <img class="ui fluid image" src="{{ asset('/img/pic1.jpg') }}">
            </div>
        </div>
        <div class="six wide column">
            <div class="ui segment purple inverted">
                Text
                <div class="row">
                    <img class="ui centered image" src="{{ asset('/img/pic2.jpg') }}">
                </div>
                <div class="row">
                    <img class="ui centered image" src="{{ asset('/img/pic3.jpg') }}">
                </div>
            </div>
        </div>
     </div>
</div>

无法在表单中获取语义 UI 日期选择器以返回格式 - dd/mm/yyyy 的日期 我正在使用 Meteor。

 <div class="five wide required field">
     <label>Expiry Date</label>
     <input type="date" name="dateExpire" placeholder="dd/mm/yyyy" value={{dateExpire}}>
 </div>

我正在尝试从 Semantic UI React 实现 Modal。我不知道为什么，但在语义文档中，模态出现在中心。然后我在我的 SPA 中实现了这个，模式在左侧显示为全尺寸。如何解决？

我在反应语义 ui 中有一组 3 个单选按钮。

这工作正常。问题出在 UI 错误中，当我单击此单选按钮之一时，未选中按钮。

ui错误截图：

有人知道为什么不检查按钮吗？

单选按钮代码：

  <Form>
    <Form.Field>
      <Radio
        label="New Claims"
        name="isTransferred"
        value={false}
        checked={isTransferred === false}
        onChange={this.handleFilterChanged}
      />
    </Form.Field>
    <Form.Field>
      <Radio
        label="Transferred Claims"
        name="isTransferred"
        value={false}
        checked={isTransferred === true}
        onChange={this.handleFilterChanged}
      />
    </Form.Field>
    <Form.Field>
      <Radio
        label="New Claims and Trasferred Claims"
        name="isTransferred"
        value={'all'}
        checked={isTransferred === 'all'}
        onChange={this.handleFilterChanged}
      />
    </Form.Field>
  </Form>

更新：

从浏览器生成的 HTML：

<div class="row">
<form class="ui form" style="padding-left: 3.3em;">
    <div class="field">
        <label>Assignments:</label>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" class="hidden" name="isTransferred" readonly="" tabindex="0" value="false">
            <label>New …

当输入字段聚焦在我正在使用的 react js 中时，您能告诉我如何更改标签颜色吗 semantic UI

https://react.semantic-ui.com/collections/form/#types-form 这里是我的代码

<Form>
    <Form.Field>
      <label>First Name</label>
      <input placeholder="First Name" />
    </Form.Field>
    <Form.Field>
      <Checkbox label="I agree to the Terms and Conditions" />
    </Form.Field>
    <Button type="submit">Submit</Button>
  </Form>

https://codesandbox.io/s/semantic-ui-react-example-i6crv

我在 React 中有一个使用Semanti UI react的组件

我试图证明一个容器到 flex-end 是合理的，但它不起作用

<Item  key={item._id} id={item._id}>
           <img className="image" src={item.imageURL} alt="Project Canvas"/>
           <div className="content">
              <div className="title">{item.title}</div>
              <Item.Meta>
                {new Date(item.createdDate).toUTCString()}
              </Item.Meta>
              <Item.Description>{item.description}</Item.Description>
              <div className="footer">
                <Button primary floated='right' href={item.workURL} target="_blank">
                  Go to application
                  <Icon name='right chevron' />
                </Button>
                <Label color='teal' tag> React </Label>
              </div>
           </div>
         </Item>

我试图 flex-end 的组件是< div class="footer">

我的 CSS

.content{
  margin: 1vh !important;
  display: flex !important;
  flex-direction: column !important;

}

.footer{
  padding-top: 2vh !important;
  border-top: 1px solid rgba(0,173,181,1) !important;
  justify-self: flex-end …

我正在使用语义ui.我里面有一个模态和一个表单.问题是我没有收到无效的电子邮件错误提示.当输入无效的电子邮件地址时,该字段变为红色,这意味着正在捕获错误,但我没有收到错误提示.请告诉我我哪里错了.我还想知道"标识符"选项是什么.

HTML

  <div class="ui basic modal" id="qqmodal">
      <i class="close icon"></i>

    <div class="ui compact raised segment" id="qqform">
<form class="ui form" action="qqsend.php" method="post">

        <div class="field"><input type="text" name="name" placeholder="Name" autocomplete="off" id="qqname"></div>
        <div class="field"><input type="text" name="phone" placeholder="Phone" autocomplete="off" id="qqphone"></div>
        <div class="field"><input type="text" name="mail" placeholder="Email" autocomplete="off"></div>
        <h5 class="ui header">What do you want?</h5>
        <div class="inline field">
        <div class="ui checkbox">
          <input type="checkbox" name="servicecb1">
          <label>New Website</label>
        </div>
      </div>
      <div class="inline field">
        <div class="ui checkbox">
          <input type="checkbox" name="servicecb2">
          <label>Website Redesign</label>
        </div>
        </div>
        <div class="inline field">
        <div class="ui checkbox">
          <input …

我似乎无法在React组件中使语义ui正常工作。jQuery正常运行。但是语义手风琴不响应click事件。

import React, { Component } from 'react'
import 'semantic-ui/dist/semantic.min.css'

import $ from 'jquery'
import jQuery  from 'jquery'
window.jQuery = jQuery
import 'semantic-ui/dist/semantic.min.js'

export default class App extends Component{
  render(){
    return(
      <div>
        <h1>Hello, React!</h1>
          <div className="ui slider checkbox">
            <input type="checkbox" name="newsletter" />
            <label>Accept terms and conditions</label>
          </div>
          <div className="ui styled accordion">
  <div className="active title">
    <i className="dropdown icon"></i>
    What is a dog?
  </div>
  <div className="active content">
    <p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it …

正如您在这里可以看到的那样:https: //jsfiddle.net/qar4n4ey/6/ 底部的两个按钮部分位于容器外部.它发生在我向左和向右漂浮它们的时候.如何将它们放在容器内？

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>MYMDB</title>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css">
        <link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>

<div class="ui main center aligned text container segment">

    <div class="ui huge header">Search for a TV show</div>
    <form class="ui form" action="results" method="GET">
        <div class="ui search">
              <div class="ui icon input">
                <input class="prompt" type="text" placeholder="Tv shows..." name="search">
                <i class="search icon"></i>
              </div>
              <div class="results"></div>
        </div>


        <input id="greenbtn" class="ui green button" type="submit">
    </form>



    <a id="run" href="/run" class="ui left floated blue animated button" …

就像标题中一样，我会将语义UI集成到Angular 6中，以使用非常好的Web控件。

我找到了一个Angular官方的Ng-Book（第32页）的示例，我看到我应该复制并粘贴书库中的一些文件（src / app / vendor /，src / assets / images /和src / styles.css ）。好的，它可以工作，但这是已经构建的应用程序中的特定示例，我想很好地理解一般情况下的制作方法。

因此，我搜索了一些通用的制作方法，不仅使用了本书代码中引用的示例。并且，在官方的语义UI网站上，我看到尚未开发Angular 6特定的集成工具。我发现只有一个非常旧的实现，它被称为Angular1.x。

由于这个原因，我问你：如何正确（手动）将语义UI集成到Angular 6应用程序中，以及如何在代码中调用几个非常简单的自定义控件？这也是一个非常简单的示例，例如一个Semantic-UI文本字段或一个Semantic-UI按钮就足够了。您是否有一个非常简单的教程链接或分步介绍？

非常感谢大家！