3

我是一个 noice 程序员，并且是 Ionic 框架和 Angular.js 的新手。我正在开发一个使用 Ionic 的移动应用程序，主要是“开箱即用”。但是，我想显示一个 Ionic 列表，它结合了：

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

见下面的样机...

所需的显示 - 样机

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>

但是页面显示如下：

当前显示

我的问题：

  • Ionic 框架是否支持这种组合（在列表项中组合复选框和头像图像）？
  • 如果是这样，我可以使用哪些标记或代码（HTML、CSS、JS）来呈现这种类型的显示？

您可以在此处查看带有简单示例的代码：

Plunker 示例代码

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

4

3 回答 3

4

我认为您将无法使用 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>
于 2015-01-14T00:51:01.657 回答
3

item-avatar通过将复选框放在右侧（使用item-checkbox-right类）并覆盖min-heightwith ，我能够将类与复选框结合起来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;
}

我得到如下结果：

于 2016-08-12T02:35:11.373 回答
2

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

只需将其添加到您的 img 标签中ion-checkbox

您可以在此 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>

于 2015-02-24T12:25:19.700 回答