Im new to the angular and ionic but I want to design the exact same header as below for my small project but I seem to be getting it wrong. Below is what I seek to achieve.
Also I wanted it such that when I scroll up, the segment hides and when I scroll down it appears again.
Also if you click on the my school header at the top it should switch to another page and vice versa… I know it’s a lot, I’m learning a lot and moving fast too. Any help would be much appreciated.
The main differences I can see are:
-color: a quick fix could be setting the color to 'primary and edit the scss ‘primary’ variable.
-width: the width of the elements on top is set to fit the content, while the one in your example is a constant value. Adding ‘width: fit-content’ and ‘display: inline-block’ should do the trick.
For the scrolling part you can check this post made by another user: Hide header on scroll
For the third question I’m not sure what you’re asking. Hopefully I can help if you can give more details.
I am trying out your solutions thank you.
The last point, I meant when you look at the sample app above, “accra” appears like normal text but is actually clickable and switches to another page. I want to produce the same logic but can’t seem to.
And not to sound dumb, I’m really learning because this is all new to me but where do I input those attributes you suggested? The ones about width, etc
A Ionic app should be developed as an Angular web app (at least for the UI). The attributes I mentioned are CSS variables, one of the three fundamentals of web development (HTML, CSS, JavaScript). You don’t sound dumb at all, but I would suggest to look at web development basics before using a framework as Ionic.
For the third question, I suppose with ‘page’ you are referring to an internal view of your app, not an external link. In this case you should catch a click event on the title to execute a function, that will change the active view using the NavController API. You can find a very detailed description of said API on Ionic official documentation.
-> The last point, I meant when you look at the sample app above, “accra” appears like normal text but is actually clickable and switches to another page.
Thank you. I’m looking that up. And I’ll do the basics and come back to my Angular ionic project. I used to think I was a web dev Pro until I met ionic and Angular. Totally lost.
Thanks for the amazing help. Trying out the solutions. Will give updates tomorrow.
Great Sôlutiôn. I’ll try that and remove the drop down. I simply need it to switch to the next page when clicked on. And the other page vice versa. Amazing tip. Thanks.