Ionic Change Background Color of List Item
Ionic Change Background Color of List Item : We sometimes need to customize the ionic list item’s style such as background color, text color etc. You can add your own css to add the new style or you can override the default style. Here in this tutorial we are going to explain how to add styles in ionic list items with example and demo.
Ionic Change Background Color of List Item
You can add the background color of list Item using the following methods –
Ionic Change Background Color : Using Default Colors
Ionic Change Background Color of List Item:
<ul class="list">
<li class="item dark-bg">Item 1</li>
<li class="item balanced-bg">Item 2</li>
<li class="item royal-bg">Item 3</li>
<li class="item calm-bg">Item 4</li>
</ul>
|
If you run the above example it will produce the following output-
Ionic Change list item Background Color : Using Custom Styles
If you want to add your own custom style rather than using the default background colors you can create custom class and add the background color. Here is an example –
Ionic Change Background Color of List Item: Example
<ul class="list">
<li class="item bg1">Item 1</li>
<li class="item bg2">Item 2</li>
<li class="item bg1">Item 3</li>
<li class="item bg2">Item 4</li>
</ul>
<style>
.bg1{
background:yellow;
}
.bg2{
background:red;
}
</style>
|
Ionic List Change Background Color on Hover
Ionic Change Background Color on Hover Example:
<style>
li.item:hover {
background-color: yellow;
}
</style>
<ul class="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
<li class="item">Item 4</li>
</ul>
|
More Examples
Let us have more examples to customize the ionic lists-
Ionic Change font Color
If you want to add your own custom style rather than using the default background colors you can create custom class and add the background color. Here is an example –
Ionic Change font Color of List Item: Example
<ul class="list">
<li class="item dark">Item 1</li>
<li class="item energized">Item 2</li>
<li class="item assertive">Item 3</li>
<li class="item royal">Item 4</li>
</ul>
|
The above example will change the font color of the list items in the ionic.
Advertisements
