HTML+JS
HTML
コンポーネントのHTMLコードを登録します。
JS
コンポーネントのJavaScriptコードを登録します。
すべてのコンポーネントで共通で呼び出すことができるグローバルなコードになります。
Tips
重複コード 他のコンポーネントで同名の関数を登録すると重複コードになります。ご注意ください。
Pug
HTMLの代わりにPugでコードを登録することができます。
CSSとJSはHTML+JSで登録したコードと共通になります。
React
Reactで実装したUIコンポーネントを登録できます。
コンポーネント実装
Reactコンポーネントの実装を登録します。
①コンポーネント名
Reactコンポーネントの名前を登録します。
ダウンロード時に生成されるファイルで、exportするコンポーネント名になります。
②コンポーネント実装コード
Reactコンポーネントの実装コードを登録します。
クラスコンポーネントと関数コンポーネントの両方に対応しています。関数コンポーネントではHooksにも対応します。
import で別ページに登録したReactコンポーネントを参照して使用することも可能です。
コンポーネント利用例
「コンポーネント実装」に登録したReactコンポーネントの利用例のサンプルを登録します。
「コンポーネント利用例」に登録したコードがプレビューエリアに表示されます。
import で登録したReactコンポーネントを参照して使用することができます。
また、別ページに登録したReactコンポーネントを参照することも可能です。
Vue.js
Vue.js で実装したUIコンポーネントを登録できます。 style の scoped には対応していません。 CSSはUXHub全体でグローバルなスタイルになります。
コンポーネント実装
①コンポーネント名
Vue.jsコンポーネントの名前を登録します。
コンポーネントを読み込んで利用するときのコンポーネント名になります。
②コンポーネント実装コード（template）
Vue.jsの単一ファイルコンポーネントのtemplate部分の実装コードを登録します。
③コンポーネント実装コード（script）
Vue.jsの単一ファイルコンポーネントのscript部分を登録します。
import で別ページに登録したVue.jsのコンポーネントを参照して使用することも可能です。
コンポーネント使用例
作成したVue.jsコンポーネントの利用例を登録します。
コンポーネント利用例に登録したコードがプレビューエリアに表示されます。
①コンポーネント利用例サンプルコード（template）
単一ファイルコンポーネントのtemplate部分のコードを記述します
②コンポーネント利用例サンプルコード（script）
単一ファイルコンポーネントのscript部分のコードを記述します。
import で登録したVue.jsコンポーネントを参照して使用することができます。 また、別ページに登録したVue.jsコンポーネントを参照することも可能です。