メインコンテンツまでスキップ

<pc-scrollbar>

<pc-scrollbar>タグは、0〜1の範囲で位置を報告するドラッグ可能なハンドルを提供するスクロールバーコンポーネントを定義するために使用されます。

使用法
  • <pc-element> も持つ <pc-entity> の直接の子である必要があります。
  • <pc-scrollview> の horizontal-scrollbar または vertical-scrollbar 属性から参照されます。
  • handle 属性は、ドラッグ可能なハンドルとして使用する <pc-entity> を参照します。そのイメージ要素には use-input を設定してください。

属性​

属性タイプデフォルト説明
enabledBoolean"true"コンポーネントの有効状態
handleString-ドラッグ可能なハンドルとして使用する <pc-entity> への参照（CSSセレクター、要素id、またはエンティティ名）
handle-sizeNumber"0.5"トラックのサイズに対するハンドルのサイズ（0〜1）
orientationEnum"horizontal"スクロールバーの向き: "horizontal" | "vertical"
valueNumber"0"スクロールバーの現在位置（0〜1）

例​

<pc-entity name="scrollbar">
    <pc-element type="image" anchor="1 0 1 1" width="20"></pc-element>
    <pc-scrollbar orientation="vertical" handle-size="0.5" handle="#handle"></pc-scrollbar>

    <!-- ドラッグ可能なハンドル -->
    <pc-entity name="handle" id="handle">
        <pc-element type="image" anchor="0 1 1 1" use-input></pc-element>
        <pc-button></pc-button>
    </pc-entity>
</pc-entity>

JavaScriptインターフェース​

ScrollbarComponentElement APIを使用して、<pc-scrollbar>要素をプログラムで作成および操作できます。