はじめよう
プロジェクトを始めるところですか? テンプレートがあります！ ... こちら
Install @tremolo-ui/react
Svelte / Vue を使う場合は、代わりに @tremolo-ui/svelte / @tremolo-ui/vue をインストールします（Svelte、Vue を参照）。
- tremolo-uiをインストールします
- npm
- Yarn
- pnpm
- Bun
npm install @tremolo-ui/react
yarn add @tremolo-ui/react
pnpm add @tremolo-ui/react
bun add @tremolo-ui/react
- 依存関係をインストールします
- npm
- Yarn
- pnpm
- Bun
npm install react react-dom
yarn add react react-dom
pnpm add react react-dom
bun add react react-dom
- 必要なコンポーネントをインポートします。
index.tsx
import { Knob } from '@tremolo-ui/react'
@tremolo-ui/react が公開するのはコンポーネントと hooks だけです。スケールや
MIDI のノート名などの関数は @tremolo-ui/functions に、他のフレームワークと共通の
値や型（XY、入力の既定値、MIDI のエラーの型など）は @tremolo-ui/dom にあります。
これらから import するときは、依存に追加してください。
- npm
- Yarn
- pnpm
- Bun
npm install @tremolo-ui/functions @tremolo-ui/dom
yarn add @tremolo-ui/functions @tremolo-ui/dom
pnpm add @tremolo-ui/functions @tremolo-ui/dom
bun add @tremolo-ui/functions @tremolo-ui/dom
tremolo-ui は CSS を配りません。コンポーネントはマークアップだけを描画し、 見た目は利用者に委ねます。Styling にスタイルの当て方と、 このドキュメントの例で使っているテーマを載せてあります。
はじめのいっぽ
以下はシンプルなロータリー・ノブ・コンポーネントの例です。
アイコンをクリックしてソースコードを確認してください！