我正在使用(JavaScript)ES6语法通过babel转换器和preset-es2015插件以及semantic-ui样式编写一个新的应用程序.
import * as stylesheet from '../assets/styles/app.scss';
import * as jquery2 from '../dist/scripts/jquery.min';
import * as jquery3 from '../node_modules/jquery/dist/jquery.min';
console.log($('my-app'));
<!DOCTYPE html>
<html lang="fr">
<head>
<body>
<script src="dist/app.js"></script>
</body>
</html>
.
??? app/
? ??? index.js
??? assets/
??? dist/
? ??? scripts/
? ? ??? jquery.min.js
??? index.html
??? node_modules/
? ??? jquery/
? ? ??? dist/
? ? ? ??? jquery.min.js
??? package.json
??? tests/
… …哪一个是最好用的,如果可能的话,请提供这两者的不同之处和优点.
Semantic-ui vs Bootstrap 我正在尝试构建我的UI并且真的很困惑,因为它要使用什么.
请建议我最好的,如果可能的话,举例.
我一直在尝试使用Semantic-UI构建菜单.我无法让下拉菜单工作.我拿了一份菜单示例页面的副本,然后拉出除分层菜单以外的所有内容,并将其放在一个单独的文件中.尽管没有错误,但只有下拉菜单才会起作用.谁能告诉我我错过了什么？
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Script-Type" content="text/jscript" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" class="ui" href="http://semantic-ui.com/build/packaged/css/semantic.min.css">
<link rel="stylesheet" type="text/css" href="http://semantic-ui.com/stylesheets/semantic.css">
<script src="http://semantic-ui.com/javascript/library/jquery.min.js"></script>
<script src="http://semantic-ui.com/javascript/library/history.js"></script>
<script src="http://semantic-ui.com/javascript/library/easing.js"></script>
<script src="http://semantic-ui.com/javascript/library/ace/ace.js"></script>
<script src="http://semantic-ui.com/javascript/library/tablesort.js"></script>
<script src="http://semantic-ui.com/javascript/library/waypoints.js"></script>
<script src="http://semantic-ui.com/build/packaged/javascript/semantic.min.js"></script>
<script src="http://semantic-ui.com/javascript/semantic.js"></script>
</head>
<body class="menu" >
<div class="ui tiered menu">
<div class="menu">
<a class="active item">
<i class="users icon"></i>
Friends
</a>
<a class="item">
<i class="grid layout icon"></i> Browse
</a>
<a class="item">
<i class="mail icon"></i> Messages
</a>
<div class="right menu">
<div class="item"> …如何使用CDN将语义UI包含到HTML页面？CDN链接是https://cdnjs.com/libraries/semantic-ui,但如何使用它？
在屏幕中间对齐语义ui网格的最佳模式是什么？
这个css理想的是这个.
.div{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}
但是在语义上,这与网格看起来不太好.
这是我的HTML的一部分.
<div class="ui grid container">
<div class="ui center aligned three column grid">
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
是否有像bootstrap datepicker这样的语义ui的日期选择器？我搜索了他们的网站.但未能得到.
Jquery datepicker工作得很好,但UI对我的项目看起来并不好看.
我正在尝试使用Webpack + Semantic UI和Vue.js,我找到了这个库https://vueui.github.io/
但是存在问题:
ERROR in ./~/vue-ui/components/sidebar/sidebar.jade
Module parse failed: /Project/node_modules/vue-
ui/components/sidebar/sidebar.jade Unexpected token (1:24)
You may need an appropriate loader to handle this file type.
所以我安装了玉(哈巴狗),但仍然没有运气.
并且在github上有关于该lib的评论:
WIP,请勿使用(https://github.com/vueui/vue-ui)
我已经设法在我的模板中导入语义css,如下所示:
@import './assets/libs/semantic/dist/semantic.min.css';
但问题是我不能使用像dimmer和其他东西这样的semantic.js函数.
问题是我已经有了一些用语义编写的旧代码库,不使用任何其他css框架(bootstrap或materialize)会很好.
有没有优雅的方法在我的vue.js项目中包含语义UI？
javascript single-page-application semantic-ui webpack vue.js
我正在尝试获得一个语义ui(react)菜单列表,它应该与react路由器一起工作,这意味着我想使用Link组件react router
如果我用这个......
<Menu.Item name='profile'>
<Icon name='user' />
My profile
</Menu.Item>
......它给了我结果:
<a class="item">
<i aria-hidden="true" class="user icon"></i>
My profile
</a>
但我想得到类似的东西
<Link to='profile'>
<i aria-hidden="true" class="user icon"></i>
My profile
</Link>
这个不起作用,因为语法错误:
<Menu.Item name='profile' as={ <Link to='profile' /> }>
<Icon name='user' />
My profile
</Menu.Item>
javascript reactjs semantic-ui react-router semantic-ui-react
的文档说的按钮可以被格式化,以开启或关闭,但给定的例子仅是
<div class="ui toggle button">
Vote
</div>
这当然不起作用.检查示例的源代码会显示以active编程方式添加的类.
我可能遗漏了一些简单的东西,但是如何在该示例中创建一个切换按钮？指定切换内容的语法是什么？
我似乎无法在文档中的任何地方找到它.
有没有办法使用Semantic-UI语义垂直居中页面上的div :)
这是我正在尝试做的事情:
<div class="ui centered grid">
<div class="eight column wide">
<div>I want to be centered vertically on a page</div>
</div>
</div>
semantic-ui ×10
css ×3
html ×3
javascript ×3
jquery ×3
browserify ×1
button ×1
cdn ×1
css3 ×1
datepicker ×1
ecmascript-6 ×1
import ×1
react-router ×1
reactjs ×1
vue.js ×1
webpack ×1