ポータルコンポーネント

UXPinのキャンバス外、つまり画面の特定の位置に選択したコンポーネントを表示させる場合、 ポータル（Portal）コンポーネントを使用します。

例えば、通知のコンポーネント（「Toast」や「Snackbar」）は、画面の上部または下部に表示されます。また、「モーダル」（または「ダイアログ」）コンポーネントはPortalでレンダリングする必要があります。

JSDocコメント@uxpincomponentを使用して、UXPinでプレビュー でこの機能を有効にします。：

/**
 * @uxpinuseportal
 */
function Dialog(props) {
}

<aside> 🖇️ 備考 ポータルコンポーネントは、UXPinエディタのキャンバスの位置に関係なく、どこにでも配置することができます。

</aside>

コメントによるマークコンポーネント

コンポーネントのプロパティは、class/functionのデフォルトのエクスポートに基づいて順序付けされます。コンポーネントのエクスポート機能を自分のプロップを公開するclass/function以外の関数によってwrapされている場合、順序付けはできません。

export default withAppProvider<Props>()(Button);

上記の例のButtonコンポーネントでは、プロパティをシリアル化はできません。（プロパティパネルに表示することができません）

これを対処するには、このコンポーネントを扱うためのJSDocコメントを追加する必要があります。

/**
 * @uxpincomponent
 */export class Button extends React.PureComponent {
// ...
}

クラス / 関数の前に @uxpincomponentのコメントを追加する必要があります。

コンポーネントの名前空間

ライブラリでは、ネストされたコンポーネント （nested components）を使用することができます。これは、コンポーネントが別のコンポーネントを含むことを意味します。下記のように使用します。

import Autocomplete from '../Autocomplete';
 
const textField = (
  <Autocomplete.ComboBox.TextField
    onChange={this.updateText}
    label="Tags"
    value={this.state.inputText}
    placeholder="Vintage, cotton, summer"
  />
);
 
export default (
  <Autocomplete
    allowMultiple
    textField={textField}
    listTitle="Suggested Tags"
  />
);

ここでは、3つのレベルのコンポーネントがあります: