Main Content

HTML を使用したカーソルを合わせると表示されるカスタム ボタンの作成

アプリを開く

この例では、HTML UI コンポーネントを使用して App Designer でカーソルを合わせると表示されるカスタム ボタン コンポーネントを作成する方法を示します。カスタム UI コンポーネントの詳細については、Create a Simple Custom UI Component in App Designerを参照してください。

アプリ作成者は、このボタンをアプリに追加することでその外観と動作をカスタマイズできます。コンポーネントのインターフェイスは以下で構成されます。

  • ボタンの外観をカスタマイズするパブリック プロパティ TextColor および Text

  • アプリ ユーザーがアプリでボタンを押すと実行されるパブリック コールバック ButtonPushedFcn

HoverButton コンポーネントの外観とホバー エフェクトは、Button.html ソース ファイルで HTML を使用して定義されます。パブリック プロパティとコールバックを含むコンポーネントのインターフェイスと動作は、App Designer で HoverButton.mlapp ファイルにより定義されます。

HoverButton.mlapp ファイルの基となるコンポーネントは、その HTMLSource プロパティが Button.html ファイルとして指定されている HTML UI コンポーネントです。2 つのファイルは Data プロパティと DataChanged イベントを使用して相互に通信し、MATLAB® の HTML UI コンポーネントと HTML ソース ファイルの htmlComponent JavaScript® オブジェクト間で同期されます。

カスタム コンポーネントの動作を検証するには、MATLAB コマンド ウィンドウで HoverButton オブジェクトをプログラムにより作成します。Text プロパティを名前と値のペアとして指定して、既定のボタン テキストを変更します。ボタンにポインターを合わせてホバー エフェクトを確認します。

comp = HoverButton(Text="Click me");

ボタンの色を黒に、フォントの色を白に更新します。

comp.BackgroundColor = "black";
comp.TextColor = "white";

ユーザーがボタンを押したときにコマンド ウィンドウにテキストを表示するコールバック関数を作成します。

comp.ButtonPushedFcn = @(src,event)disp("Button pushed");

ボタンをクリックします。テキスト "Button pushed" が表示されます。

参考

関連するトピック