标签: semantic-ui

为什么中心对齐不起作用？

当我"center aligned"为我的元素指定类时,我期望文本居中对齐,但事实并非如此.

但是,如果我在所有元素上指定相同的类,那么它可以工作.

当指定一个班级并且所有孩子都继承时,这不足以满足要求吗？

小提琴是在http://jsfiddle.net/4woemsjt/4/

Basically this one does not work.

<div class="ui grid centered">
    <div class="fourteen wide column">
      <table class="ui celled collapsing table">
        <thead>
        <tr class="center aligned">
          <th class="three wide">S1</th>
          <th class="three wide">S2</th>
          <th class="two wide">S3</th>   
        </tr>
        </thead>
        <tbody>
        <tr>                  
        <td>1</td>
        <td>2</td>
        <td>3</td>
        </tr>
        </tbody>
      </table>
    </div>
</div>    

但是这个确实如此

<div class="ui grid centered">
    <div class="fourteen wide column">
      <table class="ui celled collapsing table">
        <thead>
        <tr>
          <th class="center aligned three wide">S1</th>
          <th class="center aligned three wide">S2</th>
          <th …

如何让语义 UI 搜索选择进行搜索？

我目前在 WordPress 中使用它，但只显示搜索字段和选项。

jQuery('#search-cursos')
  .dropdown({
    fullTextSearch: true
  });

<link href="https://cdn.jsdelivr.net/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.1.8/semantic.min.js"></script>

<div class="ui fluid search selection simple dropdown">
  <input type="hidden" name="country">
  <i class="dropdown icon"></i>
  <div class="default text">Select Country</div>
  <div class="menu">
    <div class="item" data-value="ad"><i class="ad flag"></i>Andorra</div>
    <div class="item" data-value="ae"><i class="ae flag"></i>United Arab Emirates</div>
  </div>
</div>

我在让 TinyMCE 在语义 UI 模式中工作时遇到问题。一切看起来都很好并且没有错误，但无法将光标放在 TinyMCE 编辑器中。

我找到了这些解决方案，但似乎没有一个适用于语义 UI： http://archive.tinymce.com/wiki.php/Tutorials:TinyMCE_in_a_boostrap_dialog http://archive.tinymce.com/wiki.php/Tutorials:TinyMCE_in_a_jQuery_UI_dialog

我正在使用 Aurelia 和 TypeScript。

关于如何解决这个问题有什么想法吗？

请参阅此处的 jsfiddle。

在语义 UI 中，如何创建具有 (a) 垂直居中的项目和 (b) 项目内图标和文本之间的垂直中断的水平菜单？

这段代码...

<div class="ui icon menu">
    <div class="item">
        <div style="width:100px;height:100px;background:#f00"></div>
    </div>
    <div class="item">
        I want this<br>vertically centered
    </div>
    <div class="item">
        <i class="huge blue settings icon"></i>
        I want these<br>beneath the icon
    </div>
    <div class="item">
        <i class="huge blue power icon"></i>
        ... and centered<br>vertically
    </div>
</div>

……接近了。以下是添加labeled到菜单之前和之后发生的情况。

没有labeled我无法弄清楚如何移动图像下方的文本。

使用labeled，我无法弄清楚如何垂直居中项目内容。

有什么建议吗？

编辑：最简单的解决方案是回答“如何在项目中的图标和文本之间强制换行？”的问题。

我正在使用语义 UI React。我有一个 Segment 组件，里面有一些东西，最后是一个我想向右浮动的按钮，但是当我向右浮动它时，它开始从 Segment 中出来：

如果我不浮动它，它会很好地留在段内，但它在左侧，我希望它在右侧：

我可以做什么来解决这个问题？

我正在映射一组对象并在下拉选择中使用该名称 w/ semantic-ui-react。

我有一些模拟数据

mock.onGet("/dataschemas").reply(200, {
  data: [
    {
      id: "2147483599",
      selfUri: "/dataschemas/2147483599",
      name: "Book Catalog"
    },
    {
      id: "2147483600",
      selfUri: "/dataschemas/2147483600",
      name: "Business Articles"
    }
  ]
});

在 cDM 中，我将对象的状态更新为 dataschemas

  async componentDidMount() {
    await this.getSchemas();
  }

  getSchemas = async () => {
    try {
      const { data } = await axios.get("/dataschemas");
      console.log(data);
      const dataschemas = data.data;

      this.setState({ dataschemas: dataschemas });

      console.log("This is the dataschema list:", dataschemas);
    } catch (error) {
      console.error(Error(`Error fetching results list: ${error.message}`));
    }
  }; …

如何使下面的卡片无边框、无线条边框？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.3/dist/semantic.min.css">
<div class="ui cards">
  <div class="card">
    <div class="content">
      <div class="header">Elliot Fu</div>
      <div class="meta">Friend</div>
      <div class="description">
        Elliot Fu is a film-maker from New York.
      </div>
    </div>
  </div>
</div>

我创建了一个 Web 应用程序，它在首页上显示了蛋糕产品。我在 React 中编写了代码，一切正常。目前，我的应用程序看起来像这样

前 3 种产品（蛋糕）显示在上方，最后 3 种产品（蛋糕）显示在下方。现在，我需要以这种方式来处理那些产品，其中 item 代表蛋糕的图像。如何才能做到这一点？

我在 React 中的 JSX 代码是：-

import React from 'react'
import { Container } from 'semantic-ui-react';

const numberOfPicture = [1, 2, 3, 4, 5, 6];

const Product = () => {
    return (
        <Container>
            <div className='ui three column grid' id="cakesProduct">
                {numberOfPicture.map((picture, index) => (
                    <div className="column" key={index}>
                        <div className="ui fluid card">
                            <div className="image">
                                <img src={`assets/cakes/cake-${picture}.jpg`} />
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </Container >




    );
}

export default Product

我试图处理这个问题2天,但我仍然无法使用语义UI的JavaScript工作.这是我的所有代码.我的jQuery不是很好.我已经阅读了很多,但它不起作用.

        <!DOCTYPE html>
        <html>
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0,
        minimum-                      scale=0.5, maximum-scale=2.0, 
        user-scalable=yes" /> <!--???-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="utf-8">
        <title>??????</title>
        <link rel="stylesheet" type="text/css" href="css/semantic.css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.address.js"></script>
        <script type="text/javascript" src="js/semantic.js"></script>

        <style type="text/css">
        .diymenu{background-color: blue;margin: 0px 0px 0px 0px; padding-top:0px;}
        body{margin: 0px 0px 0px 0px;font-family: ????;}
        </style>
        <script type="text/javascript">
        $(document).ready(function(){
        $('#drop').click(function(){
        $('#drop').dropdown('show');
        });
        });
        </script>
        </head>
        <body >

        <!--???  -->
        <div class="ui  blue inverted menu">
        <a class="active item"><i class="home icon"></i>??</a>
        <div class="right menu">
        <a class="item"><i class="mail  icon"></i>??
        <div …