<alier-button>
概要
HTML カスタムエレメント <alier-button> はalierが提供するボタンコンポーネントです。
<alier-button repeat repeat-duration="0.1">repeat button</alier-button><alier-button> は長押し操作に反応するイベントおよび、長押し中繰り返しイベントを発火させるリピート機能を提供しています。
配置された子要素はボタン内に描画されます。
このエレメントは AlierCustomElement を継承しているため、 ProtoViewLogic.collectElements() は既定でこのエレメントを収集します。つまり、data-ui-component は必要ありません。
既定で data-active-events="click" を付与しているため、ProtoViewLogic.messageHandler() は click イベントを取得します。
子要素
子要素として与えられたエレメントはスロットとしてボタン内部に割り当てられます。
カテゴリー
このエレメントはフォーム関連要素です。<form> で値を送信できます。
構造
<alier-button> は以下のような構造となっています。
# ── button ── (slot)buttonノードはボタンを指しています
それぞれのノードを ::part() 疑似要素で指定するとスタイルを適用できます。
固有の機能
<alier-button> はリピート機能を提供しています。
概要
リピート機能は、このエレメントを長押しすると、押されている間クリック処理を繰り返す機能です。 repeat 属性を指定すると有効になります。クリック処理の繰り返しは二段階あり、低速で繰り返す一段階目と、高速で繰り返す二段階目となっています。
使用例
+, - のボタンで数値を増減させるケースなど、特定の回数だけクリックしたい場合に細かく調整できるよう、繰り返しの速度を二段階提供しています。
効果発動の順序
このエレメントを押下したまま、 longpress-time で指定したミリ秒が経過すると長押しイベントが発生します。長押しイベントを受け取ると slow-repeat-duration で指定したミリ秒ごとにクリック処理を繰り返します。長押しイベント発生から slow-repeat-end で指定したミリ秒が経過すると repeat-duration で指定したミリ秒ごとにクリック処理を繰り返します。これらの処理はエレメントの押下をやめると中断されます。
属性
<alier-button>特有の属性
| 属性 | 既定値 | 値 | 説明 |
repeat |
- | 論理値 | 属性の宣言でリピート機能の使用を設定します |
longpress-time |
2000 | 数値 | 長押しイベントが発生する時間をミリ秒で定義します |
slow-repeat-end |
2000 | 数値 | 長押しイベント発生後、低速でリピートする時間をミリ秒で定義します |
slow-repeat-duration |
500 | 数値 | 低速でリピートする際のリピートの間隔が何ミリ秒ごとか定義します |
repeat-duration |
200 | 数値 | リピートの間隔が何ミリ秒ごとか定義します |
<alier-button>で使用する標準の属性
| 属性 | 値 | 説明 |
disabled |
論理値 | ユーザーのボタン操作を抑止します。 |
hidden |
論理値 | タグ全域について非表示にします。 |
name |
任意の値 | このボタンの名前で、フォームデータの一部としてこのボタンの value との組み合わせで送信されます。 |
type |
submit, reset, button |
このボタンの既定の動作です。初期値は button です。 submit はフォームにデータを送信します。 reset はフォームのデータを初期値に初期化します。 button は既定の動作はありません。 |
value |
任意の値 | フォームのデータと一緒に送信される際に、ボタンの name に結び付けられる値を定義します。 |
スタイル
スタイル変数
以下のスタイル変数を適用することでボタンのスタイルを変更することができます。
| 変数名 | 適用内容 |
| --alier-width | ボタン内の幅を指定します。 |
| --alier-height | ボタンの高さを指定します。 |
part 疑似要素
::part() 疑似要素を利用することで、このエレメントの内部要素を自由にカスタマイズすることができます。
| part 名 | 対象 |
| button | ボタンに適用します。その実体は <button> タグです。 |
AlierButton クラス
モジュールパス: /alier_sys/AlierButton.js
<alier-button>要素が実装しているAlierButtonは、ボタンを操作するための専用のプロパティとメソッドを提供しています。また、AlierCustomElementを継承しています。
プロパティ
disabled
このエレメントの disabled 属性です。このボタンが無効であるかどうかを表します。無効である場合、クリックを受け付けません。無効化された要素は使用できず、クリックもできません。このプロパティは標準のHTMLエレメントが持つHTMLButtonElementインターフェイスのdisableプロパティと同等です。
型
boolean
name
このエレメントの name 属性です。要素の名前を示します。このプロパティは標準のHTMLエレメントが持つHTMLButtonElementインターフェイスのnameプロパティと同等です。
型
string
value
要素の現在の値を文字列で表します。このプロパティは、直接設定することもできます。また、このプロパティは標準のHTMLエレメントが持つHTMLButtonElementインターフェイスのvalueプロパティと同等です。
型
string
メソッド
click()
ボタン要素にクリックイベントを発生させます。
イベント
継承元の HTMLElement や内部に持つ <button> から送出されるイベントもあります。
click
直接入力に反応して発火します。disabledのとき発火しません。
longpress
要素を長押しすると発火します。disabledのとき発火しません。