99. A-tag-not-highly-recommended

Angular(Ionic)で要素を横にスクロールできるように並べる

Angular(Ionic)で要素を横にスクロールできるように並べる

div[scrollX] {
    white-space: nowrap;
    height: 120px;
    overflow: hidden;

    .scroll-item {
      display: inline-block;
    }

    .selectable-icon{
      margin: 10px 20px 10px 20px;
      color: red;
      font-size: 100px;
    }

    ion-avatar img{
      margin: 10px;
    }
    overflow-x: auto;
  }

  div[scroll-avatar]{
    height: 60px;
  }

  /* Hide ion-content scrollbar */
  ::-webkit-scrollbar{
    display:none;
  }

  <ion-row>
    <ion-item no-lines>
      <div scrollX="true">
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
      </div>
    </ion-item>
  </ion-row>
データサイエンティスト
絹田 雅
アーナンダよ、あなたはカピラヴァットゥのサキャ族の人たちに、修学すべき人(有学)の修学と実践について説明しなさい。わたしは背中が疲れました。背中を伸ばそう。 マハーナーマよ、ここに貴い弟子は戒をそなえ、感覚器官の門を防御し、食事の適量を知り、覚醒しており、七つの正しい教えをそなえており、明瞭なこころに依存し、現世で安楽に過ごす、明瞭なこころに依存する四段階からなる瞑想(四禅)を希求し、容易に得て、困難なく得ます。
twitter-timeline