htmlcssonsen-ui

onsen UI with expanable list and icons with description

I want this list thumbnail which is expandable and also allow me to add my text

I have search the internet, so far I can only choose one not both.

enter image description here

Solution

  • You can combine two types of list items like this:

    <link href="https://unpkg.com/onsenui/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://unpkg.com/onsenui/css/onsenui.css" rel="stylesheet"/>
<script src="https://unpkg.com/onsenui/js/onsenui.js"></script>
<ons-page>
  <ons-list>
    <ons-list-header>Expandable with thumbnails and titles</ons-list-header>
    <ons-list-item expandable>
      <div class="left">
        <img class="list-item__thumbnail" src="https://placekitten.com/g/40/40">
      </div>
      <div class="center">
        <span class="list-item__title">Cutest kitty</span><span class="list-item__subtitle">On the Internet</span>
      </div>
      <div class="expandable-content">Expandable content</div>
    </ons-list-item>
  </ons-list>
</ons-page>