Awesome Material-UI

Material-UIを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

目次

• リソース
• 記事
• ツール
• テーマ設定
• 関連プロジェクト
• コンポーネント
• アプリケーション
• ボイラープレート

リソース

Material-UI Designの公式プロジェクトとリソース。

• Material-UI - より速く容易なウェブ開発のためのReactコンポーネント。独自のデザインシステムを構築するか、Material Designから始めましょう。

記事

• Getting started with Material-UI - ReactウェブアプリケーションでMaterial-UIをセットアップして使用する方法。
• How to autogenerate forms in React and Material-UI with MSON - Material-UIでJSONを使ってフォームを自動生成するガイド。
• Let’s Create a COVID-19 Tracker using React.js - Material-UIを使ったCOVID-19トラッカーアプリケーション開発のガイド。
• Serverless Material UI contact form - Material-UIお問い合わせフォーム開発のガイド。
• Embed Medium as a blog on your React Website — Part 2 - Material-UIを使ってReactウェブサイトにMediumをブログとして埋め込むガイド。

ツール

Material-UI Designを使用するアプリ構築に役立つツールとユーティリティ。

• Material-UI Snippets - スニペットを提供するVSCode拡張機能。
• Material-UI Codemorphs - codemodを提供するVSCode拡張機能。

テーマ設定

テーマをカスタマイズし、ブラウザー内で変更できるユーティリティ。

• Create Material-UI Theme - Material Design Color Toolを通じてMaterial-UIテーマを作成するオンラインツール。
• Material-UI Theme Generator - Material-UIテーマ／パレットジェネレーター。
• Material-UI Theme Editor - 色を選択するだけでライブプレビュー付きのMaterial-UIアプリケーションテーマを生成するツール。

関連プロジェクト

Material-UI Designファミリーのプロジェクト。

• material-ui-theme-editor - ライブプレビュー機能を備え、Material UIアプリケーションのテーマを生成するツール。
• Material palette generator - 公式Material Designパレットジェネレーター。選択した任意の色のパレットを生成できます。
• Components Extra - Footer、CookiesBanner、BackToTopボタンなど、Material-UI上に構築された「molecule」コンポーネント群を提供します。高度にカスタマイズ可能な複雑要素により、開発者はUIのマクロ部分を非常に速く構築できます。こうしたコンポーネントはサイト間で重複しがちですが、このライブラリがその問題を解決します。
• React Admin - ES6、React、Material Designを使用し、REST／GraphQL APIの上でブラウザーで動く管理アプリケーションを構築するフロントエンドフレームワーク。
• Material UI Snippets - スニペットを提供するVSCode拡張機能。
• Material UI Codemorphs - codemodを提供するVSCode拡張機能。
• Eslint: detect unused classes - @mui/stylesを使う未使用スタイルクラスを検出するESLintプラグイン。

コンポーネント

Material-UI Designで構築されたUIコンポーネントのリスト。

• Material-UI Chip Input - Angular Materialのchip inputに着想を得たMaterial-UI chip input。
• Material-UI Password field - Material-UIを使用するパスワードフィールド。
• Fullscreen Dialog - Material-UI向け全画面ダイアログ。
• Material-UI Upload - FileAPIを使用したMaterial-UI製アップロードコントロール。
• Super Select Field - Material-UI向け複数選択オートコンプリートドロップダウンコンポーネント。
• Material JSON Schema Form - jsonから生成されるMaterial-UIフォーム。
• Notistack - Material-UI向けの簡単なスナックバー（開閉状態を扱う必要がありません）。
• Material-UI Dropzone - react-dropzone上に構築されたMaterial-UIコンポーネント。
• Formik-Material-UI - formikでMaterial-UIを使用するためのバインディング。
• Redux-Form-Material-UI - Redux FormでMaterial-UIを使いやすくするラッパーコンポーネント。
• Final-Form-Material-UI - Final FormでMaterial-UIを使いやすくするラッパーコンポーネント。
• Material-UI Auto Rotating Carousel - Materialスタイルのカルーセル。
• Material-UI Image - ローディングアニメーション付きのMaterialスタイル画像。
• Material-UI Flat Pagination - Material-UI向けフラットデザインのページネーションコンポーネント。
• Dx-react-scheduler-Material-UI - Material-UI向けスケジューラー／カレンダーコンポーネント。
• Dx-react-chart-Material-UI - 棒、線、面、散布図、円など多様な系列タイプでデータを可視化するMaterial-UI向けグラフ。
• Material-UI Medium Blog - Mediumブログを表示する拡張Material-UI Cardコンポーネント。
• React Github Repo Cards - GitHubリポジトリを表示する拡張Material-UI Cardコンポーネント。
• React molecule-components - Material-UIに基づくReact molecule-components。
• Material-UI NestedMenuItem - 無限にネストしたメニューとホバーで開く機能を備える、MUIのMenuItemのドロップイン置換。
• React-planet - 惑星のように見える円形メニューを作成します。
• MUI Phone Input - 高度で非常にカスタマイズ可能なMaterial UI向け電話番号入力コンポーネント。
• mui-treasury - Material-UIに基づくすぐに使えるコンポーネントのコレクション。

アプリケーション

Material-UI Designで構築された成熟したアプリのリスト。

• Bethesda.net - Fallout、DOOM、Dishonored、Skyrim、Wolfenstein、The Elder Scrollsなどの販売元Bethesdaの公式サイト。
• TagSpaces - オフラインで使えるオープンソースのファイルマネージャー。
• Builder Book - フルスタックの本番対応ウェブアプリの構築方法を教える書籍。
• NPM registry browser - npmレジストリを検索し、パッケージ詳細を閲覧できるオープンソースウェブアプリ。
• Serverless Permission Policy Generator - Serverlessスタックをデプロイするために必要なAWS IAM権限を生成するオンラインアプリケーション。

ボイラープレート

Material-UI Designで構築されたスタータープロジェクトとボイラープレートのリスト。

• Create React App example (mui-org/material-ui) - 公式Material-UIリポジトリのCreate React App例。
• Create-react-app-material-ui - Material-UIフォーム送信例を備えるシンプルなCreate React App。
• React-materialui-boilerplate - reactとMaterial-UIのスターターキット。
• Gatsby-starter-material-ui - Material-UIを使うGatsbyスターターテンプレート。
• Saas - TypeScript、React、Express、Material-UIで構築された独自SaaS製品向けボイラープレート。
• Create-react-app-material-typescript-redux - 大規模なreactプロジェクトを始めるためのすぐに使えるボイラープレート。

貢献

あなたの貢献はいつでも歓迎します！ここをクリックしてガイドラインを読む。