パネル部品のサンプル

ソース
プログラム

!「貯蔵庫:panel.nako3」を取り込む
「style」のDOM部品作成して、それに『#runbox {width: 100%; box-sizing: border-box}』をHTML設定

「●パネル内配置」のラベル作成
それ＠「文字サイズ」は2em
改行作成
『[300,200]のパネル作成
それ.ボーダーは「1px solid」
それに部品作成先一時変更
「テスト」のボタン作成
それを[10,10,100,100]にパネル内配置　//[x,y,w,h]
「テスト2」のボタン作成
それを[「30%」,「40%」,「60%」,「50%」]にパネル内配置　//[x,y,w,h]
部品作成先戻す』のテキストエリア作成
それ.幅は40em
[300,200]のパネル作成
それ.ボーダーは「1px solid」
それに部品作成先一時変更
「テスト」のボタン作成
それを[10,10,100,100]にパネル内配置　//[x,y,w,h]
「テスト2」のボタン作成
それを[「30%」,「40%」,「60%」,「50%」]にパネル内配置　//[x,y,w,h]
部品作成先戻す

改行作成

「●直前部品」のラベル作成
それ＠「文字サイズ」は2em
改行作成
『「こんにちは」のエディタ作成
「発言」のボタン作成
それのクリックした時には：
　　対象の直前部品からテキスト取得　//対象はイベントが発生した部品(ボタン)
　　それを言う』のテキストエリア作成
それ.幅は40em
改行作成
「こんにちは」のエディタ作成
「発言」のボタン作成
それのクリックした時には：
　　対象の直前部品からテキスト取得　//対象はイベントが発生した部品(ボタン)
　　それを言う
改行作成　　
　　
　　
『[300,200]のパネル作成
それ.ボーダーは「1px solid」
それに部品作成先一時変更
「テスト」のボタン作成
それを[200,100]へパネル内配置
「テスト2」のボタン作成
直前部品の下側へパネル内配置
部品作成先戻す』のテキストエリア作成
それ.幅は40em
[300,200]のパネル作成
それ.ボーダーは「1px solid」
それに部品作成先一時変更
「テスト」のボタン作成
それを[200,100]へパネル内配置
「テスト2」のボタン作成
直前部品の下側へパネル内配置
部品作成先戻す

改行作成

「●レイアウト」のラベル作成
それ＠「文字サイズ」は2em
改行作成

『[300,200]のパネル作成
それに部品作成先一時変更

「A」のボタン作成して[0,0,「30%」,「20%」]にパネル内配置

「B」のボタン作成して直前部品の右側にパネル内配置
それを横長レイアウト
それ.高さは「20%」

「C」のボタン作成して2つ前部品の下側にパネル内配置
それを縦長レイアウト
それ.幅は「30%」

「D」のボタン作成して直前部品の右側にパネル内配置
それを全体レイアウト
部品作成先戻す』のテキストエリア作成
それ.幅は40em
[300,200]のパネル作成
それに部品作成先一時変更

「A」のボタン作成して[0,0,「30%」,「20%」]にパネル内配置

「B」のボタン作成して直前部品の右側にパネル内配置
それを横長レイアウト
それ.高さは「20%」

「C」のボタン作成して2つ前部品の下側にパネル内配置
それを縦長レイアウト
それ.幅は「30%」

「D」のボタン作成して直前部品の右側にパネル内配置
それを全体レイアウト
部品作成先戻す

改行作成
「●移行なんとか」のラベル作成
それ＠「文字サイズ」は2em
改行作成
『[300,200]のパネル作成
それ＠「ボーダー」は「1px solid」
それに部品作成先一時変更
「クリックすると移動します」のボタン作成
それを[5,0]へパネル内配置
それを0.4に移行ディレイ変更 //移動するまでの時間（秒）
それを1.0に移行時間変更　　//移動にかかる時間（秒）　transition-duration
それを1に移行タイミング関数変更 //0～4で指定　transition-timing-function
//0～4は ["linear","ease","ease-in","ease-out","ease-in-out"]速度の変化
それのクリック時には：
　　対象を[5,160-(対象＠「上」を整数変換)]へパネル内配置
部品作成先戻す』のテキストエリア作成
それ.幅は40em
[300,200]のパネル作成
それ＠「ボーダー」は「1px solid」
それに部品作成先一時変更
「クリックすると移動します」のボタン作成
それを[5,0]へパネル内配置
それを0.4に移行ディレイ変更 //移動するまでの時間（秒）
それを1.0に移行時間変更　　//移動にかかる時間（秒）　transition-duration
それを1に移行タイミング関数変更 //0～4で指定　transition-timing-function
//0～4は ["linear","ease","ease-in","ease-out","ease-in-out"]速度の変化
それのクリック時には：
　　対象を[5,160-(対象＠「上」を整数変換)]へパネル内配置
部品作成先戻す
作品について
作品情報

作品を編集
TKI 作
ライセンス: CC0（著作権破棄）
形式: wnako
タグ: サンプル, ライブラリ
利用バージョン: 3.7.12
アクセス数(累計): 130
アクセス数(今月): 72
更新日時: 2026/01/02 13:26 編集: 2026/01/02 14:15
作品公開情報
交流
パネル部品のサンプル

プログラム

作品情報

コメント
