How I can design this UI

Plz help to design this ui for my app?
image

1 Like

Sorry if I am being rude, but this is basic html and css

1 Like

Hi Farshid, as yurinondual said, this is a css edit to probably a list element. but from your picture i can’t understand if this is a page, or some sidemenu? anyways, i think you can achieve this with an ion-list element, and just you will need to make at least 4 unique css classes, one for each of the colors of the list, and than just add the classes to the list items you want to look like that and all will be good :slight_smile:

But I have this problem when I want design ui in ionic framework
http:/uploads/default/original/2X/1/13d001686e1e60d5b9ffab4682f761d5e0ffdced.PNG
and I don’t how handle it?

Hi Farshid, from your picture, i can see that you perhaps didn’t use the starter ionic projects. I would advise you to start with one of those, it will be much easier for starters. in your picture, from what i can guess, there is some kind of problem that you don’t have the class of :“has-header” on the ion-content. i think that if you add it, you will see the view better…and it will calculate all the content under the green header, and than at least you will see all the elements properly,

it should look something like this:
ion-content class=“has-header”

I hope this is what you meant…

Yes, thank it’s work but I want not drag able the body?

You probably want to use scroll="false" on your <ion-content> element. See the docs: http://ionicframework.com/docs/api/directive/ionContent/

thank you @dpfavand and @shaulhadar. If you see my buttons has any margin from side(left and right), I use this class “button-block” but not work and has any margin?

Hi Farshid, i am happy you could make it work… i am not sure what you ment, but if you mean that you need to have a margin on the sides of the button, you should add the “padding” class to the div above the button, and it will give you this space.