マルチフレームワークの仕組みと考察
シャッフルは、インテリジェントな基本アーキテクチャにより、異なるCSSフレームワーク間で同じコンポーネントを自動的に変換することができます:
コアメカニズム
- コンポーネント・マッピング・システム各UIコンポーネントは、異なるフレームワークに対応するバージョンのコード実装を持っている。
- クラス名変換エンジン例えばTailwindの'bg-blue-500'をBootstrapの'bg-primary'に自動的に変換します。
- フレーム対応エディター: プロパティパネルには、現在のフレームに基づいたスタイルオプションが表示されます。
使用上の推奨事項
フレームの切り替えには注意が必要だ:
- 初期化オプション新規プロジェクトの場合、ベースとなるフレームワークの明示的な選定が必要(後日変更可能だが、調整を伴う可能性がある)。
- カスタムクラスの処理手動で追加した非標準のクラス名は自動的に変換されません。
- コンポーネントの互換性フレームワーク固有のコンポーネント(Material-UIのフローティングボタンなど)は、他のフレームワークでは異なる動作をする場合があります。
- 対応の違い各フレームワークのブレークポイントシステム(例えば、Bootstrapのcol-md-*とTailwindのmd:*)を再調整する必要がある。
異なるフレームにおけるフォーム要素やナビゲーションコンポーネントのインタラクションの違いに特に注意しながら、上部のライブプレビュー機能で異なるデバイスでの表示効果を確認することをお勧めします。
この答えは記事から得たものである。Shuffle:ウェブテンプレートを素早く構築するためのドラッグ&ドロップ・エディター。について































