見出し画像

Create|コンポーネント

そもそもコンポーネントとは?

デザインや機能の一部をパッケージ化して分離する機能のこと。
目的としてはコンテンツのロックであったり、複雑な機能の細部の作り込みを行う時に使ったりする。

1:コンテンツのロック

プロンプトから全体の修正をしようとした時に特定の部分だけ変更したいもしくは特定の部分だけを変更したくないという時に一部にロックをかけることができる。
特定の場所だけ変更したい場合はコンポーネント化した後にコンポーネント編集に入りそこで詳細の編集ができる。
特定の場所だけ変更したくない場合は変更したくないところをコンポーネントした後全体のプロンプトを書き換えることでコンポーネント内をマスクした状態で全体をリフレッシュできる

2:細部の作り込み

コンテンツのロックと似ているけれども、そもそも1ページ内で複雑なことを複数処理する時はコンポーネントとしてパーツを分けた方が管理がしやすい。また分離して考えることで細かいところまで作り込みをしていくことができる。

コンポーネント化のやり方(3つの方法)

1|生成されたサンプルから選択して指定
編集中の画面でビルドモードになっている時に要素をクリックすることでその要素に対するプロンプトが右のカラムに表示される。そこに表示されたコンポーネントに変換というボタンを押すとコンポーネントができる。

2|プロンプトの文字列から指定
全体の仕様を決めているプロンプトの文字列の一部をカーソルで選択すると、コンポーネントに変換という選択肢が出てくるのでそれをクリックしてコンポーネント化できる。

3|ダッシュボードから直接作成
ダッシュボード右上にある新規コンポーネントのボタンを押すことで直接コンポーネントの作成画面に行ける

コンポーネント化した後の使い方

コンポーネントのやり方の1番と2番であればプロンプトの中に自動的にコンポーネントが呼び込まれているはず。
ダッシュボードから直接コンポーネントを作成した場合はそのコンポーネントを利用したいページのプロンプトのところで / を入力すると出てくるポップアップの中からコンポーネントのタブを選択することで作成済みのコンポーネント一覧が表示されるのでそこから目的のものを選ぶ。


いいなと思ったら応援しよう!