1

OnsenUIでWebアプリを開発しています。

その中でカルーセル(ons-carouselコンポーネント)を使用する画面があり、左右に続くコンテンツがあるかどうかをユーザに示す矢印("<"と">")を表示したいと考えています。

矢印の表示はOnsenUIの標準機能で可能でしょうか?
それとも、自力で実装するしかないでしょうか。

1 件の回答 1

1

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>
1
  • 実際に試して表示されることを確認しました。 やはり自前で表示するしかないのですね。 ありがとうございます。
    – user12590
    Commented 2015年10月6日 2:23

この質問に回答するには、ログインする必要があります。