Я хочу иметь список Ionic с 3 (или 4, см. Ниже) столбцами:
- первый столбец будет значком
- во втором столбце будет отображаться текст элемента списка
- Третий столбец будет отображаемым значком
- четвертой колонкой будет шеврон, который при нажатии должен перейти к деталям предметов. Я знаю, что вы можете добавить шеврон к ионному элементу с модификатором, но я хочу, чтобы только правая часть элемента списка (там, где находится шеврон), переместилась на страницу сведений.
Поскольку у меня в списке будет несколько других значков, которые я могу использовать, я не хочу, чтобы они смешивались.
Я попробовал следующее:
<ion-list class="plan-list">
<ion-item class="plan" text-wrap detail-push *ngFor="let item of items">
<ion-grid>
<ion-row>
<ion-col col-2 class="plan-left" style="border-right:2px solid #A6A6A6">
//tappable icon which has a fixed size, and should always be centered both vertically and horizontally in it's place
</ion-col>
<ion-col col-7 class="plan-right">
<div class="plan-name">{{item.Name}}</div>
</ion-col>
<ion-col col-1 class="plan-right">
<div>
<img class="plan-image-icon" src="icons/documentIcon.png" width="20px"/>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
Я пытался использовать модификаторы col-x для ширины столбца, но мне нужно уметь их настраивать немного больше.
Вот изображение того, как я хочу, чтобы это выглядело:
- Красная часть - это значок, который можно вставить: обратите внимание, что он имеет прямоугольную форму, что означает, что если высота элементов не должна изменяться (из-за переноса текста), то она должна быть прямоугольной => ширина должна совпадать с высотой ионного элемента (???)
- Зеленая часть - это то место, куда идет заголовок, это место, где могут появляться несколько строк текста, и оно должно быть перенесено
- Синяя часть - это то место, куда должен идти значок, который можно щелкнуть (он узкий, но должен быть кликабельным)
- Голубая часть - это то место, где был бы шеврон.
Я не уверен, смогу ли я поместить ion-grid в тег ion-item , но я нашел несколько случайных примеров в Интернете.
Пожалуйста, дайте мне знать, как мне продолжить эту настройку.
Я хочу иметь адаптивный дизайн, зеленая часть, куда идет текст, должна менять свою ширину в соответствии с шириной экрана, если это возможно.