Я хочу отображать динамический список карточек по горизонтали. На больших экранах это будет 3 на 3 для каждой строки, а на маленьких экранах это будет полный столбец 12.
<ul class = "list-group list-group-horizontal">
<li class = "list-group-item">An item</li>
<li class = "list-group-item">A second item</li>
<li class = "list-group-item">A third item</li>
</ul>
. Каждый элемент списка по-прежнему является вертикальным, а не горизонтальным.
<ion-grid>
<ion-list class = "ion-padding-top">
@for (item of myList; track item.userId)
{
<ion-row>
<ion-card class = "col-4">
<ion-avatar>
<img alt = "Silhouette of a person's head" src = "https://ionicframework.com/docs/img/demos/avatar.svg" />
</ion-avatar>
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
Here's a small text description for the card content. Nothing more, nothing less.
</ion-card-content>
</ion-card>
</ion-row>
}
}
</ion-list>
</ion-grid>
🤔 А знаете ли вы, что...
HTML5 - последняя версия HTML, внедряющая новые элементы и функциональность, такие как <canvas> и <video>.
вы можете использовать ионную сетку, чтобы сделать ваши столбцы отзывчивыми:
<ion-grid>
<ion-row>
@for (item of myList; track item.userId){
<ion-col size-lg = "3" size-md = "3" size-sm = "12" size = "12"> // to make it responsive you can adjust these size values.
<ion-card>
//your card content here
</ion-card>
</ion-col>
}
</ion-row>
</ion-grid>
Для получения дополнительной информации вы можете проверить документацию: Ion-Grid
<!DOCTYPE html>
<html>
<head>
<style>
.list-group {
display: grid;
grid-template-columns: 33.3% 33.3% 33.3%;
background-color: #2196F3;
padding: 10px;
}
.list-group-item {
list-style-type: none;
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
margin: 10px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Grid Elements</h1>
<ul class = "list-group list-group-horizontal">
<li class = "list-group-item">An item</li>
<li class = "list-group-item">A second item</li>
<li class = "list-group-item">A third item</li>
<li class = "list-group-item">A forth item</li>
<li class = "list-group-item">A fofth item</li>
<li class = "list-group-item">A sixth item</li>
</ul>
</body>
</html>
here is the output
[думаю, этот код вам поможет][1] [1]: https://i.sstatic.net/UepQw.png