Getting Started

install · style · umbrella JS · setPrefix

インストール

npm install @b4moss/the-wheels

現行は 0.12.0。npm 公開までは、このリポジトリを workspace / file: 参照で利用してください。

CSS（全部入り）

@import "@b4moss/the-wheels/style";

JavaScript（umbrella）

コンポーネントは import 時にカスタム要素として自動登録されます。

import { TwButton, TwAvatar } from "@b4moss/the-wheels";

プレフィックスを変える場合は、コンポーネントを import する前に setPrefix を呼んでください。

import { setPrefix } from "@b4moss/the-wheels";

setPrefix("app"); // タグは app-button など

// setPrefix のあとにコンポーネントを読み込む
import { TwButton } from "@b4moss/the-wheels";

TypeScript

型は umbrella / components からそのまま import できます。

import { TwButton, TwAvatar, setPrefix } from "@b4moss/the-wheels";
import type { TwModal } from "@b4moss/the-wheels";

setPrefix("tw");

const modal = document.querySelector("tw-modal") as TwModal | null;
modal?.showModal();

Storybook

コンポーネントのカタログ確認は Storybook です。説明・デモ導線はこの kitchen-sink、カタログは Storybook、と役割を分けています。

cd dev
npm run dev:storybook