标签: semantic-ui
Semantic-ui下拉列表无效
我在HTML表单中集成下拉菜单时遇到问题.我已经尝试了我能做的一切以及我在网上找到的东西,但它仍然无效.我发现这个代码在JSFiddle上运行正常.脚本路径很好,脚本正确加载.
我错过了什么？
<html>
<head>
<meta charset="UTF-8">
<link href="../semantic/packaged/css/semantic.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="../semantic/packaged/javascript/semantic.min.js"></script>
<script>
$('.ui.dropdown').dropdown();
</script>
</head>
<body>
<form class="ui form segment" style="width:400px; margin:auto;" method="POST" action="register_do.php">
<div class="field">
<label>??</label>
<div class="ui fluid dropdown selection">
<input type="hidden" name="grade">
<div class="default text">??</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="10">?1</div>
<div class="item" data-value="11">?2</div>
<div class="item" data-value="12">?3</div>
</div>
</div>
</div>
<div class="ui buttons">
<button class="ui red submit button">??</button>
<div class="or"></div>
<div class="ui button" onClick="history.back();">??</div>
</div>
</form>
</body>
</html>
推荐指数
解决办法
查看次数
是否存在与Bootstrap的.container类等效的语义UI？
使用Twitter Bootstrap一段时间后总是想要更多管理UI功能,我决定尝试使用Semantic UI.语义文档比Bootstrap更简洁,但每个单独的工具都很容易实现.但是,我已经开始创建一个基本的用户界面来尝试语义用户界面,我很难搞清楚一些基本的东西,比如什么用作Bootstrap的合适替代品.container等.
推荐指数
解决办法
查看次数
语义UI - 垂直居中的div
有没有已知的方法<div>使用Semantic UI的Web开发框架来集中标签,而不添加我自己的CSS样式？
我在文档中尝试了几个与位置相关的标签,例如<div class="centered grid'>,这些只适用于水平居中.
这不是一个具有挑战性的实施案例,我只是感到惊讶,因为垂直居中并不包含在Web开发框架中,而且我很好奇我的Google搜索和眼睛是否已经对它进行了抨击.在创建自定义样式之前,我更愿意遵守框架样式.我知道有几种方法可以实现我自己的垂直居中(这是我认为最不可取的选项),但是我更喜欢使用框架中的类.
推荐指数
解决办法
查看次数
改变Laravel的Gulp/Elixir`watch`任务
我想在我的新项目中使用Laravel的Elixir和Semantic UI.
在Semantic UI文档中,他们建议如何将gulp任务包含在当前项目的gulpfile中.在Laravel,他们(简要地)建议如何扩展Elixir.但是如何在watch命令中包含另一个gulp任务？
目前我正在运行gulp watch watch-ui,但我想将watch-ui任务包括在内watch.可能吗？
这是我目前的gulpfile.js:
var gulp = require('gulp');
var elixir = require('laravel-elixir');
var semantic = {
watch: require('./resources/assets/semantic/tasks/watch'),
build: require('./resources/assets/semantic/tasks/build')
};
gulp.task('watch-ui', semantic.watch);
gulp.task('build-ui', semantic.build);
elixir(function(mix) {
mix.task('build-ui');
});
推荐指数
解决办法
查看次数
Angular 2 + Semantic UI,组件封装打破了风格
我正在使用Angular2和Semantic UI作为css库.我有这段代码:
<div class="ui three stakable cards">
<a class="ui card"> ... </a>
<a class="ui card"> ... </a>
<a class="ui card"> ... </a>
</div>
卡片很好地呈现在它们之间的空间.像这样:请参阅链接中的卡片部分
因为卡片代表某种视图我想到用它制作一个组件,所以现在代码是:
<div class="ui three stakable cards">
<my-card-component></my-card-component>
<my-card-component></my-card-component>
<my-card-component></my-card-component>
</div>
但现在风格破碎了,它们之间再也没有空间了.
有没有什么好办法解决这个问题？
我想做的第一件事是:
my-card-component OLD template:
<a class="ui card">
[some junk]
</a>
|||
VVV
my-card-component NEW template:
[some junk]
and instantiating like:
<my-card-component class="ui card"></my-card-component>
or like:
<a href="?" my-card-component></a>
但这并不令人满意,因为我希望能够传入一个对象并且组件会自动设置[href]=obj.link.
在AngularJS 1.0中,有一个replace: true属性可以满足我的需求,在Angular2中有类似的东西吗？
css semantic-ui angular2-directives angular2-template angular
推荐指数
解决办法
查看次数
语义UI下拉菜单 - 如何将其定位在开放链接的左侧？
我想打开打开下拉列表的链接左侧的下拉列表,这样就可以在像iPhone这样的小屏幕上看到它.有一些标准的方法吗？
这是我的下拉列表定义 - 让一些设置(类)告诉下拉列表正确对齐,而不是左侧链接,这将是很好的.
<div class="four wide mobile three wide computer column">
<div class="ui compact dropdown doNotClose">
<i class="dropdown icon"></i>
<span class="ui tiny header">Filters</span>
<div class="menu">
<div class="item">
<div class="ui toggle checkbox">
<input type="checkbox" checked>
<label>Acknowledge</label>
</div>
</div>
<div class="item">
<div class="ui toggle checkbox">
<input type="checkbox" checked>
<label>Active</label>
</div>
</div>
</div>
</div>
</div>
推荐指数
解决办法
查看次数
用语义ui代码突出显示
我正在为网站使用semantic-ui,我想知道代码突出显示是否是它支持的实际功能.
整个库的文档页面中都显示了代码块,其中包含突出显示的代码,但我找不到有关如何在项目中使用它的任何详细信息.
在查看了他们页面的源代码后,我尝试创建以下没有突出显示代码的div:
<div class="ui segment">
<div class="ui ignored code" data-type="bash" data-title="commands">
#!/bin/bash
# test
echo 'hello there'
</div>
</div>
还试过包括这个脚本:http: //semantic-ui.com/javascript/library/highlight.min.js
我编码错了还是代码突出显示甚至不是库的一部分？
推荐指数
解决办法
查看次数
语义ui的`gulp build`给出错误'ENOENT:没有这样的文件或目录'
版:
gulp@3.9.1
我在交互式设置过程中安装semantic-ui 了npm install并通过了默认设置.
但是,当我gulp build从/semantic文件夹中做到时,我得到以下错误:
[20:52:27] Starting 'build'...
Building Semantic
[20:52:27] Starting 'build-javascript'...
Building Javascript
[20:52:27] Starting 'build-css'...
Building CSS
[20:52:27] Starting 'build-assets'...
Building assets
[20:52:28] Created: dist/components/site.js
[20:52:28] Created: dist/components/site.min.js
[20:52:28] Created: dist/components/form.js
[20:52:28] Created: dist/components/form.min.js
[20:52:28] Created: dist/components/accordion.js
[20:52:28] Created: dist/components/accordion.min.js
[20:52:28] Created: dist/components/checkbox.js
[20:52:28] Created: dist/components/dimmer.js
[20:52:28] Created: dist/components/checkbox.min.js
[20:52:28] Created: dist/components/dimmer.min.js
[20:52:28] Created: dist/components/dropdown.js
[20:52:29] Created: dist/components/embed.js
[20:52:29] Created: dist/components/dropdown.min.js
[20:52:29] Created: dist/components/reset.css
[20:52:29] Created: dist/components/reset.min.css
[20:52:29] …推荐指数
解决办法
查看次数
如何将语义ui项放入html中的段？
我想把每个语义ui item放入一个segment.什么是在语义ui/html中执行此操作的正确方法？我应该放在item里面segment,segment里面item还是不放？
项目
物品代码:
<div class="ui divided items">
<div class="item">
<div class="image">
<img src="/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">12 Years a Slave</a>
<div class="meta">
<span class="cinema">Union Square 14</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui label">IMAX</div>
<div class="ui label"><i class="globe icon"></i> Additional Languages</div>
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">My Neighbor Totoro</a>
<div class="meta">
<span class="cinema">IFC Cinema</span>
</div>
<div class="description"> …推荐指数
解决办法
查看次数
语义ui react将下拉列表值设置为state
如何在状态中选择下拉列表中的值。这是我的代码iam为名称字段获取值，但是下拉列表不起作用，有人可以找出我所缺少的内容吗？
MyComponent.js
import React,{Component} from 'react';
class MyComponent extends Component{
state={
data:{
name:'',
subject:''
}
}
onChange = e =>
this.setState({
data: { ...this.state.data, [e.target.name]: e.target.value }
},()=>{
console.log(this.state.data);
}
)
render(){
const {data}=this.state;
const subjects= [
{text: '1',value: 'kannada'},
{text: '2', value: 'english'},
{text: '3',value: 'hindhi'}
]
return(
<div>
<Input
name="name"
onChange={this.onChange}
placeholder='Your name ...'
/>
<Dropdown
placeholder='Select Subject'
name="subject"
onChange={this.onChange}
selection
options={subjects}
/>
</div>
)
}
}
export default MyComponent;
如何在状态中选择下拉值？我正在为名称字段获取更改的值，但没有获取下拉列表的值。
推荐指数
解决办法
查看次数
标签 统计
semantic-ui ×10
css ×4
gulp ×2
html ×2
javascript ×2
angular ×1
dom ×1
gulp-watch ×1
html5 ×1
jquery ×1
laravel ×1
laravel-5 ×1
node.js ×1
reactjs ×1