« Material-UI » : différence entre les versions

De Banane Atomic
Aller à la navigationAller à la recherche
 
(25 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
[[Category:React]]
= Links =
= Links =
* [https://mui.com MUI]
* [https://mui.com Material-UI]
* [https://github.com/mui/material-ui/blob/master/examples/material-ui-vite-ts Example project Material-UI, Vite, TypeScript]
 
= Layout =
== [https://mui.com/material-ui/react-box Box] ==
Generic container for grouping other components like the {{boxx|div}} tag.<br>
It has access to the theme and the {{boxx|sx}} property.
<kode lang='tsx'>
import { Box } from '@mui/material';
 
<Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
  This Box renders as an HTML section element.
</Box>
</kode>
 
== [https://mui.com/material-ui/react-container Container] ==
Allows to control the maximum width by being responsive based on the viewport size.
{| class="wikitable wtp wtmono1"
! Value
! Description
|-
| xs || Extra small (up to 600px)
|-
| sm || Small (up to 960px)
|-
| md || Medium (up to 1280px)
|-
| lg || Large (up to 1920px)
|-
| xl || Extra large (up to 1536px by default, although this can vary based on your theme settings)
|}
 
<kode lang='tsx'>
import { Box, Container } from '@mui/material';
 
<Container maxWidth="sm">
    <Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
</Container>
</kode>
 
== [https://mui.com/material-ui/react-grid2 Grid v2] ==
Allows to define columns that scale and resize content. A page is splitted in 12 points.
<kode lang='tsx'>
import Grid from '@mui/material/Grid2';
 
<Grid container spacing={2}>
  <Grid size={{ xs: 6, md: 8 }}>
    <Item>xs=6 md=8</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 4 }}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 4 }}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 8 }}>
    <Item>xs=6 md=8</Item>
  </Grid>
</Grid>
</kode>
 
== [https://mui.com/material-ui/react-stack Stack] ==
One-dimensional layouts along the vertical or horizontal axis, with optional spacing and dividers between each element.
<kode lang='tsx'>
import { Stack } from '@mui/material';
 
<Stack direction="row" spacing={2}>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>
</kode>
 
= Surfaces =
== [https://mui.com/material-ui/react-paper Paper] ==
Displays content on an elevated surface.<br>
The elevation varies from 0 to 24 (default 1).
<kode lang='tsx'>
import { Paper } from '@mui/material';
 
<Paper elevation={3} />
</kode>
 
= Data Display =
== [https://mui.com/material-ui/material-icons Material Icons] ==
<kode lang='tsx'>
import AddIcon from '@mui/icons-material/Add';
 
<AddIcon />
</kode>
 
<kode lang='bash'>
npm install @mui/icons-material @mui/material @emotion/styled @emotion/react
</kode>
 
== [https://mui.com/material-ui/react-table Table] ==
<kode lang='tsx'>
import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 
<TableContainer component={Paper}>
  <Table sx={{ minWidth: 600 }} aria-label="table">
    <TableHead>
      <TableRow>
        <TableCell align="right">Name</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {rows.map((row) => (
        <TableRow
          key={row.name}
          sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
        >
          <TableCell component="th" scope="row">
            {row.name}
          </TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
</TableContainer>
</kode>
 
== [https://mui.com/material-ui/react-typography Typography] ==
* [https://mui.com/material-ui/api/typography API]
<kode lang='tsx'>
import { Typography } from '@mui/material';
 
<Typography variant="h4" gutterBottom sx={{ mt: 2 }}>
  Title
</Typography>
</kode>
 
= Inputs =
== [https://mui.com/material-ui/react-button/ Button] ==
<kode lang='tsx'>
import { IconButton } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
 
<IconButton aria-label="add" color="primary">
  <AddIcon />
</IconButton>
</kode>
 
= Styling =
<filebox fn='App.tsx' lang='html'>
<div sx={{ display: flex }}></div>
</filebox>
 
= [https://mui.com/material-ui/customization/theming Theme] =
* [https://mui.com/material-ui/customization/dark-mode Dark mode]
<filebox fn='src/main.tsx'>
import { ThemeProvider } from '@mui/material/styles';
import theme from './theme';
 
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </StrictMode>,
)
</filebox>
 
<filebox fn='src/theme.tsx'>
import { createTheme } from '@mui/material/styles';
import { red } from '@mui/material/colors';
 
const theme = createTheme({
  cssVariables: true,
  palette: {
    mode: 'dark',
    primary: {
      main: '#556cd6',
    },
    error: {
      main: red.A400,
    },
    background: {
      default: 'rgb(50, 51, 61)',
    },
  },
});
 
export default theme;
</filebox>


= Installation =
= Installation =

Dernière version du 27 octobre 2024 à 23:14

Links

Layout

Box

Generic container for grouping other components like the div tag.
It has access to the theme and the sx property.

Tsx.svg
import { Box } from '@mui/material';

<Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
  This Box renders as an HTML section element.
</Box>

Container

Allows to control the maximum width by being responsive based on the viewport size.

Value Description
xs Extra small (up to 600px)
sm Small (up to 960px)
md Medium (up to 1280px)
lg Large (up to 1920px)
xl Extra large (up to 1536px by default, although this can vary based on your theme settings)
Tsx.svg
import { Box, Container } from '@mui/material';

<Container maxWidth="sm">
    <Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
</Container>

Grid v2

Allows to define columns that scale and resize content. A page is splitted in 12 points.

Tsx.svg
import Grid from '@mui/material/Grid2';

<Grid container spacing={2}>
  <Grid size={{ xs: 6, md: 8 }}>
    <Item>xs=6 md=8</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 4 }}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 4 }}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 8 }}>
    <Item>xs=6 md=8</Item>
  </Grid>
</Grid>

Stack

One-dimensional layouts along the vertical or horizontal axis, with optional spacing and dividers between each element.

Tsx.svg
import { Stack } from '@mui/material';

<Stack direction="row" spacing={2}>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

Surfaces

Paper

Displays content on an elevated surface.
The elevation varies from 0 to 24 (default 1).

Tsx.svg
import { Paper } from '@mui/material';

<Paper elevation={3} />

Data Display

Material Icons

Tsx.svg
import AddIcon from '@mui/icons-material/Add';

<AddIcon />
Bash.svg
npm install @mui/icons-material @mui/material @emotion/styled @emotion/react

Table

Tsx.svg
import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';

<TableContainer component={Paper}>
  <Table sx={{ minWidth: 600 }} aria-label="table">
    <TableHead>
      <TableRow>
        <TableCell align="right">Name</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {rows.map((row) => (
        <TableRow
          key={row.name}
          sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
        >
          <TableCell component="th" scope="row">
            {row.name}
          </TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
</TableContainer>

Typography

Tsx.svg
import { Typography } from '@mui/material';

<Typography variant="h4" gutterBottom sx={{ mt: 2 }}>
  Title
</Typography>

Inputs

Button

Tsx.svg
import { IconButton } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';

<IconButton aria-label="add" color="primary">
  <AddIcon />
</IconButton>

Styling

App.tsx
<div sx={{ display: flex }}></div>

Theme

src/main.tsx
import { ThemeProvider } from '@mui/material/styles';
import theme from './theme';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </StrictMode>,
)
src/theme.tsx
import { createTheme } from '@mui/material/styles';
import { red } from '@mui/material/colors';

const theme = createTheme({
  cssVariables: true,
  palette: {
    mode: 'dark',
    primary: {
      main: '#556cd6',
    },
    error: {
      main: red.A400,
    },
    background: {
      default: 'rgb(50, 51, 61)',
    },
  },
});

export default theme;

Installation

Bash.svg
npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material
npm install @fontsource/roboto
main.tsx
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';