标签: semantic-ui
如何在语义UI按钮中切换内容？
的文档说的按钮可以被格式化,以开启或关闭,但给定的例子仅是
<div class="ui toggle button">
Vote
</div>
这当然不起作用.检查示例的源代码会显示以active编程方式添加的类.
我可能遗漏了一些简单的东西,但是如何在该示例中创建一个切换按钮？指定切换内容的语法是什么？
推荐指数
解决办法
查看次数
如何使用Jest正确模拟第三方库(如jQuery和语义UI)？
在过去的几周里,我一直在学习React,Babel,Semantic UI和Jest.我没有真正遇到太多问题,我的组件没有在浏览器中呈现,但我在使用Jest编写单元测试时遇到了渲染问题.
SUT如下:
EditUser.jsx
var React = require('react');
var { browserHistory, Link } = require('react-router');
var $ = require('jquery');
import Navigation from '../Common/Navigation';
const apiUrl = process.env.API_URL;
const phoneRegex = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/;
var EditUser = React.createClass({
getInitialState: function() {
return {
email: '',
firstName: '',
lastName: '',
phone: '',
role: ''
};
},
handleSubmit: function(e) {
e.preventDefault();
var data = {
"email": this.state.email,
"firstName": this.state.firstName,
"lastName": this.state.lastName,
"phone": this.state.phone,
"role": this.state.role
};
if($('.ui.form').form('is valid')) {
$.ajax({
url: apiUrl + …推荐指数
解决办法
查看次数
语义UI - 用于布局的ui网格最佳方法(行/列与段)
我是Semantic UI的新手,我正在尝试使用下面的布局设计一个网页.看文档,我决定使用ui page grid.我还决定在网格外定义顶部固定菜单.
我的第一种方法是这样的:
<body>
<div class="ui page grid">
<div class="three column row">
<div class="column"> Horizontal section, column 1</div>
<div class="column"> Horizontal section, column 2</div>
<div class="column"> Horizontal section, column 3</div>
</div>
<div class="two column row">
<div class="column">
<div class="row"> Left column, row 1</div>
<div class="row"> Left column, row 2</div>
<div class="row"> Left column, row 3</div>
</div>
<div class="column">
<div class="row"> Right column, row 1</div>
<div class="row"> Right column, row 2</div>
</div>
</div>
</div>
</body> …推荐指数
解决办法
查看次数
哪一个是正确的？语义UI:响应可见性
我是semantic-UI的新手,我喜欢这个框架.他们有大量有用的文档,更令人困惑的事情.
响应能见度如何运作？
容器中只有[仅移动平板电脑只有小型显示器只有大型显示器] ...而且有些代码,我发现有[只有电脑,只有设备]？有什么区别？谢谢.
推荐指数
解决办法
查看次数
语义UI图标 - 不加载字体
我正在使用Semantic UI CSS框架构建一个网站,现在我想使用它的一些图标.
这是HTML:
<h1>Title<i class="lab icon"></i></h1>
我已经链接了semantic.css,但我认为我还需要做其他事情来使图标工作？我也尝试过连接它:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
但它仍然无效.我错过了什么？
推荐指数
解决办法
查看次数
如何在语义UI中提交表单？
推荐指数
解决办法
查看次数
顶部导航栏与主要内容重叠
我正在将我的登陆页面从Bootstrap转换为Semantic-UI.该页面的位置固定在顶部导航栏上.主要内容分为两列(3-cols和9-cols).左列用于显示侧栏,右栏用于显示当前内容.
我试图复制并粘贴Semantic-UI的演示页面.导航栏高45px.我注意到第一个45px的主要内容是重叠的.
<link href="//semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<script src="//semantic-ui.com/dist/semantic.min.js"></script>
<div id="navbar" class="ui fixed inverted main menu">
<div class="container">
<div class="title item">
<b>Dashboard</b>
</div>
</div>
</div>
<div id="maincontent" class="ui bottom attached segment pushable">
<div id="sidebar" class="ui visible left vertical sidebar menu">
<a class="item">First Item</a>
<a class="item">Second Item</a>
<a class="item">Third Item</a>
<a class="item">Fourth Item</a>
<a class="item">Fifth Item</a>
</div>
<div id="content" class="pusher">
<div class="ui basic segment">
<h3 class="ui header">Application Content</h3>
<p>First paragraph...</p>
<p>Second paragraph...</p>
<p>Third paragraph...</p>
</div>
</div>
</div>我目前的解决方法是在导航栏后添加一个45px高的占位符.
<div style="height:45px"></div>
我很确定有一些好的CSS样式名称可以修复内容重叠.
推荐指数
解决办法
查看次数
语义UI中心非流动菜单？
我有两个菜单,一个固定在底部,另一个固定在顶部.我的问题是双重的.我希望它们出现在屏幕的中心,只是它们内容的宽度(而不是默认的流畅).
我在文档中没有发现任何表明这是可能的,所以可能解决方案是用CSS修改它？
任何帮助将不胜感激.
推荐指数
解决办法
查看次数
最后是语义UI页脚
我在我的项目中使用Semantic-UI.我创建了一个索引页面,一切都可以正常使用元素(导航栏,页脚等).
现在我开发了一个注册页面,但页脚没有到达页面的末尾,我该怎么办？
页脚代码:
<div class="ui inverted vertical footer segment">
<div class="ui container">
Travel Match 2015. All Rights Reserved
</div>
</div>
注意:我在页脚中没有任何css规则,只有semantic-ui添加的规则
更新: 导航栏代码:
<div class="ui inverted segment">
<div class="ui container">
<div class="ui inverted secondary menu">
<div class="item">
<i class="plane icon app-icon"></i>
</div>
<div class="right item">
<a href="/signup">Signup</a>
</div>
</div>
</div>
</div>
表格代码:
<form class="ui large form container">
<div class="ui stacked segment">
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="email" placeholder="E-mail address">
</div>
</div>
<div …推荐指数
解决办法
查看次数
使用Semantic-UI-React进行表单验证
我正在使用官方的Semantic UI React组件来创建Web应用程序.我的注册页面上有一个表单,其中包含电子邮件字段,密码字段和确认密码字段.
import {Component} from 'react';
import {Button, Form, Message} from 'semantic-ui-react';
import {signUp} from '../../actions/auth';
class SignUp extends Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e, {formData}) {
e.preventDefault();
//
// Potentially need to manually validate fields here?
//
// Send a POST request to the server with the formData
this.props.dispatch(signUp(formData)).then(({isAuthenticated}) => {
if (isAuthenticated) {
// Redirect to the home page if the user is authenticated
this.props.router.push('/');
}
}
}
render() {
const …推荐指数
解决办法
查看次数
标签 统计
semantic-ui ×10
html ×6
css ×5
javascript ×2
jquery ×2
reactjs ×2
babeljs ×1
button ×1
css3 ×1
font-awesome ×1
forms ×1
grid ×1
grid-layout ×1
html5 ×1
jestjs ×1
validation ×1