Menu
Using ionic to build an app, and I have a need to display an actual bullet list:
However, it appears that the framework does some sort of CSS reset / magic on <ul> and <li> elements such that they should only be used as structure elements (e.g. a list), rather than as UI.
I ended up creating my own unordered-list CSS style to give me the UI I needed. Is that the right way to do-it-yourself - or does ionic have some CSS style buried deep inside that I should have used instead?
ty in advance.
919
List Header: Every ionic list can add a header at the top of the list. By using the <ion-list-header> component, you can add a list header. Example: The below example shows how you can use the list header in the ionic application. Output: After executing this code, you will get the output, as shown below.
We use the <ul> tag to create an unordered list. As usual, we need to use the <li> tags within <ul> and <ul/> to create the list items. The list items ( li ) inside the unordered list ( ul ) come with the default style of bullet points – so each of the list items is preceded by a black dot.
</ul> tags around the text to turn into a bulleted list. Second, place the <li>… </li> tags around each line item in the list. You can choose from three formatting type choices when making HTML bullet points.
Using ionic to build an app, and I have a need to display an actual bullet list: However, it appears that the framework does some sort of CSS reset / magic on <ul> and <li> elements such that they should only be used as structure elements (e.g. a list), rather than as UI.
Ionic - Lists. Lists are one of the most popular elements of any web or mobile application. They are usually used for displaying various information. They can be combined with other HTML elements to create different menus, tabs or to break the monotony of pure text files. Ionic framework offers different list types to make their usage easy.
When you need a list to fill your own container, you can add the list-insets after your list class. This will add some margin to it and it will adjust the list size to your container. Dividers are used for organizing some elements into logical groups. Ionic gives us item-divider class for this.
Again, like with all the other Ionic elements, we just need to add the item-divider class after the item class. Item dividers are useful as a list header, since they have stronger styling than the other list items by default. We already showed you how to add icons to your buttons.
Just overwrite the reset.
ol, ul {
list-style: none;
}
Like this (place in your CSS after the CSS of the framework)
ul {
list-style-type: disc;
}
Best practise: set a class on the navigation element namely the ul.
<section>
<ul class="my-nav">
<li>List item</li>
<li>List item</li>
</ul>
</section>
.my-nav {
list-style-type: disc;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With