如何设置搜索下拉列表(选择)表单字段的选定项?我尝试使用以下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前端框架;-)
语义UI在菜单集合方面存在一些问题.简而言之,它根本没有响应,最接近它的是它们的"可堆叠"实现,只是简单地将菜单显示为堆栈.
这里的任何人都可以推荐一个很好的与语义ui集成的导航菜单吗?
感谢您的任何意见.
如何在Bootstrap中像语法ui一样偏移列?
例如,在bootstrap中,类为"col-sm-5 col-sm-offset-2"的列为5列宽,并跳过页面的前2列.
我通过运行创建了一个新的 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) 我正在为我的网站使用语义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) 我试图弄清楚如何将语义UI与我的基于gulp的前端工具链集成.
npm工件semantic-ui包括一个交互式安装程序,它将semantic.json文件写入我的项目的根目录,并将较少的文件,gulp任务和一些配置安装到我的项目中.所有这些文件都将放在semantic.json中指定的单个基目录的子目录中.
我不希望我的项目的git存储库中有任何依赖项实现文件或任何生成的文件,因为这会污染修订历史记录并导致不必要的合并冲突.我非常希望semantic.json只提供.gitignore语义基目录.在npm install,语义安装程序应该将所有内容安装到指定的基本目录中semantic.json.在构建时,我希望生成的工件进入一个单独的dist目录,该目录不在语义基目录下.
但是,如果我这样做,安装程序将失败,并显示一条消息,指出它无法找到要更新的目录,而是将我放入交互式安装程序中.这不是我想要的,因为这意味着我的构建不再是非交互式的(这会导致CI构建失败).
如何将Semantic UI集成到我的构建中,而无需将Semantic及其生成的工件提交到我的git存储库中?
我最近开始尝试使用语义UI.我在一个项目中使用它,我保留在git repo中.
我将Semantic文件添加到项目根目录中的语义文件夹中,并使用所有默认设置.我可能会或可能不会在以后更改这些设置.
我的问题是,如何正确地将文件夹添加到git?gulp如果可能的话,我不想添加以后可以简单地重建的文件.我应该添加哪些文件以及应该忽略哪些文件?
我有隐藏移动设备图像的问题.我正在使用语义UI框架.在文档中我发现了一些类:
例如,我使用"仅限计算机"类来隐藏平板电脑和手机上的图像,但结果让我感到困惑.
<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)
我正在使用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有简单的例子吗?
谢谢你的帮助.
我正在创建一个Web应用程序semantic-ui.我正在尝试创建一个具有侧边栏和主要内容区域的布局.起初,我认为使用网格是可行的方法,除了它们会导致一些问题:
<div class="four wide black column">,但这会导致列与其他内容重叠如此看来,电网不创建页面布局的最佳工具,虽然他们提供的功能,这使得他们对页面布局有用(如定义截面尺寸; four wide column,ten wide column等)
使用Semantic-UI布局Web应用程序的推荐方法是什么,例如简单的侧边栏和主要内容列?
semantic-ui ×10
css ×4
html ×2
javascript ×2
reactjs ×2
git ×1
gulp ×1
jquery ×1
menu ×1
npm ×1
redux ×1
redux-form ×1
typescript ×1
webpack ×1