In Slate, I want to be able to toggle and show/hide widgets on a page (i.e. Containers widgets full of widgets or specific widgets based on a user interaction like clicking a toggle).
It's unclear to me how to do this. Is it possible with CSS?
Also, can I do this based on which user views the page?
You can definitely do this with CSS. Slate widgets have an "Additional CSS Classes" section that can conditionally apply any CSS class that you've created.
To do this, you would need to create a CSS class that hides your widget appropriately (i.e. hidden), and conditionally apply it based off of the state of the toggle.
For example:
{{#if w_toggle.on}} hidden {{/if}}
To do this based off of which user is on the page would be similar. You would just need a way to determine if the specified user is okay to view the page or not, which can be done in a function or something similar.
NOTE: Hiding widgets based off of CSS is NOT SECURE. Anything that can be done with CSS can be undone with CSS. If you choose to hide widgets using CSS, please be advised that CSS-savvy users can un-hide the widget if they so choose.
For other patterns related to showing and hiding or conditionally styling widgets, check out the section on UX/UI Considerations in the Slate Development Best Practices guide in the Foundry documentation.
Related
My application needs a sidebar that shows a list of options and highlights the selected one. I do not want a drop-down as that requires the user to click it first before all the options can be seen.
This is the sort thing I have in mind (example from w3schools website):
I opened up the Firefox DevTools and saw they used <a> elements, however I don't believe this to be the correct approach for my app as it as a SPA and as such does not have separate pages.
What would be the most semantic way to write the markup?
I was looking at the source code for the header on the Polymer website so I could build a similar one for my app.
They use iron-selector for the menu items.
But on their documentation page for responsive-navigation-pattern they use paper-tabs for the same kind of header implementation with tabs.
What is the difference between iron-selector and paper-tabs and which one should I use if I want a similar header for my app?
The <iron-selector> element manages item selection and has no template or styling (i.e., it doesn't look like the top nav on Polymer's site out of the box). If you want a barebones control, where you could fine-tune the styling of the selected items yourself, this element would be ideal.
The <paper-tabs> element also manages item selection, but includes its own styling (which follows material design) and navigation controls to access the tabs out of view. If you prefer a responsive control that uses material design and other customizable styles, this might be a better choice.
The <iron-selector> on the main page of the Polymer site is styled similarly to the <paper-tabs> element's default style, and since that's the look you're after, I recommend <paper-tabs> mainly because it achieves your goal with less effort required.
When it comes to styling a forms based web app (or pages, components, etc.), how do I build it using the least amount of CSS, style tags, style classes, and style attributes possible?
My understanding was that the paper-* elements implement an opinionated material design style that can be used to build components with similar material design out-of-the-box.
I'm trying to build an internal app for employees at my company (thus, as long as it's not bad, styling is not that important). It's basically a bunch of forms pages that look like many of the protoypical menu-driven web sites (like the polymer docs pages):
Nav menu on the left
Menu selected content on the right - text reports and forms mostly
header/logo on top
However, when I tried to copy some things (like item list boxes) out of the elements catalog like the paper-item demos I couldn't match the look in my components simply by copying the HTML. The demo HTML referenced classes for which I had to copy a bunch of <style> tags in order to get them to work.
It felt like a lot of re-inventing the wheel to copy an often repeated look.
I'm not sure if I understand your problem. The paper-* elements aren't meant to build components, they ARE components. If you want to use them you have to go the full way. If you use them as intended, they look like in the demos out of the box. You can't just copy the HTML. A more traditional way to get the material-design-look is Materialize or Googles own MaterialDesignLite.
I wish to create custom widgets using GTK+. For example I would like to create a checkbox that instead of a tick it displays an icon or gtk image that i have created. I have read the styling documentation, but it doesn't seem to allow you to change the widget.
Is it best to create a new widget or can i just customise the GTKCheckButton style?
A GtkCssProvider allows basic styling of widgets, if you need anything fancy (like special shaped windows) you will need to implement / derive your own.
Styling form elements using css can be problematic since every browser render tag in different way (just like when safari render checkbox).
Okay lets ignore safari for a while, skinning input and button are rather easy but how to completely skin select, checkbox, radio, etc.
See this pages:
Checkbox skinning
Select skinning
Radio skinning
I've heard some JS framework such as EXTJS or MooTools can do that, but i don't want a large scale framework solution, just independent JS and we can modify the skin as we like, please no JQuery solution, since i don't use it.
Any idea to do that without using some specific framework?
If you want complete control, then you generally have to replace the browser controls completely and fake them with other elements, stylesheets and scripting.
If you don't want to use a framework, then it basically comes down to DIY.
That said, the whole concept have a couple of problems.
Trying to get the controls to behave how the user expects (given input from clicking, double clicking, triple clicking, right clicking, dragging, arrow keys, the control key, etc, etc, etc) is hard.
The controls might not look as the user expects.
Personally, I'd generally try to let form controls stick to the system defaults and not try to deviate from them. Give users what they expect.
Today there are quite many javascript solutions which allow a wide range of customization for form elements styling. A quick google came up with a few nice ones:
Perhaps the best known is the Bootstrap CSS framework:
https://getbootstrap.com/docs/4.0/components/forms
https://www.psd2html.com/js-custom-forms (jQuery plugin)
https://purecss.io/forms
https://github.com/select2/select2
https://github.com/harvesthq/chosen
Checkboxes/Radios:
https://codepen.io/vsync/pen/aBOOZB
https://codepen.io/vsync/pen/wKkuz
https://codepen.io/manabox/pen/raQmpL
Today you can find many kinds of form element styling on Codepen.com
Old answer (from May 16 '09):
yes, it is quite easy.
you can use niceforms, which is independet script for making
nice looking forms, then you can modify the graphics images /
CSS as your wish.
The idea is, coding something that looks the same with same
funcionality but different design, then you need to "give it
life" with some javascript magic :)
then, you have to have ilsteners all over the place, to check
what the user clicked, than you need to reflect that same value
to the pre-hidden form element the corresponds to the "fake"
one. means, to manipulate it. then when you send the form, the
right values are places via JS.