MUI 구성 요소
React Material UI를 사용한 UI 요소 스타일링 지침
반응 템플릿
각 레이아웃의 섹션은 주석이나 별도의 파일 사용으로 명확하게 정의되므로 다른 페이지에서 재사용하기 위해 페이지의 일부(예: "히어로 유닛" 또는 바닥글)를 간단하게 추출할 수 있습니다. 여러 부분으로 구성된 예제의 경우 링크된 소스 코드 위치에 있는 README의 표에 각 파일의 목적이 설명되어 있습니다.
기본 중단점
각 중단점(키)은 고정된 화면 너비(값)와 일치합니다.
- xs , 매우 작음: 0px
- sm , 작게: 600px
- md , 매체: 900px
- LG , 대형: 1200px
- xl , 특대형: 1536px
cd /d G: O thers r eact v ite-project
npm run dev
http://localhost:5173/
유리 진열장
Material UI를 사용하는 공개 앱을 확인하여 다음 프로젝트에 대한 영감을 얻으세요.
테마
다음은 테마를 사용자 정의하고 브라우저에서 테마를 변경하는 데 도움이 되는 유틸리티입니다.
- Material-UI 테마 만들기 - Material Design Color Tool을 통해 MUI 테마를 만들기 위한 온라인 도구입니다.
- Material-UI 테마 생성기 - Material-UI 테마/팔레트 생성기입니다.
- Material-UI 테마 편집기 - 색상을 선택하고 실시간 미리보기를 통해 MUI 앱용 테마를 생성하는 도구입니다.
관련 프로젝트
Material-UI 디자인 프로젝트 제품군.
- Material-ui-theme-editor - 실시간 미리보기 기능을 갖춘 Material UI 애플리케이션용 테마를 생성하는 도구입니다.
- 머티리얼 팔레트 생성기 - 공식 머티리얼 디자인 팔레트 생성기를 사용하면 선택한 모든 색상에 대한 팔레트를 생성할 수 있습니다.
- 추가 구성 요소 - 바닥글, CookiesBanner, BackToTop 버튼 및 사용자 정의가 가능한 기타 복잡한 요소와 같이 Material-UI 위에 구축된 "분자" 구성 요소 세트를 제공하여 개발자가 UI의 매크로 부분을 매우 빠르게 구축할 수 있도록 돕습니다. 이러한 구성 요소는 사이트 전체에 걸쳐 복제되는 경우가 많습니다. 이 라이브러리는 바로 이 문제를 해결합니다.
- React Admin - ES6, React 및 Material Design을 사용하여 REST/GraphQL API 위에 브라우저에서 실행되는 관리 애플리케이션을 구축하기 위한 프런트엔드 프레임워크입니다.
- 머티리얼 UI 스니펫 - 스니펫을 제공하는 VSCode 확장입니다.
- Material UI Codemorphs - codemod를 제공하는 VSCode 확장입니다.
- Eslint: 사용되지 않는 클래스 감지 - ESLint 플러그인은
@mui/styles 사용하여 사용되지 않는 스타일 클래스를 감지합니다.
구성요소
Material-UI 디자인으로 구축된 UI 구성 요소 목록입니다.
- Material-UI 비밀번호 필드 - Material-UI를 사용한 비밀번호 필드입니다.
- 전체 화면 대화 상자 - Material-UI용 전체 화면 대화 상자입니다.
- Material-UI 업로드 - FileAPI를 사용하여 Material-UI에서 만든 컨트롤을 업로드합니다.
- 수퍼 선택 필드 - Material-UI용 다중 선택 자동 완성 드롭다운 구성 요소입니다.
- Material JSON 스키마 양식 - json에서 생성된 Material-UI 양식입니다.
- Notistack - Material-UI를 위한 간편한 스낵바입니다(따라서 열기/닫기 상태를 처리할 필요가 없습니다).
- Material-UI Dropzone - 반응 드롭존 위에 구축된 Material-UI 구성 요소입니다.
- Formik-Material-UI - formik과 함께 Material-UI를 사용하기 위한 바인딩입니다.
- Redux-Form-Material-UI - Redux Form과 함께 Material-UI 사용을 용이하게 하는 래퍼 구성 요소입니다.
- Final-Form-Material-UI - 최종 양식과 함께 Material-UI 사용을 용이하게 하는 래퍼 구성 요소입니다.
- Material-UI 자동 회전 캐러셀 - 머티리얼 스타일 캐러셀입니다.
- Material-UI 이미지 - 로딩 애니메이션이 포함된 재질 스타일 이미지입니다.
- Material-UI Flat Pagination - Material-UI용 플랫 디자인 페이지 매김 구성 요소입니다.
- Dx-react-scheduler-Material-UI - Material-UI용 스케줄러/캘린더 구성 요소입니다.
- Dx-react-chart-Material-UI - 막대, 선, 영역, 분산형, 파이 등을 포함한 다양한 계열 유형을 사용하여 데이터를 시각화하는 Material-UI용 차트입니다.
- Material-UI Medium 블로그 - Medium 블로그를 표시하는 확장된 Material-UI 카드 구성 요소입니다.
- React Github Repo Cards - GitHub 리포지토리를 표시하는 확장 Material-UI 카드 구성 요소입니다.
- 분자 구성 요소 반응 - Material-UI를 기반으로 분자 구성 요소를 반응합니다.
- Material-UI NestedMenuItem - MUI의 MenuItem을 무한히 중첩된 메뉴로 대체하고 마우스를 올리면 열립니다.
- React-planet - 행성처럼 보이는 원형 메뉴를 만듭니다.
