

Onsen-UIのリスト表示で、項目の先頭に、  
HTMLの`<ol><li>`で実現されるような連番を自動で  
振ることができるでしょうか。


CC BY-SA 4.0
2018-06-07T02:05:14.263
44579
2018-06-16T10:10:36.897
10218
question
monaca onsen-ui cordova
Onsen-UI list-itemを<ol><li>のような順番つきにする方法


Onsen UI V2のCSSでは、「・」や数字が表示されないように **list-style-type** や **list-style**
を無効にしているので、CSSカウンターを使用して自前で連番を振れば実現できます。

[code]

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

[code]

    <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">
          いぬ
        </ons-list-item>
        <ons-list-item class="list-item_count">
          ねこ
        </ons-list-item>
        <ons-list-item class="list-item_count">
          うさぎ
        </ons-list-item>
      </ons-list>
    </ons-page> 
[/code]


CC BY-SA 4.0
2018-06-16T10:10:36.897
44802
2018-06-16T10:10:36.897
9566
44579
answer