I spent the last few hours looking at Ionic as an alternative to using jQuery. I have used a good few prototyping tools so I thought using Ionic would be similar enough to those. It is, but it is a little bit confusing to use too. I also feel it’s a little more constricted to use as a free user – for example, any HTML coding is for Pro users only.
Anyway, I went ahead and tried to recreate the home screen of my app. Immediately, I ran into an issue – they don’t have a circle shape in their Components section, so I couldn’t place the huge circle that takes up most of my home screen.
Another thing I noticed is that the header can’t be the same name, it has to be the name of the page. In my mockups, each screen’s header has “Unwind” instead of the page’s name- and I couldn’t align the text to the center. Also with the home and settings icon, I wasn’t able to link them to the home and settings pages.
I wasn’t able to change the opacity or the height of the list items either. As well as that, the chevron’s had to be the same colour as the text, without the ability to change the opacity on those.
Lastly – for some reason when I preview the app, the tab menu is at the top and not the bottom. It won’t let you move it either, so it was stuck at the top. Actually, all items you place (headings, paragraphs, lists, etc.) are pretty much stuck in one place and you don’t have the ability to move them freely. Also the icons in the tab menu are customizable, and you have to use the Ionic set, not your own.
I think Ionic is a good platform for building apps, but only certain apps – I don’t think this is suitable enough for my app, and I feel more comfortable coding in jQuery where I have a lot more control and customization. It was important to try out Ionic just in case! Here are my finished three screens:
You can preview here: https://creator.ionic.io/share/23c0cebe99fc