标签: semantic-ui-react

我使用当前版本的 react-boilerplate（使用 webpack）并安装了 Semantic-UI-React，如官方文档http://react.semantic-ui.com/usage 中所述

当我启动服务器时，我得到：

Server started ! ?

Access URLs:
-----------------------------------
Localhost: http://localhost:3000
      LAN: http://192.168.100.103:3000
-----------------------------------
Press CTRL-C to stop

webpack built dba595efb772df0727e8 in 11657ms

ERROR in ./semantic/dist/semantic.min.css
Module parse failed: /Users/standardnerd/development/template/semantic/dist/semantic.min.css Unexpected character '@' (11:0)
You may need an appropriate loader to handle this file type.
|  *
|  */
| @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin);/*!
|  * # Semantic UI 2.2.7 - Reset
|  * http://github.com/semantic-org/semantic-ui/
 @ ./app/app.js 20:0-43
 @ multi main

我需要什么样的“合适的装载机”？

解析器不喜欢 /semantic/dist/semantic.min.css 中的 @import 语句： …

我正在使用react-semantic-ui Modal对象.打开模态的对象是道具.

 <Modal
       trigger=<Button>Text</Button>
       otherProp=...
   >
  </Modal>

我想在另一个组件中嵌入Modal:

export default class Confirm extends Component {

    render() {
        return (
            <Modal
                trigger={this.props.trigger} /* here */
              >    
                <Modal.Content>
                    ...
                </Modal.Content>
                <Modal.Actions>
                    ...
                </Modal.Actions>
            </Modal>
        )
    }
}

如何将JSX代码(<Button>Text</Button>)作为要呈现为模态道具的道具传递？

我将在我的项目中使用Semantic-UI-React,但我遇到了以下问题:

文档链接:https://react.semantic-ui.com/usage#css

1. 文档说支持webpack 1但不推荐.我正在使用随Webpack版本1.14.0一起提供的Create React App.这是否意味着我不应该使用Semantic-UI-ReactCRA？

2. 对于样式,我也想在我的项目中使用一些自定义样式,所以我选择Semantic UI了文档中提到的第三个包选项.. npm install semantic-ui --save-dev在gulp内部运行并创建一个semantic文件夹.但是dist文档中没有提到文件夹.我应该semantic.min.css在index.js文件中引用哪条路径？

我基本上是试图利用Semantic-UI-React与semantic.min.css一些我自己的在它之上的风格.但似乎我在设置中犯了一些错误.另一个选择可能是继续Semantic UI CSS包裹？...但根据文档,我将无法使用此方法使用自定义样式.

我在这里有点困惑,请帮忙:)

语义UI React Checkbox可以这样使用：

import React from 'react'
import { Checkbox } from 'semantic-ui-react'

const TermsOfServiceCheckbox = () => (
  <Checkbox label='I accept the Terms of Service' />
)

export default TermsOfServiceCheckbox

如何设置复选框标签，以使文本服务条款是指向URL的链接？

我正在使用 Reactjs 项目，并且我使用 Semantic UI React 来美化Input. 但是，似乎Input总是以默认大小显示。如何调整其水平宽度？

• 我按照Semantic UI React Home page上的说明，将这行代码放到 Html 中：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>

• 在我导入的js文件中：

import { Input } from 'semantic-ui-react';

• 并呈现输入：

<Input value={this.state.firstName} onChange={this.handleInputFirstName}/>

用鼠标点击一切正常,但我想让它与键盘一起使用

当我坐在输入组件中按下键时,我希望输入没有聚焦/模糊.

这是我的输入组件

import { Input } from 'semantic-ui-react';

<Input 
  focus={this.state.inputFocus} 
  ref='search'
  placeholder='Search...' />

在进入输入时,使用按键,此代码有助于集中输入

this.refs.search.focus();
this.setState({ inputFocus: true });

但是当从输入框离开时,闪烁的键指示灯不会被移除,并且该框仍然显示为聚焦,

尝试的代码 不起作用

this.refs.search.blur(); // generates error
this.setState({ inputFocus: false }); //changes state var but ui isn't changed

模糊错误

我使用的是语义UI反应的Form.Input，它将输入分为两个div。

这意味着，

<Form.Input type='password' name='password' id='loginPassword'></Form.Input>

呈现如下：

<div class='field'>
  <div class='ui fluid action left icon input'>
   <input type='password' name='password' id='loginPassword' ...>
   <button ...>
  </div>
</div>

我想获取该<input/>元素的引用，以便可以调用focus（）。

1. 使用ref ='myRef'时，我的参考设置为组件
2. ReactDOM.findDOMNode返回一个DOM引用，但是该引用设置为外部div（带有class ='field'）。

如何获得对该<input/>元素的引用？

顺便说一句，我正在使用redux，尽管我认为这并不重要

在React Semantic-UI中，可以为Input元素提供方便的操作按钮或图标，如下所示：

http://react.semantic-ui.com/elements/input/#variations-action-icon-button

不幸的是，该文档确实无法很好地说明操作如何触发功能。在这里提出了有关如何执行此操作的问题：

https://github.com/Semantic-Org/Semantic-UI-React/issues/1944

答案似乎是您应该在图标或按钮上使用onClick。看起来像这样：

<Input
    action={{
        icon: 'play', onClick: (event,data)=>{console.log(data);}
    }}
    defaultValue="I bet you wish you could access this!"
/>

尽管这似乎合乎逻辑，但提出了一个问题，当传递给onClick函数的数据描述的是图标而不是输入时，如何访问输入的值？

我用 react-semantic-ui 创建了卡片，我想通过 css 类添加一些额外的样式。

一个例子是：

我添加了带有 box-shadow 属性的自定义“卡片”类，但未应用该样式。

          HTML PART:

import './App.css';


          {/* CLAIM CARDS SECTION */}

                  <Card className='card'>
                    <Card.Content>
                      <Card.Header style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>       
                        <h4>
                          Church Mutual Worker's Compensation Claim 
                          <span style={{marginLeft: '130px'}}>Claim #1234567</span>
                        </h4>
                      </Card.Header>
                    </Card.Content>
                  </Card>

CSS 代码部分：App.css

 .header-height {
      height: 12rem;
    }

    .header-title-color {
      color: black;
      font-weight: bold;
    }

    .card {
      box-shadow: 2px 2px 2px 2px grey;
      width: 100%;
    }

    .red {
      color: red;
    }

有人有解决方案如何将自定义 css 类添加到 React-semantic-ui 组件吗？

谢谢

我尝试使一行可选择，但我希望能够单击行内的任何位置并将其链接到某处。每行应该有不同的链接。

即使我指定了多个单元格，下面的这种方式也会将我的所有 Table.Cells 放入一个单元格中。

<Table selectable color={'black'} >
   <Table.Body>
      <Table.Row positive>
         <Link to={'/ticker/'}> 
            <Table.Cell></Table.Cell>
            <Table.Cell></Table.Cell>
            <Table.Cell></Table.Cell>
            etc...

下面的这种方法解决了问题，但使每个单元格都有悬停，而不是整行悬停。

<Table selectable color={'black'} >
   <Table.Body>
      <Table.Row positive>
         <Table.Cell selectable><Link to={'/ticker/'}></Link></Table.Cell>
         <Table.Cell selectable><Link to={'/ticker/'}></Link></Table.Cell>
         <Table.Cell selectable><Link to={'/ticker/'}></Link></Table.Cell>
         etc...

我想让每一行都可选择并悬停相同的颜色，并使每一行链接到不同的链接。

谢谢你！