List of css elements used in ionic2 components

Ionic Framework ionic-v3
1

I am in the process of making a decision on whether to use ionic2 on a project I conceived a month ago. I realize ionic2 is still in beta phase but the potential is too much to pass. I like the fact that I can now use a properly typed language (typescript) on the client side without breaking sweat. However, it turns out that these new components comes with some css elements that I would prefer not to have. A case in point would be the ion-list and ion-item components elements that adds huge paddings. Is there a list of all css classes for these components? Is it alright to just use plain html5 elements and style them as I see fit? Please let me know what your advice would be for an ionic newbie . Also, please feel free to send some url pointers my way so that I can take a look.

Thanks in advance!

2

Some CSS is bad i agree. But padding problems can easiliy be solved with no-padding, see css utilities in docs for more information.

It is fine to use plain HTML5 elements but always keep in mind that you might loose some features - if possible go with ionic directives.

3

Thanks a bunch for your quick reply, I really do appreciate it. I will take a look and revert back if I have additional questions.

4

Ok so I looked at the document you sent and saw that it was able to help some. But apparently it does not remove padding for elements completely. There is still a platform based padding of 16px that I am not able to play with. Also, is there something like no-margin, I was not able to see that in the document. Saw something interesting also and I am not sure if that is by design or some side effect. If chose to remove ion-item tag and use ion-label and ion-input in side an ion-col like so:

<!--<ion-item no-padding no-lines>--> <ion-label floating>{{"login.username" | translate}}</ion-label> <ion-input #username ngControl="username" (formControlName)="username" type="text"></ion-input> <!--</ion-item>-->

Once that is done, my floating label value disappears. Is that supposed to be the case?

Thanks again for your help.

5

The best way to customize your app would be to override the Sass variables. We still need to improve the documentation behind theming, but it’s on my to do list. You can search through all of the Sass variables and their default values here, as well as what files they are defined in: Overriding Ionic Sass Variables

For example, if you search $item padding it will pull up all of the variables related to an item and padding. The ones you want are going to be:

$item-ios-padding-left
$item-md-padding-left
$item-wp-padding-left

Which controls the ios, md and wp modes.

Yes, all of the padding attributes can be switched from padding to margin and that will modify the margin. We have added it to the documentation but it isn’t live on the site yet. Our staging site shows the latest documentation before we publish it: http://ionic-site-staging.herokuapp.com/docs/v2/theming/css-utilities/

The floating labels rely on item being a parent, so unfortunately yes in order to use the floating label it will need to have a parent item. The item gets a class called item-label-floating and input-has-focus on focus of the input which the floating label uses.

The conference app we built has some examples of using Sass variables (in the theme directory): GitHub - ionic-team/ionic-conference-app: A conference app built with Ionic to demonstrate Ionic

Also, in the components directory of the ionic repository we have folders for each component. Each of these have (up to) 4 Sass files:

*.scss        // the generic component Sass file used by all modes
*.ios.scss    // ios only Sass file
*.md.scss     // md only Sass file
*.wp.scss     // wp only Sass file

And at the top of those Sass files are all of the variables it uses. For example, the ios Sass file for Action Sheet:

https://github.com/driftyco/ionic/blob/master/src/components/action-sheet/action-sheet.ios.scss#L7-L33

Let me know if you have any questions. Thanks! :slight_smile:

1 Like