I tried finding one in the default components, and the closest I found was "A progress bar can show activity" on this page: http://semantic-ui.com/modules/progress.html
Thanks #AVK. You're right, but it's not very pleasing. I found the way Semantic expects us to do it: they have Loaders: http://semantic-ui.com/elements/loader.html#text-loader . I'm hoping they have more components soon.
Related
I'm using Material-UI GridList to display some pictures in my React app. I'd like to have an IconButton on top of the image in my GridTile component. I can accomplish this by passing the button to the actionIcon prop. But it only shows up if I also pass a title prop. Looks like this when (title='image'):
Without the title prop, the overlay doesn't show. Passing title='' and title={null} both have the same result.
Is there any other way to have an IconButton on top of the image in a GridTile? My goal is to end up with something like this:
Thanks in advance, I appreciate any advice!
The GridTile component displays the overlay and actionIcon only if title evaluates to true (as of this writing, you can see that test around line 200 of the source). null, undefined, and an empty string all test out to false, which is why you're not seeing the overlay appear when you're using those values.
One workaround is to provide a title that has no impact on display but is not false, like a space (' '). For example, the following tile will have an overlay and visible actionIcon but effectively no title:
<GridTile
key={tile.img}
title={' '}
actionIcon={<IconButton><StarBorder color="white" /></IconButton>}
>
As far as I know, this is the only possible fix in material-ui v0 (short of implementing this feature yourself and submitting a pull request). For a better, more elegant solution, you're going to have to look towards material-ui v1.
Material-ui v1 has a GridListTileBar component which controls the display of the overlay, icon, and title. This gives you fine grained control over what to display, so that you can implement your desired behavior with no workarounds.
However, I know that a full transition to v1 (which has a lot of breaking changes) can be daunting. If you want to transition only partially, you can always install the two versions side by side. This will allow you to use the newest GridList and all of those features without having to change too much in the rest of your app.
All:
Could anyone show me some best practice about tooltip design, the tooltip in my project is like(I am currently using D3.js):
[1] It can be used across multiple charts, accepting html string
passed to it
[2] It need to be correctly position no matter if the
viewport has scale transformation applied or not
That is it. Thanks for help( modulized plugin-style is appreciated, event better if this tooltip can be a AngularJS directive)
I suggest you use Angular UI Bootstrap tooltips. You can find their documentation here.
I'd like to make a 'dashboard' page and show some figures in a graphical nice way.
My idea is to use an Illustrator design, export it as SVG and change the charts with CSS according to the values from the database.
Like these elements: http://graphicriver.net/item/infographic-elements/2656503?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=REDPENCILMEDIA
I would like to use those donut charts to visualize percentages. But how do I adjust the graphic with CSS (or jQuery).
Found some tutorials on d3.js and other libraries, but I'd like to use the Illustator design instead of generating the graph. Been on Google for 2 days now..
Any tips, hints, links, etc are welcome! Thanks :)
I think this is what you've been looking for: http://www.chartjs.org/
It's a lightweight js-library that allows you to make piecharts, doughnutcharts, .. easily.
Pretty easy to customize too.
Customization is always a pain in the ass for such things, but starting from scratch is much harder, so i highly recommend this.
I am really hoping someone can help me. I am trying to create a round menubar in CSS and I've searched and searched for solutions but have found nothing. I know how to create round areas (by setting the radius), and I know how to create a simple straight line menu using <ul> & <li> but, as said, I want to create a round one.
there is a picture of something alike what I'd love to get working:
If anyone could help me on this I'd be so thoroughly grateful.
Closest things I know of are these:
http://www.cssplay.co.uk/menus/cssplay-round-and-round.html
http://codepen.io/tgrant54/pen/lBHwK
Is that what you're after?
This menu looks almost like Path's Button.
You can find the link to Path's Button here.
You just need to modify it a bit so the menu displayed in full sphere.
This isn't something you really want to be doing in pure CSS.
You may be able to make circle shapes with border-radius, but you're not actually making a circular object -- it's still a regular box shape as far as the browser is concerned, just with the corners rounded off. This has absolutely no bearing at all on your ability to do anything else to do with circles or curves in CSS.
Yes, it's possible to do something along the lines you're after, by putting every character into its own element, and styling each of them with a specific position, but that's going to be painful, inflexible, and difficult to work with. If you really want to do this, there's a code generator you could try out here, but I'd say you're barking up the wrong tree.
If you want to do this kind of thing properly, what you really need to be thinking about is doing it in graphical format, using either Canvas or SVG, plus plenty of javascript code.
I'd suggest looking into a JS library like Raphael for this; there are people who have tried similar things already using Raphael, which may help you -- see here, for example: Radial Pie Menu With Raphael JS
Hope that helps.
I use the DDSSmoothMenu tree to build my categories tree. But, I don't know how to fix that problem:
as You can see, there are line-broken categories title. If someone used that menu, know how to force it to display the all titles in one line ? (like that two titles on the left)
As Anish's commented, explicitly setting the width got the job done. Thanks !