Vega UIコンポーネントライブラリを使用した開発を始める

Vega UIコンポーネント（VUIC）は、再使用可能かつカスタマイズ可能で、パフォーマンスに優れたコンポーネントのコレクションです。Vegaでのアプリ開発に役立ちます。VUICには、アクティブにメンテナンスされているいくつかのコンポーネント（カルーセル、EPG、シークバー）と追加の実験的コンポーネントが含まれています。既存のユーザーは、これらの実験的機能を引き続き使用できます。

前提条件

VUICをインストールする前に、ローカルコンピューターにVega SDKがインストールされていることを確認してください。インストールについての詳細は、Vega SDKのインストールを参照してください。

インストール

VUICは、Vegaの各パッケージと同様に、同じリポジトリ内のnpmパッケージとして利用できます。プロジェクトのルートディレクトリに移動し、以下のコマンドでVUICをインストールします。

npm install @amazon-devices/kepler-ui-components@^2.0.0

アプリへのインストールが正常に完了したことを確認するには、package.jsonを開きます。dependenciesセクションには、次の例のようにVUICライブラリが表示されます。

"dependencies": {
    // ...
    "@amazon-devices/kepler-ui-components": "^2.0.0",
}

次のコマンドを使用すると、npmリポジトリにVUICが存在するかどうかを確認できます。

$ npm search '@amazon-devices/' --registry $(npm config get @amazon-devices:registry)

使用方法

VUICパッケージをインストールしたら、ライブラリをコードにインポートできます。Carouselコンポーネントの例を以下に示します。

import React from 'react';
import { Carousel } from '@amazon-devices/kepler-ui-components';

Carouselのアップデート

バージョン2.0.0以降のライブラリにアップグレードすると、Carouselに大幅な変更が加えられているため、そのコンポーネントを使用する既存のアプリがクラッシュする場合があります。トラブルシューティングと最新バージョンへの移行方法については、Carouselのドキュメントを参照してください。

​前提条件

​インストール

​使用方法

​Carouselのアップデート

前提条件

インストール

使用方法

Carouselのアップデート