I am very new. I want to customize my test app, and I know I can use SASS, but I see the components and I’d like to use the out-of-the-box designs rather than this simple white-grey design, like a sandbox app to play in and get to know the components.
I see the code generated for me in the “www” directory uses “ion” tags, but the online documentation uses div tags, and the classes are different so then I wondered what I am missing. Is the documentation old? Or does it not matter - div or custom tag?
For instance, in the index file generated for a quick tabs app, the nav-bar looks like this:
<ion-nav-bar class=“bar-stable nav-title-slide-ios7”>…</ion-nav-bar>
But the documentation I found the header CSS documentation, and became confused:
There was no clarity of the difference. I guess what I’d like to see is documentation for the ion tags, or at least an explanation. I’d like to play with the tags from example documentation to learn.
The ion- tagged elements are angular directives we have built. They include some extra functionality out of the box and can be found here.
1 Like
This is something I am addressing in the Ionic in Action book. I think the two types (CSS and JavaScript) should be merged into one list of components.
Essentially, if there is a CSS and JavaScript version of a component, the CSS version only provides the styling to visually display the component while the JavaScript version uses the CSS version and adds useful features that make the component interactive. You can use the CSS classes on the JavaScript version to modify the visual display (for example the navbar can use the bar classes).
Some components only have a visual aspect, and so they are only on the CSS list. Some components are programmatic and are only on the JavaScript list.
This is exactly the answer I was looking for, and as I can see the class selectors are interchangeable for the ion tags, eg. “bar-positive” for the nav-bar. That helps.