지원되는 컴포넌트
지원되는 컴포넌트 (Supported components)
Material UI가 지원하는 Material Design 컴포넌트와 기능의 목록을 확인해 볼 수 있는 페이지예요. 모든 컴포넌트를 지원하려 하기보다는, 개발자가 매력적인 UI를 만들 수 있도록 하는 빌딩 블록을 제공하는 것이 Material UI의 철학이라는 점을 알아두면 좋아요.
출처: 문서
본문
다음은 Material Design 컴포넌트 및 기능의 목록이에요.
우리는 실용적인 범위에서 Material Design 가이드라인을 따르기 위해 노력하지만(가이드라인이 서로 모순될 때는 상식에 따라 판단하기도 해요 — 실제로는 생각보다 자주 발생하는 일이죠), 모든 컴포넌트나 모든 컴포넌트의 모든 기능을 지원할 것으로 기대하지는 않아요. 오히려 개발자들이 매력적인 사용자 인터페이스와 경험을 만들 수 있도록 하는 빌딩 블록을 제공하는 데 초점을 맞춘답니다.
여기에 강조되지 않은 컴포넌트나 기능에 대한 지원을 추가하고 싶다면, 관련 GitHub Issue를 검색하거나 새로 만들어서 pull request를 보내기 전에 접근 방식에 대해 논의하세요.
import Table from '@mui/material/Table';
import TableHead from '@mui/material/TableHead';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import { Link } from '@mui/internal-core-docs/Link';
const components = [
{
name: 'Accordion',
materialUI: '/material-ui/react-accordion/',
materialDesign: 'https://m1.material.io/components/expansion-panels.html',
},
{ name: 'Alert', materialUI: '/material-ui/react-alert' },
{
name: 'App Bar: top',
materialUI: '/material-ui/react-app-bar/',
materialDesign: 'https://m2.material.io/components/app-bars-top',
},
{
name: 'App Bar: bottom',
materialUI: '/material-ui/react-app-bar#bottom-app-bar',
materialDesign: 'https://m2.material.io/components/app-bars-bottom',
},
{ name: 'Autocomplete', materialUI: '/material-ui/react-autocomplete' },
{
name: 'Banner',
materialUI: 'Composable',
materialDesign: 'https://m2.material.io/components/banners',
},
{ name: 'Avatar', materialUI: '/material-ui/react-avatar' },
{ name: 'Badge', materialUI: '/material-ui/react-badge' },
{
name: 'Bottom Navigation',
materialUI: '/material-ui/react-bottom-navigation/',
materialDesign: 'https://m2.material.io/components/bottom-navigation',
},
{ name: 'Breadcrumbs', materialUI: '/material-ui/react-breadcrumbs' },
{
name: 'Button',
materialUI: '/material-ui/react-button/',
materialDesign: 'https://m2.material.io/components/buttons',
},
{
name: 'Floating Action Button',
materialDesign:
'https://m2.material.io/components/buttons-floating-action-button',
materialUI: '/material-ui/react-floating-action-button',
},
{ name: 'Button Group', materialUI: '/material-ui/react-button-group' },
{
name: 'Card',
materialUI: '/material-ui/react-card/',
materialDesign: 'https://m2.material.io/components/cards',
},
{
name: 'Checkbox',
materialUI: '/material-ui/react-checkbox/',
materialDesign: 'https://m2.material.io/components/checkboxes',
},
{
name: 'Chip',
materialUI: '/material-ui/react-chip/',
materialDesign: 'https://m2.material.io/components/chips',
},
{
name: 'Data Grid',
materialUI: '/x/react-data-grid/',
materialDesign: 'https://m2.material.io/components/data-tables',
},
{
name: 'Date Pickers',
materialUI: '/x/react-date-pickers/',
materialDesign: 'https://m2.material.io/components/date-pickers',
},
{
name: 'Dialog',
materialUI: '/material-ui/react-dialog/',
materialDesign: 'https://m2.material.io/components/dialogs',
},
{
name: 'Divider',
materialUI: '/material-ui/react-divider/',
materialDesign: 'https://m2.material.io/components/dividers',
},
{
name: 'Drawer',
materialUI: '/material-ui/react-drawer/',
materialDesign: 'https://m2.material.io/components/navigation-drawer',
},
{
name: 'Icons',
materialUI: '/material-ui/icons/',
materialDesign: 'https://m2.material.io/design/iconography/system-icons.html',
},
{
name: 'Image List',
materialUI: '/material-ui/react-image-list/',
materialDesign: 'https://m2.material.io/components/image-lists',
},
{ name: 'Link', materialUI: '/material-ui/react-link/' },
{
name: 'List',
materialUI: '/material-ui/react-list/',
materialDesign: 'https://m2.material.io/components/lists',
},
{ name: 'Masonry', materialUI: '/material-ui/react-masonry/' },
{
name: 'Material Icons',
materialUI: '/material-ui/material-icons/',
materialDesign: 'https://fonts.google.com/icons',
},
{
name: 'Menu',
materialUI: '/material-ui/react-menu/',
materialDesign: 'https://m2.material.io/components/menus',
},
{
name: 'Modal',
materialUI: '/material-ui/react-modal/',
materialDesign: 'https://m2.material.io/components/dialogs',
},
{
name: 'Navigation Rail',
materialDesign: 'https://m2.material.io/components/navigation-rail',
},
{
name: 'Number Field',
materialUI: '/material-ui/react-number-field/',
baseUI: 'https://base-ui.com/react/components/number-field',
},
{ name: 'Pagination', materialUI: '/material-ui/react-pagination/' },
{
name: 'Paper',
materialUI: '/material-ui/react-paper/',
materialDesign: 'https://m2.material.io/design/environment/elevation.html',
},
{
name: 'Progress',
materialUI: '/material-ui/react-progress/',
materialDesign: 'https://m2.material.io/components/progress-indicators',
},
{
name: 'Radio Group',
materialUI: '/material-ui/react-radio-button/',
materialDesign: 'https://m2.material.io/components/radio-buttons',
},
{ name: 'Rating', materialUI: '/material-ui/react-rating/' },
{
name: 'Select',
materialUI: '/material-ui/react-select/',
materialDesign: 'https://m2.material.io/components/menus#exposed-dropdown-menu',
},
{ name: 'Skeleton', materialUI: '/material-ui/react-skeleton/' },
{
name: 'Slider',
materialUI: '/material-ui/react-slider/',
materialDesign: 'https://m2.material.io/components/sliders',
},
{
name: 'Snackbar',
materialUI: '/material-ui/react-snackbar/',
materialDesign: 'https://m2.material.io/components/snackbars',
},
{ name: 'Speed Dial', materialUI: '/material-ui/react-speed-dial' },
{
name: 'Stepper',
materialUI: '/material-ui/react-stepper/',
materialDesign: 'https://m1.material.io/components/steppers.html',
},
{
name: 'Switch',
materialUI: '/material-ui/react-switch/',
materialDesign: 'https://m2.material.io/components/switches',
},
{
name: 'Table',
materialUI: '/material-ui/react-table/',
materialDesign: 'https://m2.material.io/components/data-tables',
},
{
name: 'Tabs',
materialUI: '/material-ui/react-tabs/',
materialDesign: 'https://m2.material.io/components/tabs',
},
{
name: 'Text Field',
materialUI: '/material-ui/react-text-field/',
materialDesign: 'https://m2.material.io/components/text-fields',
},
{ name: 'Timeline', materialUI: '/material-ui/react-timeline/' },
{ name: 'Toggle Button', materialUI: '/material-ui/react-toggle-button/' },
{
name: 'Tooltip',
materialUI: '/material-ui/react-tooltip/',
materialDesign: 'https://m2.material.io/components/tooltips',
},
{ name: 'Transfer List', materialUI: '/material-ui/react-transfer-list/' },
{ name: 'Tree View', materialUI: '/x/react-tree-view/' },
{
name: 'Typography',
materialUI: '/material-ui/react-typography/',
materialDesign: 'https://m2.material.io/design/typography/the-type-system.html',
},
];
export default function MaterialUIComponents() {
return (
<Paper sx={{ width: '100%' }}>
<Table>
<TableHead>
<TableRow>
<TableCell>Components</TableCell>
<TableCell>Material Design</TableCell>
<TableCell>Material UI</TableCell>
</TableRow>
</TableHead>
<TableBody>
{components.map((component) => (
<TableRow key={component.name}>
<TableCell>
<Typography variant="body2">{component.name}</Typography>
</TableCell>
<TableCell>
{component.materialDesign ? (
<Link
variant="body2"
data-no-markdown-link="true"
href={component.materialDesign}
>
{component.materialDesign.substring(8, 10) === 'm1'
? 'MD 1 (legacy)'
: 'MD 2'}
</Link>
) : (
'No guidelines'
)}
</TableCell>
<TableCell>
{component.materialUI &&
component.materialUI.startsWith('/material-ui') &&
!component.baseUI ? (
<Link
variant="body2"
data-no-markdown-link="true"
href={component.materialUI}
>
Native support
</Link>
) : null}
{component.baseUI ? (
<Link
variant="body2"
data-no-markdown-link="true"
href={component.baseUI}
>
Composed with Base UI
</Link>
) : null}
{component.materialUI && component.materialUI.startsWith('/x') ? (
<Link
variant="body2"
data-no-markdown-link="true"
href={component.materialUI}
>
Support in MUI X
</Link>
) : null}
{component.materialUI === 'Composable' ? 'Composable' : null}
{component.materialUI == null ? '❌ No support' : null}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Paper>
);
}