コンポーネント概要
minidev-components は MiniDev Studio に組み込まれた Web Components のコンポーネントライブラリで、Material Design 3 のデザイン言語に基づき、Custom Elements として実装されています。
特徴
- 28 コンポーネント — 基礎、フォーム、表示、レイアウト、メディアの 5 分野をカバー
- Web Components 標準で、Vue / React の両方で利用可能
- CSS 変数テーマ — 完全な MD3 デザイントークン体系
- Bridge 連携 — 一部コンポーネントは SDK からのプログラム制御に対応
- rpx レスポンシブ — ビルド時に
vwへ自動変換
基本コンポーネント
| コンポーネント | タグ | 説明 |
|---|---|---|
| View | <m-view> | ビュー容器。ホバー反応付き |
| Text | <m-text> | テキストの容器 |
| Button | <m-button> | ボタン |
| Icon | <m-icon> | SVG アイコン |
| Image | <m-image> | 画像表示 |
| Divider | <m-divider> | 区切り線 |
フォームコンポーネント
| コンポーネント | タグ | 説明 |
|---|---|---|
| Input | <m-input> | 1 行テキスト入力 |
| Textarea | <m-textarea> | 複数行テキスト入力 |
| Switch | <m-switch> | スイッチ |
| Slider | <m-slider> | スライダー |
| Radio | <m-radio-group> <m-radio> | ラジオ |
| Checkbox | <m-checkbox-group> <m-checkbox> | チェックボックス |
| Picker | <m-picker> | ピッカー |
| Calendar | <m-calendar> | カレンダー |
| Cascader | <m-cascader> | カスケード選択 |
| Form | <m-form> | フォーム容器 |
表示コンポーネント
| コンポーネント | タグ | 説明 |
|---|---|---|
| Progress | <m-progress> | プログレスバー |
| Circle | <m-circle> | 円形プログレス |
| Loading | <m-loading> | ローディング表示 |
| Skeleton | <m-skeleton> | スケルトン |
| Steps | <m-steps> <m-step> | ステップ |
| Collapse | <m-collapse> | 折りたたみパネル |
レイアウトコンポーネント
| コンポーネント | タグ | 説明 |
|---|---|---|
| ScrollView | <m-scroll-view> | スクロールビュー |
| Swiper | <m-swiper> | スワイパー |
| Popup | <m-popup> | ポップアップ |
メディアコンポーネント
| コンポーネント | タグ | 説明 |
|---|---|---|
| Video | <m-video> | 動画再生 |
テーマのカスタマイズ
CSS 変数でグローバルテーマを上書きします。
css
:root {
--m-color-primary: #6366f1;
--m-color-on-primary: #ffffff;
--m-color-surface: #ffffff;
--m-color-error: #b3261e;
--m-radius-md: 12rpx;
--m-font-size-md: 28rpx;
}変数の一覧は テーマのカスタマイズ を参照してください。