BT

InfoQ ホームページ ニュース マテリアルデザイン仕様サポートを改善したMaterial-UI 4.9 リリース

マテリアルデザイン仕様サポートを改善したMaterial-UI 4.9 リリース

ブックマーク

原文(投稿日:2020/03/20)へのリンク

React UIフレームワークであるMaterial-UI先頃リリースされたバージョン4.9.0で、UIコンポーネントに多数の改良が加えられ、マテリアルデザイン仕様との整合性が向上している。

バージョン4.9.0より前のMaterial-UIではすべてのUIコンポーネントに対しての一貫したホバー効果がなかった。
このリリースでは、IconButton、ListItem、TableRowなどのいくつかの主要なUIコンポーネントにカーソルを合わせた際の不整合に、追加または解決された。

このリリースでは、多数の小さな不整合が解決され、改良されている。たとえば、4.9.0より前のバージョンでは、API呼び出しで受信したデータとしてデフォルト値が設定されている場合に複数のオートコンプリートコンポーネントのdefaultValueプロパティが更新されなかった。

Material-UI 4.9.0では、最初のレンダリング後にdefaultValueプロパティが変更されたときに値を更新するサポートが存在する。ただし、新しいデフォルト値は、コンポーネントがアプリケーション内のすべてのコンポーネントの集中型ストアと同期している場合にのみ反映される。これにより、ユーザがコンポーネント内ですでに選択した値が保持される。

Material-UIの直近のバージョンでは、アプリケーションの初期ページロード時に、パンくずリスト (breadcrumbs) ウィジェットがアイテムを積み重ね、Google Search Consoleから「クリック可能な要素が近すぎる」という警告を受け取った。

この問題は、Material-UI 4.9.0でプライベートのBreadcrumbSeparatorコンポーネントを削除することにより修正され、パンくずリストコンポーネントが初期ページのロード時に期待どおりに機能するようになった。

Material-UI 4.9.0では、開発者はTextFieldコンポーネントでhelperTextのカスタムパディングを設定できる。TextFieldは、それ自体と最終的なhelperTextに必要なだけのスペースを埋めることができる。

図に示すように、Material-UI 4.9.0より前のhelperTextの動作は次のとおりである:

また、Material-UI 4.9.0以降でのhelperTextの動作。TextFieldがビューにプッシュダウンされないことに注意してください:

Material-UI 4.9.0リリースの多数の改良点と改善点の詳細については、Material-UI 4.9.0リリースノートを参照してください。

Material-UI v4が2019年5月にリリースされた後、Material-UI v5は2021年3月にリリースされる予定である。Material-UI v5で提案されている主な変更点は、スタイルなしコンポーネント、完全なStrictモードのサポート、とりわけスタイル付きコンポーネントへの移行である。また、コンポーネントSpeedDial、AutoComponent、Rating、Pagination、Alert、ToggleボタンをLabコンポーネントからMaterial-UI v5のコアコンポーネントに移動する予定である。

Material-UI v5は、長期的に関連性を保つように設計される。これは、Material-UIが、UIを構築するためのマテリアルを提供することについてのコアであるという開発者の認識をシフトすることを目的としている。

Material-UIは有名なReact UIフレームワークの1つで、毎月600万回のnpmダウンロードと43kのGitHubスターを獲得している。Material-UIは、グリッドベースのレイアウト、レスポンシブなアニメーションとトランジション、パディング、およびライティングやシャドウなどの深度効果を使用する。

Material-UIは、Google Material Designを実装するReactコンポーネントを提供する。そのコンポーネントは、物理的な世界のオブジェクトと、それらがどのように光を反射して影を落とすかについてのテクスチャーから着想を得ている。

Material-UIは、MITライセンスの下でオープンソースソフトウェアとして使用できる。Material-UI GitHubリポジトリからの貢献を歓迎する。コントリビュータは、Material-UIコントリビューションガイドラインに従う必要がある。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。