UI 라이브러리 - Material UI (3. 주요 UI)

<Avatar />

유저의 아바타를 엣지있게 디자인해준다.

// Stack은 단순한 wrapper 컴포넌트이며 현재 수평방향과 2의 공간을 주었다.
<Stack direction="row" spacing={2}>
  <Avatar>H</Avatar>
  <Avatar sx={{ bgcolor: deepOrange[500] }}>N</Avatar>
  <Avatar sx={{ bgcolor: deepPurple[500] }}>OP</Avatar>
</Stack>

• deepOrange와 deepPurple
  각각 mui의 color에서 import해온 각각의 색상모음 객체이다. 속성으로 농도를 지정해준다.

<TextField />

입력필드이다

<Box
  component="form"
  sx={{
    '& > :not(style)': { m: 1, width: '25ch' },
  }}
  noValidate
  autoComplete="off"
  >
  <TextField id="outlined-basic" label="Outlined" variant="outlined" />
  <TextField id="filled-basic" label="Filled" variant="filled" />
  <TextField id="standard-basic" label="Standard" variant="standard" />
</Box>

• label 속성
  label 텍스트를 지정한다.

• variant 속성
  각각의 디자인값을 정해준다
  

<Rating />

rating 점수를 매겨주는 컴포넌트이다.

<Stack spacing={1}>
  <Rating name="half-rating" defaultValue={2.5} precision={0.5} />
  <Rating name="half-rating-read" defaultValue={2.5} precision={0.5} readOnly /> 	// 읽기만 가능
</Stack>

• defaultValue 속성
  default value를 지정한다.

• precision 속성
  값의 변화 단위이다.

<Slider />

값 범위에서 선택이 가능한 컴포넌트이다.

const [value, setValue] = useState<number>(30);

const handleChange = (event: Event, newValue: number | number[]) => {
  setValue(newValue as number);
};  

return (
  <Box>
    <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center">
      <VolumeDownTwoTone />
      <Slider aria-label="Volume" value={value} onChange={handleChange} />
      <VolumeDownTwoTone />
    </Stack>
    <Slider disabled defaultValue={30} aria-label="Disabled slider" />
  </Box>
);

• defaultValue 속성
  default value를 지정한다.

• disabled 속성
  비활성화 시킨다.