3

私は初心者のプログラマーであり、Ionic Framework と 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) を使用して、このタイプの表示をレンダリングできますか?

ここで簡単な例のコードを見ることができます:

プランカーのサンプルコード

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

チェックボックスを（クラスを使用して）右側に配置し、 withをオーバーライドすることで、item-avatarクラスとチェックボックスを組み合わせることができました。item-checkbox-rightmin-height0

私の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 に答える