Question

我是一名noice程序员，是Ionic Framework和Angular.js的新成员。我正在开发一个主要使用Ionic的移动应用程序＆＃34;开箱即用＆＃34;。但是，我想显示一个结合了以下内容的离子列表：

复选框
项目内容（例如文字字符串）
头像（即与项目相关联的图像）

见下面的模型......

Desired Display - Mockup

HTML标记的简化示例如下所示：

  <ion-pane>
    <ion-header-bar class="bar-stable">
      <h1 class="title">Combine Checkbox &amp; Avatar in List</h1>
    </ion-header-bar>
  <ion-content>
    <ul class="list">

      <li class="item item-checkbox item-avatar-right">
        <label class="checkbox">
          <input type="checkbox">
        </label>
        <img src="http://placehold.it/100x100">
        Item #1
      </li>

      <li class="item item-checkbox item-avatar-right">
        <label class="checkbox">
          <input type="checkbox">
        </label>
        <img src="http://placehold.it/100x100">
        Item #2
      </li>

    </ul>
  </ion-content>
</ion-pane>

但页面显示如下：

Current Display

我的问题：

Ionic Framework是否支持此组合（在列表项中组合复选框和头像图像）？
如果是这样，我可以用什么标记或代码（HTML，CSS，JS）来渲染这种类型的显示？

您可以在此处看到一个简单示例的代码：

Plunker Example Code

感谢Stackoverflow社区的指导和指导！

Answer 1

我认为你无法通过Ionic默认CSS实现这一目标。也许你应该通过一些css来调整一些位置，因为这些元素之间的CSS不兼容。但是，我可以达到与你所展示的非常接近的东西。将以下项目放入您的plunker代码中并试一试：

<li class="item item-avatar-right item-checkbox">
    <img src="http://placehold.it/100x100">
    <label class="checkbox">
        <input type="checkbox">
    </label>
    <h2>Headline</h2>
    <p>Description</p>
</li>

Answer 2

我能够将item-avatar类与复选框合并，方法是选中右侧的复选框（使用item-checkbox-right类）并使用min-height覆盖0

我的HTML：

<ion-content class="list">
  <ion-checkbox class="item-avatar item-checkbox-right" ng-repeat="user in connectedUsers">
    <img ng-src="{{user.picture}}">
    <h2>{{user.name}}</h2>
    <p>{{user.email}}</p>
  </ion-checkbox>
</ion-content>

我还必须添加以下CSS规则：

.item-avatar,
.item-avatar .item-content,
.item-avatar-left,
.item-avatar-left .item-content {
  min-height: 0;
}

我得到了如下结果：

Answer 3

我正在为同样的问题制定解决方案，我想出了这个css类： item-checkbox-img

只需将其添加到ion-checkbox

中的img标记即可

您可以看到结果in this codepen，图片已调整大小，其绝对位置会将其置于项目的右侧

angular.module('ionicApp', ['ionic'])
  .controller('MainCtrl', function($scope) {});

body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.item-checkbox-img {
  vertical-align: middle;
  position: absolute;
  top: 0px;
  right: 15px;
  height: 100%;
}

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <title>Toggles</title>
  <link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet">
  <script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>
</head>

<body ng-controller="MainCtrl">
  <ion-list style="height: 2000px">
    <ion-checkbox>ion-checkbox
      <img class="item-checkbox-img" src="http://placehold.it/350x150">
    </ion-checkbox>
    <ion-checkbox>ion-checkbox
      <img class="item-checkbox-img" src="http://placehold.it/100x100">
    </ion-checkbox>
  </ion-list>
</body>

</html>

结合“Checkbox”＆amp;离子框架列表中的“阿凡达”

3 个答案: