ons-list-item

実例

Lists

ons-list element renders a list. Please refer to ons-list element Reference for more details.

Tutorial contents will be added soon.

関連情報

名前 型 / デフォルト値 概要
modifier String 各要素の表現を指定します。 Optional.
lock-on-drag Boolean この属性があると、ユーザーがこの要素を横方向にドラッグしている時に、縦方向のスクロールが起きないようになります。 Optional.
tappable Boolean Makes the element react to taps. prevent-tap attribute can be added to child elements like buttons or inputs to prevent this effect. ons-* elements are ignored by default. (翻訳中) Optional.
tap-background-color Color Changes the background color when tapped. For this to work, the attribute “tappable” needs to be set. The default color is “#d9d9d9”. It will display as a ripple effect on Android. (翻訳中) Optional.
keep-tap-background-color Boolean この属性があると、"touchmove", "touchcancel", "touchend", "touchleave", "mouseup", and "mouseout" イベント時に背景色がクリアされないようになります。 Optional.
expandable Boolean Makes the element able to be expanded to reveal extra content. For this to work, the expandable content must be defined in div.expandable-content. (翻訳中) Optional.
expanded Boolean For expandable list items, specifies whether the expandable content is expanded or not. (翻訳中) Optional.
animation String
default
The animation used when showing and hiding the expandable content. Can be either "default" or "none". (翻訳中) Optional.
名前 概要
lockOnDrag この属性があると、ユーザーがこの要素を横方向にドラッグしている時に、縦方向のスクロールが起きないようになります。
tappable Makes the element react to taps. prevent-tap attribute can be added to child elements like buttons or inputs to prevent this effect. ons-* elements are ignored by default. (翻訳中)
tapBackgroundColor Changes the background color when tapped. For this to work, the attribute “tappable” needs to be set. The default color is “#d9d9d9”. It will display as a ripple effect on Android. (翻訳中)
keepTapBackgroundColor この属性があると、"touchmove", "touchcancel", "touchend", "touchleave", "mouseup", and "mouseout" イベント時に背景色がクリアされないようになります。
expandable Makes the element able to be expanded to reveal extra content. For this to work, the expandable content must be defined in div.expandable-content. (翻訳中)
expanded For expandable list items, specifies whether the expandable content is expanded or not. (翻訳中)
animation The animation used when showing and hiding the expandable content. Can be either "default" or "none". (翻訳中)
Name 概要
tappable タップやクリックした時に効果が表示されるようになります。
chevron Display a chevron at the right end of the list item and make it change appearance when tapped. (翻訳中)
longdivider Displays a long horizontal divider between items. (翻訳中)
nodivider Removes the divider between list items. (翻訳中)
material Display a Material Design list item. (翻訳中)
シグネチャ 概要
showExpansion() Show the expandable content if the element is expandable. (翻訳中)
hideExpansion() Hide the expandable content if the element expandable. (翻訳中)
clearTapBackgroundColor() タップやクリックした時に効果が表示されるようになります。このメソッドは keep-tap-background-colortrue のときに使用します。
showExpansion()

Show the expandable content if the element is expandable. (翻訳中)

hideExpansion()

Hide the expandable content if the element expandable. (翻訳中)

clearTapBackgroundColor()

タップやクリックした時に効果が表示されるようになります。このメソッドは keep-tap-background-colortrue のときに使用します。

名前 概要
expand For expandable list items, fires when the list item is expanded or contracted. (翻訳中)
expand

For expandable list items, fires when the list item is expanded or contracted. (翻訳中)

パラメーター
名前 概要

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。