OnsenUIでWebアプリを開発しています。
その中でカルーセル(ons-carouselコンポーネント)を使用する画面があり、左右に続くコンテンツがあるかどうかをユーザに示す矢印("<"と">")を表示したいと考えています。
矢印の表示はOnsenUIの標準機能で可能でしょうか?
それとも、自力で実装するしかないでしょうか。
Onsen UIのonsen-css-components-blue-basic-theme.css
の2731行にons-list-item
の>
を表示するクラス.list__item--chevron:before
がありますので、これをコピーし左用(<
)、右用(>
)のクラスを作成すれば実現できます。
CSS
.carousel-item-chevron-l:before {
position: absolute;
left: 16px;
top: 50%;
color: #ddd;
line-height: 28px;
height: 28px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 28px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
content: "\f104";
}
.carousel-item-chevron-r:before {
position: absolute;
right: 16px;
top: 50%;
color: #ddd;
line-height: 28px;
height: 28px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 28px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
content: "\f105";
}
HTML
<ons-carousel-item>
<div class="carousel-item-chevron-l"></div>
<div class="carousel-item-chevron-r"></div>
</ons-carousel-item>