/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/chips/ChipsArray.tsx
60 строк
1 KB
Siriwat K
[docs] Migrate content to the new location (#30757)
04 фев 2022, 07:13
Не верифицирован
04 фев 2022, 07:13
27f1c28
Код
Авторство
О чём код?
import * as React from 'react'; import { styled } from '@mui/material/styles'; import Chip from '@mui/material/Chip'; import Paper from '@mui/material/Paper'; import TagFacesIcon from '@mui/icons-material/TagFaces'; interface ChipData { key: number; label: string; } const ListItem = styled('li')(({ theme }) => ({ margin: theme.spacing(0.5), })); export default function ChipsArray() { const [chipData, setChipData] = React.useState<readonly ChipData[]>([ { key: 0, label: 'Angular' }, { key: 1, label: 'jQuery' }, { key: 2, label: 'Polymer' }, { key: 3, label: 'React' }, { key: 4, label: 'Vue.js' }, ]); const handleDelete = (chipToDelete: ChipData) => () => { setChipData((chips) => chips.filter((chip) => chip.key !== chipToDelete.key)); }; return ( <Paper sx={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', listStyle: 'none', p: 0.5, m: 0, }} component="ul" > {chipData.map((data) => { let icon; if (data.label === 'React') { icon = <TagFacesIcon />; } return ( <ListItem key={data.key}> <Chip icon={icon} label={data.label} onDelete={data.label === 'React' ? undefined : handleDelete(data)} /> </ListItem> ); })} </Paper> ); }