92 lines
3.8 KiB
Markdown
92 lines
3.8 KiB
Markdown
# Svg
|
||
|
||
コンポーネント機能：SVGアイコンの読み込みと表示をサポート。色の動的設定、点滅効果、サイズの自動調整に対応。
|
||
タイプ：通常コンポーネント
|
||
親コンポーネント：bricks.VBox
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ名 | 型 | 説明 |
|
||
|------------|--------|------|
|
||
| `rate` | Number | 拡大縮小比率。デフォルトは1で、幅（cwidth）および高さ（cheight）に影響します。 |
|
||
| `url` | String | SVGファイルのURLアドレス。これによりSVGコンテンツを動的に読み込みます。 |
|
||
| `color` | String | SVGの塗りつぶし色（オプション）。未指定の場合、アプリからデフォルト色を取得します。 |
|
||
| `blinktime`| Number | 点滅間隔（ミリ秒単位）。設定すると、定期的に表示/非表示を繰り返す点滅が有効になります。 |
|
||
|
||
> **説明**：
|
||
> - `cwidth` および `cheight` は自動的に `rate` の値に設定されます。
|
||
> - `dynsize` は固定でtrueとなり、動的サイズ調整が有効です。
|
||
> - `color` が指定されていない場合、`bricks.app.get_color()` を呼び出してデフォルト色を取得します。
|
||
|
||
## 主なイベント
|
||
|
||
カスタムイベントはありませんが、DOMイベントのバインディングによりインタラクションが可能です。
|
||
|
||
---
|
||
|
||
# StatedSvg
|
||
|
||
コンポーネント機能：`Svg` を継承した、複数の状態切り替えに対応するSVGコンポーネント。各状態には対応するSVGリソースURLが割り当てられ、クリック時に状態を順番に循環して切り替え、状態変更イベントを発生させます。
|
||
タイプ：通常コンポーネント
|
||
親コンポーネント：bricks.Svg
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ名 | 型 | 説明 |
|
||
|-----------|--------|------|
|
||
| `states` | Array<{state: String, url: String}> | 状態の配列。各要素は状態識別子と対応するSVG URLを含みます。 |
|
||
| `state` | String | 初期状態。未設定の場合は、`states[0].state` がデフォルトで使用されます。 |
|
||
|
||
> 例：
|
||
> ```js
|
||
> states: [
|
||
> { state: 'on', url: '/icons/light_on.svg' },
|
||
> { state: 'off', url: '/icons/light_off.svg' }
|
||
> ]
|
||
> ```
|
||
|
||
## 主なイベント
|
||
|
||
| イベント名 | 発生タイミング |
|
||
|------------------|--------------|
|
||
| `state_changed` | 状態が変更されたときに発生。新しい状態を引数として渡します。 |
|
||
|
||
> 使用例：
|
||
> ```js
|
||
> widget.on('state_changed', function(newState) {
|
||
> console.log('State changed to:', newState);
|
||
> });
|
||
> ```
|
||
|
||
---
|
||
|
||
# MultipleStateIcon
|
||
|
||
コンポーネント機能：複数の状態を持つアイコンコンポーネント。キーと値のペア形式で、複数の状態と対応するSVG URLを管理します。クリックで状態を循環し、表示内容を更新します。
|
||
タイプ：通常コンポーネント
|
||
親コンポーネント：bricks.Svg
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ名 | 型 | 説明 |
|
||
|------------|--------------------|------|
|
||
| `urls` | Object<String: String> | キーは状態名、値は対応するSVGのURL。例：`{ normal: '...', active: '...' }` |
|
||
| `state` | String | 初期状態。`urls` 内のいずれかのキー名である必要があります。 |
|
||
|
||
> 例：
|
||
> ```js
|
||
> urls: {
|
||
> play: '/icons/play.svg',
|
||
> pause: '/icons/pause.svg',
|
||
> stop: '/icons/stop.svg'
|
||
> },
|
||
> state: 'play'
|
||
> ```
|
||
|
||
## 主なイベント
|
||
|
||
| イベント名 | 発生タイミング |
|
||
|------------------|--------------|
|
||
| `state_changed` | `change_state` メソッドが成功して状態が切り替わった後に発生。新しい状態名を引数として渡します。 |
|
||
|
||
> `.on('state_changed', ...)` で状態変更を監視できます。 |