How to place the Onsen-UI list-item in the order shown in <ol><li>

In the Onsen-UI list display, at the beginning of the item, click

automatically
continuous numbers as achieved by HTML &ol>li> Can you shake it?

monaca onsen-ui cordova

2022-09-30 15:33

1 Answers

The CSS in Onsen UI V2 disables list-style-type and list-style to prevent "·" and numbers from appearing, so you can do it by using the CSS counter to swing consecutive numbers yourself.

.list-item_count{
  counter-increment:item;
}
.list-item_count div::before{
  content:counter(item) ".";
  padding-right —10px;
}

<link href="https://unpkg.com/onsenui@latest/css/onsenui.css"rel="stylesheet"/>
<link href="https://unpkg.com/onsenui@latest/css/onsen-css-components.css"rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<script src="https://unpkg.com/onsenui@latest/js/onsenui.js"></script>
<script src="https://unpkg.com/onsenui@latest/js/angular-onsenui.js">/script>
<ons-page>
  <ons-list class="list_count">
    <ons-list-item class="list-item_count">
      dog
    </ons-list-item>
    <ons-list-item class="list-item_count">
      cat
    </ons-list-item>
    <ons-list-item class="list-item_count">
      Rabbit
    </ons-list-item>
  </ons-list>
</ons-page>

2022-09-30 15:33

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656