标签: semantic-ui

语义UI:如何定义搜索下拉列表的选定项目("<select>")?

如何设置搜索下拉列表(选择)表单字段的选定项?我尝试使用以下jQuery/JavaScript代码:

if (equal == 0) {
    $('#sj_company').html($('#sj_company').html() + '<option value="' + key + '" selected="selected">' + data[key] + '</option>');
    $('.searchdropdown').dropdown('set selected', data[key]);
} else {
    $('#sj_company').html($('#sj_company').html() + '<option value="' + key + '">' + data[key] + '</option>');
}
Run Code Online (Sandbox Code Playgroud)

编辑:基础是语义ui前端框架;-)

javascript semantic-ui

13
推荐指数
3
解决办法
4万
查看次数

响应式替换Semantic UI的导航菜单

语义UI在菜单集合方面存在一些问题.简而言之,它根本没有响应,最接近它的是它们的"可堆叠"实现,只是简单地将菜单显示为堆栈.

这里的任何人都可以推荐一个很好的与语义ui集成的导航菜单吗?

感谢您的任何意见.

css jquery menu navigationbar semantic-ui

13
推荐指数
1
解决办法
8436
查看次数

语义ui如何抵消

如何在Bootstrap中像语法ui一样偏移列?

例如,在bootstrap中,类为"col-sm-5 col-sm-offset-2"的列为5列宽,并跳过页面的前2列.

semantic-ui

12
推荐指数
1
解决办法
4729
查看次数

导入 Semantic UI 后,使用 TypeScript 的 Create-React-App 无法编译

我通过运行创建了一个新的 React 应用程序,npx create-react-app@latest --typescript .并使用运行了该项目npm start,一切都按预期工作。我运行npm install semantic-ui-react semantic-ui-css并安装正确。

但是当我按照指示添加时import 'semantic-ui-css/semantic.min.css';index.tsx我得到一个failed to compile error.

这是我的index.tsx文件:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'semantic-ui-css/semantic.min.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or …
Run Code Online (Sandbox Code Playgroud)

typescript reactjs semantic-ui webpack semantic-ui-react

12
推荐指数
3
解决办法
2万
查看次数

语义UI中心对齐登录框?

我正在为我的网站使用语义UI框架.我想将登录框放在页面的中心.我只想要页面中的登录框.我不明白如何使用Semantic UI'网格类'来对齐.请帮我验证如何安装登录框.

我的代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my semantic website</title>
<link rel="stylesheet" href="../css/semantic.min.css">
<link rel="stylesheet" href="../css/style.css">
<script src="../js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8" async defer>     </script>
<script src="../js/semantic.min.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
<div class="ui grid">
    <div class="one column row">
        <div class="ui padded grid">
            <div class="three column row">
                <div class="column">
                    <div class="ui segment">
                        <h4 class="ui dividing header">Account Info</h4>
                        <div class="ui form">
                            <div class="field">
                                <label for="username">Username: </label>
                                <div class="ui icon input">
                                    <input type="text" placeholder="Username" name="username" id="username">
                                    <i class="user icon"></i>
                                </div> …
Run Code Online (Sandbox Code Playgroud)

html css semantic-ui

11
推荐指数
1
解决办法
5万
查看次数

如何使用语义UI将生成的工件与主构建分开?

我试图弄清楚如何将语义UI与我的基于gulp的前端工具链集成.

npm工件semantic-ui包括一个交互式安装程序,它将semantic.json文件写入我的项目的根目录,并将较少的文件,gulp任务和一些配置安装到我的项目中.所有这些文件都将放在semantic.json中指定的单个基目录的子目录中.

我不希望我的项目的git存储库中有任何依赖项实现文件或任何生成的文件,因为这会污染修订历史记录并导致不必要的合并冲突.我非常希望semantic.json只提供.gitignore语义基目录.在npm install,语义安装程序应该将所有内容安装到指定的基本目录中semantic.json.在构建时,我希望生成的工件进入一个单独的dist目录,该目录不在语义基目录下.

但是,如果我这样做,安装程序将失败,并显示一条消息,指出它无法找到要更新的目录,而是将我放入交互式安装程序中.这不是我想要的,因为这意味着我的构建不再是非交互式的(这会导致CI构建失败).

如何将Semantic UI集成到我的构建中,而无需将Semantic及其生成的工件提交到我的git存储库中?

npm semantic-ui gulp

11
推荐指数
1
解决办法
1574
查看次数

.gitignore中的语义UI

我最近开始尝试使用语义UI.我在一个项目中使用它,我保留在git repo中.

我将Semantic文件添加到项目根目录中的语义文件夹中,并使用所有默认设置.我可能会或可能不会在以后更改这些设置.

我的问题是,如何正确地将文件夹添加到git?gulp如果可能的话,我不想添加以后可以简单地重建的文件.我应该添加哪些文件以及应该忽略哪些文件?

git semantic-ui

11
推荐指数
2
解决办法
2167
查看次数

隐藏仅限移动设备的元素 - 语义UI

我有隐藏移动设备图像的问题.我正在使用语义UI框架.在文档中我发现了一些类:

  1. 仅限移动设备 - 仅显示低于768像素
  2. 仅限平板电脑 - 仅显示768px - 991px之间
  3. 仅限计算机 - 将始终显示992px及以上

例如,我使用"仅限计算机"类来隐藏平板电脑和手机上的图像,但结果让我感到困惑.

<div class="ui grid stackable">
  <div class="row middle aligned">
    <div class="nine wide column">
      <h1 class="ui header blue">Default Header.</h1>
    </div>
    <div class="seven wide computer only column">
      <img class="ui image" src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title="">
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/3xkrx/318/

css semantic-ui

11
推荐指数
3
解决办法
2万
查看次数

集成React-Semantic-UI和redux-form

我正在使用redux-form(awesome libs)在React应用程序中处理我的表单和redux存储.一切运作良好,重要的形式和嵌套的json输出.

我正在尝试使用带有redux-form的React-Semantic-UI组件.我在文档中搜索了如何将自定义组件与redux格式集成,我们在这里: http: //redux-form.com/6.5.0/docs/faq/CustomComponent.md/似乎很完美.

但是当我整合Semantic和它时,它会起作用.

这是我用伪代码进行的简单测试:

const TestComponent = props => (
<Form>
     <Field name="dropdownTest" component={ TestSelect } />
</Form>
)
Run Code Online (Sandbox Code Playgroud)

这里我的CustomComponent使用Dropdown.您可以在此处找到下拉文档和道具(onChange&value):

http://react.semantic-ui.com/modules/dropdown

import Form , Dropdown from 'semantic-ui-react'
import {myOption from './myOption'

const TestSelect = field = (
   <Form.Field>
            <label> Test dropdown </label>
             <Dropdown option={myOption} selection 
                                   value={{val : field.input.value}}
                                   onChange={ param => field.input.onChange(param.val)} />
     </Form.Field>
)
Run Code Online (Sandbox Code Playgroud)

在文档中,我在自定义组件上添加了值&onChange道具.

我在这里显然有些遗漏.有人用redux-form和semantc ui有简单的例子吗?

谢谢你的帮助.

javascript reactjs semantic-ui redux redux-form

11
推荐指数
1
解决办法
6493
查看次数

基于Semantic-UI Grid的页面布局:无法移除排水沟

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

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

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

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

html css semantic-ui

10
推荐指数
1
解决办法
2531
查看次数