semantic-org / semantic-ui Goto Github PK
View Code? Open in Web Editor NEWSemantic is a UI component framework based around useful principles from natural language.
Home Page: http://www.semantic-ui.com
License: MIT License
Semantic is a UI component framework based around useful principles from natural language.
Home Page: http://www.semantic-ui.com
License: MIT License
should add a z-index:>10 to.ui.form.loading:after ...
Does you have any plans to add any kind of AJAX-validations support for the form validation module? I think, it would be great.
The border corners in the table segments in modules/accordion
...
...should look like that of the colored segments in elements/segment
.
The tables on the doc pages of the other modules use celled definition table segments instead of colored table segments. Do the definition tables supersede the colored tables? It would be nice to have an example of a colored table segment in collections/table
.
Do you have Modal module in your Semantic UI?
Thanks!
Hi,
I've used this lib for the first time, I love the design and feel!
I've found a couple of problems, this is related to the modal:
To show the modal I use:
$('.ui.modal.signoff').modal('toggle')
This is the inspected HTML:
<div class="ui dimmer page visible active">
<div class="ui signoff modal transition visible active" style="margin-top: -198px;">
...
</div>
</div>
After closing the modal, this is the HTML (no more classes on the modal div!):
<div class="ui dimmer page hidden">
<div class="" style="margin-top: -198px;">
....
</div>
</div>
Alex
To make inline validation perfect (the last example here http://semantic-ui.com/modules/form.html) according to the UX, the scenario should be like that:
In both the sidebar and the main button on the homepage, this isn't very semantic.
There is a download icon available on Fontello.
Class stack you're using:
inverted circular red upload icon
What it should probably be:
inverted circular red download icon
I wnat to talk about the possibility of adding a select dropdown with input search, some like Select2, Selectize or Choosen... but restyled to fit to the apperance of semantic-ui.
With an animation when the dropdown appear.
Would be epic. I think would be very useful.
The Dropdown and Dimmer hide and show events are being enqueued and executing multiple times.
To reproduce that try clicking the dropdown or dimmer button multiple times.
It would be great if you'll make your project available in Nuget.
Thanks in advance!
Active style of secondary menu disappear while scroll on the page UI Definitions.
hi
thanks a lot for your work i love semantic-ui
is there a special reason for choosing fontello ?
I was wondering if you are planning to provide multi-screen support, something like ink's:
http://ink.sapo.pt/layout#nav-screens
or twitter bootstrap responsive utilities:
http://getbootstrap.com/css/#responsive-utilities
(I think I like ink's approach better...)
Miscategorized
<div class="field">
<label>Password</label>
<div class="ui right labeled icon input">
<input type="password">
<i class="circular inverted teal lock icon"></i>
</div>
</div>
The icons on the last example (Inverted) on this page are cropped on top and left side.http://semantic-ui.com/elements/icon.html
In the conditional buttons there is no the chance to choose the word of inside.
Imagine that someone wants to put "and" instead, or just a word in another language.
I hope you will add autocomplete to your project soon... Thanks!
i want to say well done ... Good Job ๐ I think it would be nice to add more specification such as
I may be not that experienced with UI but let me show what happens when I try to pass onHide function into the modal.
At first, I initialise it with these params. And I can see that the params were passed successfully:
debug: false
performance: false
onHide: ->
console.log "Hided!"
onShow: ->
console.log "Shown!"
But if I try to show it:
$('.ui.modal').modal('show')
I get a modal with default params. E. g. with debug: true and without callbacks.
What am I doing wrong?
the accordion example on the page
http://semantic-ui.com/modules/accordion.html
is not working
In the second example of dimmer documentation to close it you have to click out of the centered div, and could mislead the user.
I think would be better if close when you click anywhere.
Hi,
I'm displaying a radio group inside a modal and the radios are not selectable (clickable). Might be a z-index problem?
<div class="ui dimmer page visible active">
<div class="ui signoff modal transition visible active" style="margin-top: -198px;">
<i class="close icon"></i>
<div class="header">
...
</div>
<div class="content">
<div class="left">
<img class="ui image" src="images/avatar.jpg">
</div>
<div class="right">
<div class="ui header">...</div>
<div class="ui form">
<div class="grouped inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="example" checked="checked" value="1">
<label></label>
</div>
<label>A</label>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="example" value="2">
<label></label>
</div>
<label>B</label>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="example" value="3">
<label></label>
</div>
<label>C</label>
</div>
</div>
</div>
</div>
</div>
<div class="actions">
...
</div>
</div>
</div>
for example: http://screenshot.su/show.php?img=020e2ad16a6ff85c2a957355f1dee106.jpg
google chrome
ver 29.0.1547.66 m (last)
if you have a list of items, you probably have to work with UL followed by LI
and if you have a short piece of code inside your menu, you shouldn't use DIV, because W3C recommends SMALL tag to do this.
or width should adapt itself to the device-width ?
This project looks amazing. I can't find any info on browser support. Did I miss it or has it not been decided yet? Will it be similar to bootstrap? http://getbootstrap.com/getting-started/#browsers
If it hasn't been decided yet, can I vote for IE8+ support as that is our clients requirements.
It would be awesome if font-awesome-ish icon styles were added.
E.g.
When attempting to use the Slider/Toggle they appear to be static
JSFiddle example
http://jsfiddle.net/PPHkQ/1/
As mentioned in MSDN (like http://msdn.microsoft.com/en-us/library/ie/hh772233(v=vs.85).aspx), -ms- prefix is not needed.
I want a menu that when I click an item, it scrolls to the part of the page it's pointed at.
<div class="field">
<label>Username</label>
<div class="ui labeled icon input">
<input type="password" placeholder="Username">
<i class="user icon"></i>
<div class="ui corner label">
<i class="asterisk icon"></i>
</div>
</div>
</div>
How the corner label icon looks if the icon i
in the input field and the class icon
in the div
are removed:
<div class="field">
<label>Username</label>
<div class="ui labeled input">
<input type="password" placeholder="Username">
<div class="ui corner label">
<i class="asterisk icon"></i>
</div>
</div>
</div>
Also: input type should not be "password" for the username.
It would be just great :)
Please rework the whole codebase, especially the examples, to make the project semantic, as it states itself to be.
Where is the semantic in styling a DIV as a button? Use the BUTTON-element instead. It has a special purpose and meaning. And purpose and meaning are what drives semantics. Not the naming of a class.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.