I'm writing a single page web application using AngularJS framework with angular-ui extension.
I want to create my own look and feel for all kind of GUI components like DropdownList, DatePicker and other custom components.
When should I write custom directives and when should I use HTML tags like div, and span whith css classes (borders, background, additional buttons when hovering and more) in order to accomplish that?
Is it better or worse to create custom directives or html tags with classes?
What do you think?
Thanks
Directives are used for DOM manipulation - if you can achieve what you want with only a class, then do it. If you need to use different HTML elements / alter the functionality of the elements, apply a directive.
Related
I am creating front end of Dashboard App using WebStorm IDE and React framework.
As I already created UI design, I want to continue with creating of layout. I want firstly create empty rectangles and then insert functions in them (not sure if it is the best workflow)
But there is a problem, that layout is a bit complicated, see picture:
How should I proceed?
Should I use nested div tags and insert them into render function? Or there is other solution?
Should I use nested div tags and insert them into render function?
Yes, that's exactly how you should proceed.
Use css to display them like you want. You can use front-end libraries to help you, like:
Material UI
React Bootstrap
If you want to use bootstrap, you can have a look at how to display the grid system.
You can also follow this tutorial from w3schools to learn more about flexbox and how it works only with css (without material or bootstrap)
Looking to create HTML elements as part of a Dart client side application.
There are multiple approaches to doing this.
Ideally the HTML template to create new elements would live with the rest of the HTML and not inline with Dart code.
Are there any options for separating HTML templates and Dart code?
Background
Common approaches to creating HTML content on the fly:
Create in Code, as explained here: How to create an HTML link in Dart?
Input as a String from Code, also explained in the above link.
Use Polymer, which does solve this, although appears to require boilerplate.
Polymer would appear to be overkill for use cases which don't require custom elements, data binding and other features.
There was at one point the DART HTML Template Library, work now stopped:
http://blog.sethladd.com/2012/03/first-look-at-darts-html-template.html
There is also the HTML5 'template' element. The HTML5 'template' tag has limited (50%) support at caniuse.com which currently limits it's applicability.
You can use the template_binding package which is what Polymer uses for its templates. You might also want to use the polymer_expressions package for a more powerful expression syntax.
The important bit is that you don't need all of Polymer to use those. Check out the polymer_expressions tests for examples of using template_binding without the rest of Polymer.
I'm using the accounts-entry package with my meteor project and want to customize the {{> entrySignUp}} and {{> entrySignIn}}. What do I put as a selector in CSS to do this? I tried putting them in a <div> but it didn't make a difference? Does anyone know how to do this?
You can look at packages/accounts-entry/client/views/signUp in your project to see the templates used. Or just use the browser developer tools to inspect the dom. Either way, you should be able to find the ids and classes you need to override in your styles.
The views have been designed to work well with bootstrap 3, but theres nothing stopping you from customizing it.
I am a fresh from XAML person. I am now building a HTML5 UI, where I need a dropdown box which will have items in a hierarchal view (need to have ul with li(s) inside dropdown). Each item also needs to have a check-box to its left. If this was XAML, I could've done it easily, because most elements are containers. But in HTML5, I've no idea what to do.
From my searching, what I've understood is that one way is to build a custom control using jQuery.
Is there a simpler way to achieve this in HTML5?
Thanks
I think the easiest way to do that is a jQuery (or any other JS UI Framework). You can also just use plain Javascript.
A combination of HTML and CSS is also possible. Just search "CSS Dropdown" and add some Checkboxes. I do not know a pure HTML5 solution.
I'm trying to see how I can make use of new visual effects in HTML5, while keeping the traditional HTML/JS/CSS separation of concerns.
Let's say I have a CSS file containing a theme for my application. I would like to enhance the theme so that it draws backgrounds and shapes dynamically using Canvas.
Obviously I am going to have to write JavaScript to do that, and include additional JS files. But can I:
use a CSS definition to include that JS, without changing existing HTML/JS code
associate Javascript drawing routines with a CSS selector
?
Can you:
use a CSS definition to include that JS, without changing existing HTML/JS code
associate Javascript drawing routines with a CSS selector
No, you cannot control JS with CSS, but what you could do is run the JS, and based on looking at the attributes of a defined style, build conditions in your code. So if you look at an element, such as #menu, then you can look at which background colour is in use and run code accordingly.