Material UIドキュメント日本語訳

  • はじめに
    • 概要
    • インストール
    • 使い方
    • サンプルプロジェクト
    • React テンプレート
    • 学習教材
    • デザインリソース
    • FAQ集
    • サポートされているコンポーネント
    • サポートされているプラ​​ットフォーム
    • サポート

Material UI - 概要

Material UI とは、Google のマテリアルデザインを実装したオープンソースの React コンポーネントライブラリです。 必要な機能は全て内包されているので、すぐに本番環境で使用できます。

はじめに

Material UI とは、Google のマテリアルデザインを実装したオープンソースの React コンポーネントライブラリです。

Material UIの利点

  • Ship faster:2,500 人を超えるオープンソース貢献者が、これらのコンポーネントに数え切れないほどの時間を費やしてきました。 あなたは車輪の再発明をするのではなく、コアビジネスロジックに集中してください。—UI は私たちがカバーします。
  • Beautiful by default:私たちはマテリアルデザインの実装に細心の注意を払っており、すべてのマテリアル UI コンポーネントが形式と機能の最高基準を満たすようにしています。 ですが必要に応じて、公式仕様から逸脱したいくつかの優れたオプションを提供しています。
  • Customizability:このライブラリには直感的にカスタマイズできる幅広い機能が含まれています。 私たちのストアにあるこれらのテンプレートでカスタマイズによってどこまでできるかを例示しています。
  • Cross-team collaboration:Material UI の直感的な開発体験により、バックエンド開発者や技術に詳しくないデザイナーの参入障壁が下がり、チームがより効果的に共同作業できるようになります。 このデザインキットはワークフローを合理化し、デザイナーと開発者間の一貫性を高めます。
  • Trusted by thousands of organizations:Material UI は、React エコシステムにおける最大の UI コミュニティを擁しています。 これは React 自体と同じくらい古く(その歴史は 2014 年にまで遡ります)、私たちはこれを長期にわたって続けています。 今後も何年にもわたってコミュニティのサポートを期待できます(たとえばStack Overflow)。

Material UI vs. Base UI

Material UI と Base UI には多くの同じ UI コンポーネントが備わっていますが、Base UI にはデフォルトのスタイルやスタイリング ソリューションは付属していません。

Material UIには必要なものが全て内包されています。デフォルトのスタイルがパッケージ化されて付属しており、Emotion(もしくはstyled-components)で動作するよう最適化されています。

対照的に、Base UI はMaterial UI の「スケルトン」版または「ヘッドレス」版と考えることができます。 実際、Material UI の将来のバージョンではその基本構造に Base UI コンポーネントとフックが使用される予定です。

今すぐ始めよう

以下の役立つリソースを活用して今すぐ Material UI を始めましょう。:

インストール

数行のコマンドを使うだけでプロジェクトに Material UI を追加します。

使い方

Material UI コンポーネントの基礎を学びます。

サンプルプロジェクト

プロジェクトで直ぐに使える定型文集です。

コンポーネントのカスタマイズ

便利なカスタマイズ方法について学習します。

テンプレート

無料のテンプレートの中から始めましょう。

デザインリソース

お気に入りのデザイン ツールの Material UI コンポーネントです。

Material UI - Overview

Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.

Introduction

Material UI is an open-source React component library that implements Google's Material Design.

Advantages of Material UI

  • Ship faster: Over 2,500 open-source contributors have poured countless hours into these components. Focus on your core business logic instead of reinventing the wheel—we've got your UI covered.
  • Beautiful by default: We're meticulous about our implementation of Material Design, ensuring that every Material UI component meets the highest standards of form and function, but diverge from the official spec where necessary to provide multiple great options.
  • Customizability: The library includes an extensive set of intuitive customizability features. The templates in our store demonstrate how far you can go with customization.
  • Cross-team collaboration: Material UI's intuitive developer experience reduces the barrier to entry for back-end developers and less technical designers, empowering teams to collaborate more effectively. The design kits streamline your workflow and boost consistency between designers and developers.
  • Trusted by thousands of organizations: Material UI has the largest UI community in the React ecosystem. It's almost as old as React itself—its history stretches back to 2014—and we're in this for the long haul. You can count on the community's support for years to come (for example Stack Overflow).

Material UI vs. Base UI

Material UI and Base UI feature many of the same UI components, but Base UI comes without any default styles or styling solutions.

Material UI is comprehensive in that it comes packaged with default styles, and is optimized to work with Emotion (or styled-components).

Base UI, by contrast, could be considered the "skeletal" or "headless" counterpart to Material UI—in fact, future versions of Material UI will use Base UI components and hooks for its foundational structure.

Start now

Get started with Material UI today through some of these useful resources:

Installation

Add Material UI to your project with a few commands.

Usage

Learn the basics about Material UI components.

Example projects

A collection of boilerplates to jumpstart your next project.

Customizing components

Learn about the available customization methods.

Templates

Get started with a selection of free templates.

Design resources

The Material UI components in your favorite design tool.

注意事項

  • 本サイトはMaterial UIのサイトを翻訳したものであり、Material UIに関する著作権は全てそちらに帰属しています。
  • 本サイトは現在翻訳中のため、未翻訳の項目が存在します。
  • 誤訳が判明した場合、より分かりやすい言い回しが見つかった場合、原文が変更された場合などにより、本サイトの内容は予告なく変更されることがあります。
  • 翻訳の内容には誤りがある可能性があります。本サイトの記述内容によって不利益が発生した場合も、サイト管理人は一切の責任を負いません。