标签: semantic-ui

我不能让主题选择在语义UI中工作.

我尝试按照文档工作流程部分提供的说明操作:

examples/项目文件夹中的文件可用于测试UI中的更改.例如,您可以运行gulp watch下载新主题,src/site/themes/然后使用新主题theme.config的名称调整文件并刷新examples/kitchensink.html以检查主题中的更改.

所以在语义ui目录中,在适当的gulp build/gulp安装步骤之后,

1. 我输入gulp watch,

2. 我修改src/theme.config,例如:

   ...
   /* Elements */
   @button     : 'material';
   ...
   

   Run Code Online (Sandbox Code Playgroud)

3. 文件dist/semantic.css被重新生成(inotify说).

到目前为止一切都那么好......除了渲染examples/kitchensink仍然是默认的.仔细看看dist/semantic.css它显示它实际上与原始的相同.

任何人都可以在我的过程中指出(可能是显而易见的)问题吗？

我正在创建一个Web应用程序semantic-ui.我正在尝试创建一个具有侧边栏和主要内容区域的布局.起初,我认为使用网格是可行的方法,除了它们会导致一些问题:

1. 列和行之间将有额外的间距/排水沟
2. "移除"排水沟的唯一方法是使用类似的方式设置列颜色<div class="four wide black column">,但这会导致列与其他内容重叠

如此看来,电网不创建页面布局的最佳工具,虽然他们提供的功能,这使得他们对页面布局有用(如定义截面尺寸; four wide column,ten wide column等)

使用Semantic-UI布局Web应用程序的推荐方法是什么,例如简单的侧边栏和主要内容列？

我正在构建一个简单的基于网格的布局,我想.vertical pointing menu放在第3个紫色行中,如此处显示小提琴.哪个是使第3行的高度适合100%视口的正确方法？我尝试通过将主体和指向菜单高度设置为100%但没有任何效果.该行的高度由内容的高度决定,在这种情况下是菜单的高度.

我正在使用' Semantic UI '框架创建一个html表单.当我使用正常的选择项目作为下拉/选择列表时,我正在使用语义UI来设置样式.一切正常,但是一旦我从下拉列表中选择一个值,我就无法取消选择最终用户的选项/值.

假设在这个FIDDLE中,如果我选择"男性",并再次想要取消选择该选项并显示占位符/默认文本"性别",我无法做到.有人可以帮我找出一种方法,使选择工作作为常规的HTML选择项而不是下拉列表吗？

HTML代码

<div class="field">
            <label style="width: 250px">Select a Gender</label> <select
                name="skills" class="ui fluid dropdown">
                <option value="">Gender</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
            </select>
</div>

JavaScript代码

$(".ui.fluid.dropdown").dropdown({})

我的页面中有多个form类别div,我想知道是否有一种方法可以用来不引人注意地测试每种方法的有效性form？每个div类form都有一个button(具有类ok),允许用户继续通过form divs.我想button在页面加载时禁用它,以确保从forms中收集所有相关数据,并且仅在form有效允许进展时才收集.我已经尝试向每个change调用语义的表单元素添加一个函数,is valid但它会突出显示每个有效性问题.

这个JSFiddle说明了我的问题:https://jsfiddle.net/annoyingmouse/3z1wfjeL/

当名字字段被点击到它会自动显示所有表格上的错误-我想要的错误,只显示在一个必填字段已经模糊,而不是示出使用测试的结果的所有错误is valid.

有人有任何想法吗？

我想要有两个相同高度的列,它们的内容应该是中间对齐的,所以在每个div的正中心.

问题: "相等高度"和"中间对齐"似乎排除了自己,一个不适用于另一个.

问题:如何创建一个包含两列宽度不同,高度相等且内容集中在每列中间的行？

<!-- 'middle aligned' and 'equal height' don't like each other ? -->
<div class="ui equal height center aligned grid">
    <div class="row">
        <div class="twelve wide purple column">
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        </div>
        <div class="four wide red column  middle aligned">
            <div class="row">Forward</div>

        </div>
    </div>
</div>

http://jsfiddle.net/kjjd66zk/1/

我需要带有文本(内部<p>)的段,以及右侧下一行的按钮

我尝试下一个标记,但似乎无法正常工作(按钮溢出段边框):

<div class="ui container">
    <div class=" ui segment">
        <p> Some Text.</p>
        <button class="ui right floated primary button"> Some Action</button>
    </div>
</div>

怎么做,使用语义ui框架？

如何设置"语义UI搜索选择"下拉列表的宽度？我需要将Semantic UI Search选择下拉列表的宽度设置为下拉列表中最长的元素.任何帮助将不胜感激.

我希望我的默认选择选项dropdown.当我添加所选选项但不使用默认选定选项渲染时,下面的代码有效:

render() {
        return (
            <Form onSubmit={this.handleFormSubmit}>
                <Form.Dropdown
                  placeholder="Select Options"
                  fluid multiple selection
                  options={this.state.options}
                  onChange={this.handleMultiChange}
                />
                <Button type="submit">Submit</Button>
            </Form>
        );
    }

我尝试添加defaultSelectedLabel={this.state.selected}.

this.state.selected 是一个选项数组,默认情况下所选的值为true:

render() {
        return (
            <Form onSubmit={this.handleFormSubmit}>
                <Form.Dropdown
                  placeholder="Select Options"
                  fluid multiple selection
                  options={this.state.options}
                  onChange={this.handleMultiChange}
                  defaultSelectedLabel={this.state.selected}
                />
                <Button type="submit">Submit</Button>
            </Form>
        );
    }

但我得到以下警告:

Warning: Failed prop type: Invalid prop defaultSelectedLabel supplied to Dropdown.

我对defaultValue道具做了同样的事情但得到了同样的错误

如何获取默认选项dropdown？

我有一个模态,用户需要填写一些表格,并通过模态中的按钮保存所填写的内容.当用户保存时,我希望关闭模态.通过open在Modal组件上使用prop ,我可以完成这项工作.但是,如果我这样做,当我尝试通过closeIcon时,模态不会关闭.

我该怎么做才能让用户通过这两种方法关闭Modal？

这是我目前的模态代码:

  handleCreateButton (evt) {
    evt.preventDefault()
    // ...
    // code to save whatever was typed in the form
    // ...

    this.setState({showModal: false})
  }

  renderModalForm () {
    const {
      something,
      showModal
    } = this.state

    // if I have the open props, I get to close the Modal after the button is clicked
    // however, when using the icon or clicking on dimmer it wont work anymore.
    return (
      <Modal closeIcon closeOnDimmerClick open={showModal} trigger={<Button onClick={() => …