@mui/material#Chip JavaScript Examples
The following examples show how to use
@mui/material#Chip.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: PublishedTag.jsx From Edlib with GNU General Public License v3.0 | 6 votes |
|
PublishedTag = ({ isPublished, isDraft }) => {
const { t } = useTranslation();
return (
<div>
<Chip
icon={
isDraft ? (
<WarningAmber />
) : isPublished ? (
<Visibility />
) : (
<VisibilityOff />
)
}
label={_.capitalize(
isDraft
? t('draft')
: isPublished
? t('published')
: t('unpublished')
)}
size="small"
sx={{
backgroundColor: isDraft
? '#FFECB3'
: isPublished
? '#A8E994'
: null,
}}
/>
</div>
);
}
Example #2
| Source File: ColorfulChip.js From react-saas-template with MIT License | 6 votes |
|
function ColorfulChip(props) {
const { color, label, className } = props;
return (
<Chip
style={{
color: color,
backgroundColor: shadeColor(color, 0.7)
}}
label={label}
className={className ? className : null}
/>
);
}
Example #3
| Source File: FilterChips.jsx From Edlib with GNU General Public License v3.0 | 5 votes |
|
FilterChips = ({ chips, color = 'secondary' }) => {
const { classes } = useStyles();
return (
<Box paddingY={1}>
{chips.map((chip) => (
<Chip
key={chip.value}
label={chip.title}
onDelete={chip.onDelete}
color={color}
className={classes.chip}
/>
))}
</Box>
);
// return (
// <Box paddingY={1}>
// {filters.contentTypes.value.map((contentType, index) => (
// <Chip
// key={contentType.value}
// label={contentType.title}
// onDelete={
// allowChange
// ? () => filters.contentTypes.removeIndex(index)
// : null
// }
// color={color}
// className={classes.chip}
// />
// ))}
// {filters.licenses.value.map((license, index) => (
// <Chip
// key={license.value}
// label={license.title}
// onDelete={
// allowChange
// ? () => filters.licenses.removeIndex(index)
// : null
// }
// color={color}
// className={classes.chip}
// />
// ))}
// </Box>
// );
}
Example #4
| Source File: BadgeAutocomplete.jsx From matx-react with MIT License | 5 votes |
|
BadgeAutocomplete = () => {
const theme = useTheme();
return (
<Box
sx={{
width: 500,
'& > * + *': {
marginTop: theme.spacing(3),
},
}}
>
<Autocomplete
multiple
id="tags-standard"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={[top100Films[13]]}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label="Multiple values"
placeholder="Favorites"
fullWidth
/>
)}
/>
<Autocomplete
multiple
id="tags-outlined"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={[top100Films[13]]}
filterSelectedOptions
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
label="filterSelectedOptions"
placeholder="Favorites"
fullWidth
/>
)}
/>
<Autocomplete
multiple
id="tags-filled"
options={top100Films.map((option) => option.title)}
defaultValue={[top100Films[13].title]}
freeSolo
renderTags={(value, getTagProps) =>
value.map((option, index) => (
<Chip variant="outlined" label={option} {...getTagProps({ index })} />
))
}
renderInput={(params) => (
<TextField
{...params}
variant="filled"
label="freeSolo"
placeholder="Favorites"
fullWidth
/>
)}
/>
</Box>
);
}
Example #5
| Source File: DetailedExpansionPanel.jsx From matx-react with MIT License | 5 votes |
|
export default function DetailedExpansionPanel() {
return (
<AccordionRoot>
<Accordion defaultExpanded>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1c-content"
id="panel1c-header"
>
<Box className="column">
<Typography className="heading">Location</Typography>
</Box>
<Box className="column">
<Typography className="secondaryHeading">Select trip destination</Typography>
</Box>
</AccordionSummary>
<AccordionDetails className="details">
<Box className="column" />
<Box className="column">
<Chip label="Barbados" onDelete={() => {}} />
</Box>
<Box className="column helper">
<Typography variant="caption">
Select your destination of choice
<br />
<a href="#sub-labels-and-columns" className="link">
Learn more
</a>
</Typography>
</Box>
</AccordionDetails>
<Divider />
<AccordionActions>
<Button size="small">Cancel</Button>
<Button size="small" color="primary">
Save
</Button>
</AccordionActions>
</Accordion>
</AccordionRoot>
);
}
Example #6
| Source File: TaskQ.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, taskq, tableState, handleMatch, handleRequestSort,
handleEdit } = this.props;
const { order, orderBy, match, snackbar } = tableState;
const writable = this.context.includes(SYSTEM_ADMIN_WRITE);
return (
<TableViewContainer
headline={t("Task queue")}
href="https://docs.grommunio.com/admin/administration.html#taskq"
// subtitle={t("taskq_sub")}
snackbar={snackbar || this.state.snackbar}
onSnackbarClose={this.handleSnackbarClose}
>
<Grid container alignItems="flex-end" className={classes.chipGrid}>
<Chip
className={classes.chip}
label={t(taskq.running ? "Running" : "Not running")}
color={taskq.running ? "success" : "secondary"}
/>
<Chip
className={classes.chip}
label={"Queued: " + taskq.queued}
color={"primary"}
/>
<Chip
className={classes.chip}
label={"Workers: " + taskq.workers}
color={"primary"}
/>
</Grid>
<Grid container alignItems="flex-end" className={classes.buttonGrid}>
<Button
variant="contained"
color="primary"
onClick={this.handleStart}
disabled={!writable || taskq.running}
>
{t("Start server")}
</Button>
<div className={classes.actions}>
<TextField
value={match}
onChange={handleMatch}
placeholder={t("Search tasks")}
variant={"outlined"}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search color="secondary" />
</InputAdornment>
),
}}
color="primary"
/>
</div>
</Grid>
<Typography className={classes.count} color="textPrimary">
{t("showingTaskq", { count: taskq.Tasks.length })}
</Typography>
<Paper elevation={1}>
<Table size="small">
<TableHead>
<TableRow>
{this.columns.map((column) => (
<TableCell key={column.value}>
<TableSortLabel
active={orderBy === column.value}
align="left"
direction={orderBy === column.value ? order : "asc"}
onClick={handleRequestSort(column.value)}
>
{t(column.label)}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{taskq.Tasks.map((obj, idx) =>
<TableRow key={idx} hover onClick={handleEdit('/taskq/' + obj.ID)}>
<TableCell>{obj.command}</TableCell>
<TableCell>{t(this.getTaskState(obj.state))}</TableCell>
<TableCell>{obj.message}</TableCell>
<TableCell>{obj.created ? setDateTimeString(obj.created) : ''}</TableCell>
<TableCell>{obj.updated ? setDateTimeString(obj.updated) : ''}</TableCell>
</TableRow>
)}
</TableBody>
</Table>
{taskq.Tasks.length < taskq.count && (
<Grid container justifyContent="center">
<CircularProgress
color="primary"
className={classes.circularProgress}
/>
</Grid>
)}
</Paper>
</TableViewContainer>
);
}
