Polaris(ポラリス)のインストール

【公式】Polaris

 

Visual Studio Code への拡張機能のインストール

【公式】Polaris for VS Code
Polaris for VS Code

Visual Studio Code でPolarisで検索して[Polaris for VS Code]をインストールします。

Reactへインストール

【公式】github.com/Shopify/polaris

 $ npm install @shopify/polaris --save

スタイルシートをインポートします。
import '@shopify/polaris/build/esm/styles.css';

トランスレーションと必要な要素をインポートします。
import enTranslations from '@shopify/polaris/locales/ja.json';
import {AppProvider, Page, Card, Button} from '@shopify/polaris';

サンプルコード

ReactDOM.render(
  <AppProvider i18n={enTranslations}>
  <Page title="Example app">
    <Card sectioned>
      <Button onClick={() => alert('Button clicked!')}>Example button</Button>
    </Card>
  </Page>
  </AppProvider>,
  document.querySelector('#app'),
);

実行結果

Example

ブログに戻る

コメントを残す

コメントは公開前に承認される必要があることにご注意ください。