レスポンシブコンポーネント

Amplify Studioを使用すると、アプリのブレークポイントに基づいて異なるコンポーネントバリアント間で動的に切り替えることができます。例えば、ウィンドウが小さくなるにつれて、ナビゲーションバーを小さいサイズに縮小することができます。

1. Figmaで優先するブレークポイントを設定する

Amplify Studioで生成されたコンポーネントにブレークポイントを適用するには、AWS Amplify Theme EditorプラグインがインストールされたFigmaアカウントが必要です。

デフォルトでは、すべてのAmplify UIは以下のAmplify UIテーマの一部として次のブレークポイントを提供します：

{
  base: '0',
  small: '480px',
  medium: '768px',
  large: '992px',
  xl: '1280px',
  xxl: '1536px',
}

ブレークポイントはAmplify UIテーマレベルで設定されており、Figmaファイル内のすべてのコンポーネントに適用されます。Amplify Theme Editorプラグインを使用して、これらのブレークポイントをカスタマイズできます：

1. Figmaプロジェクトで右クリックして、Plugins > AWS Amplify Theme Editorを選択します

2. Breakpointsタブを選択して、任意のブレークポイントをクリックしてピクセル値をカスタマイズします

表示されたボックス内のグレーバーは、1920px幅のディスプレイと比較したピクセル値を示します。

2. Figmaバリアントを設定する

コンポーネントをレスポンシブにするには、ブレークポイントに基づいてコンポーネントのさまざまなバリアントを作成します。Figmaのドキュメントでバリアントの作成についてさらに詳しく学びます。

Figmaでバリアント付きコンポーネントを生成する場合、プロパティが作成され、各バリアントに割り当てられます。コンポーネントに以下の設定を行います：

1. コンポーネントプロパティ名をbreakpointに変更します
2. 各バリアントについて、breakpointの値をサポートされている値の1つ（例：small、xlなど）に設定します

3. コンポーネントをレンダリングしてテストする

Figmaでのデザインが完成したら、Amplify Studio UI Builderを使用してコンポーネントをインポートしてレンダリングします：

1. FigmaファイルをUI Builderと同期します
2. ローカルプロジェクトで、amplify pullを実行します
3. 新しいReactコンポーネントをコードにインポートしてレンダリングします
4. ウィンドウをリサイズします。前に設定したブレークポイントに基づいて、コンポーネントが自動的に変更されます

注：レスポンシブコンポーネントのレンダリングには、Amplify CLIバージョン3.1.1以上が必要です。CLIバージョンを確認するにはamplify -vを実行し、アップグレードするにはamplify upgradeを実行します

高度な設定：既存バリアント付きレスポンシブコンポーネントを設定する

Figmaでは、複数のプロパティに基づいてバリアントを作成できます。例えば、コンポーネントはbreakpointバリアント（小、中、大）とdisplayModeバリアント（ライトモード、ダークモード）を必要とする場合があります。

コンポーネントにbreakpointに加えて追加のバリアントプロパティがある場合、レスポンシブネスのために追加の手順が必要です。すべての追加プロパティにインライン値を指定するか、コンポーネントがレスポンシブにならないようにする必要があります。

以下の例では、ResponsiveToolbarコンポーネントにbreakpointとdisplayModeの両方のバリアントがあります。以下の例では、コンポーネントは自動的にレスポンシブになりません。

function App() {
  return (
    <div>
      <ResponsiveToolbar />
    </div>
  );
}
export default App;

このコンポーネントをレスポンシブにするには、displaymodeに値を指定する必要があります。以下の例では、コンポーネントは現在自動的にレスポンシブです。

function App() {
  return (
    <div>
      <ResponsiveToolbar displaymode='light' />
    </div>
  );
}
export default App;

または、多次元バリアントを別々のコンポーネントに分割することができます。各コンポーネントはbreakpointバリアントプロパティのみを持ちます。例えば、上記のコンポーネントをResponsiveToolbarLightとResponsiveToolbarDarkに分割し、条件付きでレンダリングできます。以下の例では、コンポーネントは現在自動的にレスポンシブです。

function App() {
  let darkMode = false
  return (
    <div>
      {!darkMode ? <ResponsiveToolbarLight/> : <ResponsiveToolbarDark/>}
    </div>
  );
}
export default App;