CSS components VS ONS Components



  • Hello,

    I was looking at css components documentation and I noticed that list items can be displayed in 2 ways.

    Either using CSS components or ONS Components. What is the benefit of using ons components over css components? Performance wise which is better?

    Thanks for your help!

    <ul class=“list”>
    <li class=“list-item list-item–nodivider list-item–chevron”>
    <div class=“list-item__center list-item–nodivider__center”>Item A</div>
    </li>
    <li class=“list-item list-item–nodivider list-item–chevron”>
    <div class=“list-item__center list-item–nodivider__center”>Item B</div>
    <div class=“list-item__right list-item–nodivider__right list-item–chevron__right”>
    <div class=“list-item__label”>Label</div>
    </div>
    </li>
    </ul>

    Corresponding elements:

    ons-list
    ons-list-item


  • Onsen UI

    @mmike There is an architecture section explaining about this. Basically, the CSS components only add the styles, what can be fine for compnoents like cards or lists. The web components (“ons components”) add the “dynamic behavior” with JavaScript, such as dragging or swiping, pushing new pages, etc. The best approach depends on your needs.


Log in to reply