コンテンツにスキップ
ドキュメント

オブジェクト

$comp

$compはアクションから動的にコンポーネントを定義するためのオブジェクトです。
v4.1.0で追加された機能です。

以下の構文でアクションから動的にコンポーネントを定義することが出来ます。

new $comp.{コンポーネント型}(プロパティオブジェクト: prop);

定義可能なコンポーネント型は以下の通りです。

コンポーネントコンポーネント型必須プロパティ備考
テキスト入力TextField1. id
2. x
3. y
テキストエリアTextArea1. id
2. x
3. y
数値入力NumberField1. id
2. x
3. y
高精度数値BigNumber1. id
2. x
3. y
検索フィールドSearchField1. id
2. x
3. y
パスワードPassword1. id
2. x
3. y
セレクトボックスSelect1. id
2. x
3. y
コンボボックスCombobox1. id
2. x
3. y
ラジオボタンRadioButton1. id
2. x
3. y
ラジオボタングループRadioGroup1. id
2. x
3. y
チェックボックスCheckbox1. id
2. x
3. y
チェックボックスグループCheckboxGroup1. id
2. x
3. y
スイッチSwitch1. id
2. x
3. y
レーティングRating1. id
2. x
3. y
スライダーSlider1. id
2. x
3. y
スプレッドシートSpreadsheet1. id
2. x
3. y
日付ピッカーDatePicker1. id
2. x
3. y
時刻ピッカーTimePicker1. id
2. x
3. y
日時ピッカーDateTimePicker1. id
2. x
3. y
ファイルFileUpload1. id
2. x
3. y
ボタンButton1. id
2. x
3. y
アイコンボタンIconButton1. id
2. x
3. y
2D スキャナQrScanner1. id
2. x
3. y
タイポグラフィーTypography1. id
2. x
3. y
リッチテキストRichText1. id
2. x
3. y
イメージImage1. id
2. x
3. y
イメージリストImageList1. id
2. x
3. y
外部リソースExternalResource1. id
2. x
3. y
カルーセルCarousel1. id
2. x
3. y
アバターAvatar1. id
2. x
3. y
基本リストBasicList1. id
2. x
3. y
詳細リストDetailedList1. id
2. x
3. y
ファイルビューFileView1. id
2. x
3. y
マップMapEmbed1. id
2. x
3. y
アプリバーAppBar1. id1. キャンバスに追加できるアプリバーは１つまでとなります。
2. 既にキャンバス内にアプリバーがある場合は追加で生成することはできません。
リンクLink1. id
2. x
3. y
パンくずリストBreadcrumbs1. id
2. x
3. y
ステッパーStepper1. id
2. x
3. y
ボトムナビゲーションBottomNavigation1. id1. キャンバスに追加できるボトムナビゲーションは１つまでとなります。
2. 既にキャンバスにボトムナビゲーションがある場合は追加で生成することはできません。
ツリービューTreeView1. id
2. x
3. y
ボックスBox1. id
2. x
3. y
区切り線Divider1. id
2. x
3. y
ラインチャートLineChart1. id
2. x
3. y
バーチャートBarChart1. id
2. x
3. y
エリアチャートAreaChart1. id
2. x
3. y
パイチャートPieChart1. id
2. x
3. y
レーダーチャートRadarChart1. id
2. x
3. y
イベントカレンダーEventCalendar1. id
2. x
3. y

動的にコンポーネントを定義する場合、以下のイベントに対応したコンポーネントのみ、イベント発生時にアクションを実行させることが出来ます。

  • クリックイベント
  • チェンジイベント

定義例）

const image = new $comp.Image({
    id: "image_1",
    width: 250,
    height: 250,
    x: 50,
    y: 100,
    value: "/sample/01.png",
    objectFit: "contain",
    clickEvent: "detachedAction",
    detachedAction: "show_detail"
})

動的にコンポーネントを定義する場合のみ、コンポーネントに用意されたプロパティに加えて以下のプロパティを指定することが出来ます。

プロパティ名型設定可能な値説明
sendOnAction真偽1. true
2. false (default)		1. true の場合、切り離されたアクションでこのコンポーネントのプロパティにアクセスすることができます。
2. false の場合、切り離されたアクションでこのコンポーネントのプロパティにアクセスすることができません。
zIndex数値default: 0コンポーネント同士が重なった場合により数値が大きいものが前面に表示されます。