Semantic-UI Item Stacking Variation
Last Updated :
20 Feb, 2022
Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.
Semantic UI Item presents a large collection of similar types of data on a website. The Item can contain an image, heading, description, buttons, date, etc. Item is the collection of items in Semantic UI.
Semantic UI Item Stacking Variation can specify how a table of items is stacked. The Stacking variation sets how the items respond to responsiveness.
Semantic UI Item Stacking Variation Classes:
- stackable: The items in the table respond to the different screen sizes and changes the layout.
- unstackable: The items in the table do not respond to different screen sizes and do not change the layout.
Syntax:
<div class="ui unstackable items">
....
</div>
Example: In the following example, we have some items and a button. On clicking the button, the layout changes as stackable or unstackable.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
/>
< script src =
</ script >
< script src =
</ script >
< style >
body {
padding: 10px;
margin: 10px;
}
</ style >
</ head >
< body >
< div class = "ui container" >
< center >
< div class = "ui header green" >
< h1 > GeeksforGeeks </ h1 >
</ div >
< strong > Semantic UI Item Stacking Variation </ strong >
</ center >
</ div >
< center >
< br />
< div class = "ui button" onclick = "stackReverse()" >
Stackable/Unstackable
</ div >
</ center >
< div class = "ui unstackable items" id = "gfgstack" >
< div class = "item" >
< div class = "ui small image" >
< img src =
/>
</ div >
< div class = "middle aligned content" >
< div class = "header" >
Data Structures and Algorithms
</ div >
< div class = "meta" >
< i class = "like icon" ></ i >
< span class = "likes" >
31 Likes
</ span >
</ div >
</ div >
</ div >
< div class = "item" >
< div class = "ui small image" >
< img src =
/>
</ div >
< div class = "middle aligned content" >
< div class = "header" >
Machine Learning
</ div >
< div class = "meta" >
< i class = "favorite icon" ></ i >
< span class = "likes" >
123 Favourites
</ span >
</ div >
</ div >
</ div >
</ div >
< script >
function stackReverse() {
$('#gfgstack').toggleClass('unstackable').toggleClass('stackable')
}
</ script >
</ body >
</ html >
|
Output:
Semantic-UI Item Stacking Variation
Reference link: https://semantic-ui.com/views/item.html#stacking
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...