@material-ui/icons#ListAlt TypeScript Examples

The following examples show how to use @material-ui/icons#ListAlt. 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: with-full-config.tsx    From react-component-library with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up 
withFullConfig = (): StoryFnReactReturnType => {
    const useStyles = makeStyles({
        title: {
            fontWeight: 400,
        },
    });
    const classes = useStyles();

    return (
        <ScoreCard
            style={{ width: 400, flex: '0 0 auto' }}
            headerTitle={text('headerTitle', 'Substation 3')}
            headerSubtitle={text('headerSubtitle', 'High Humidity Alarm')}
            headerInfo={text('headerInfo', '4 Devices')}
            headerColor={color('headerColor', Colors.blue[500])}
            headerFontColor={color('headerFontColor', Colors.white[50])}
            headerBackgroundImage={boolean('headerBackgroundImage', true) ? backgroundImage : undefined}
            actionLimit={number('actionLimit', 3, { range: true, min: 1, max: 6, step: 1 })}
            actionItems={actionItems}
            actionRow={actionRow}
            badge={
                <HeroBanner>
                    {heroes.slice(0, number('Number of Heroes', 1, { range: true, min: 0, max: 2, step: 1 }))}
                </HeroBanner>
            }
            badgeOffset={number('badgeOffset', -40)}
        >
            <List style={{ padding: '.5rem 0' }}>
                <InfoListItem
                    dense
                    style={{ height: '2.25rem' }}
                    title={'0 Alarms'}
                    icon={<Notifications color={'inherit'} />}
                    classes={{ title: classes.title }}
                />
                <InfoListItem
                    dense
                    style={{ height: '2.25rem' }}
                    fontColor={useDarkMode() ? Colors.blue[300] : Colors.blue[500]}
                    iconColor={useDarkMode() ? Colors.blue[300] : Colors.blue[500]}
                    title={'1 Event'}
                    icon={<ListAlt color={'inherit'} style={getLeftToRightIconTransform()} />}
                />
                <InfoListItem
                    dense
                    style={{ height: '2.25rem' }}
                    title={'Online'}
                    icon={<Cloud color={'inherit'} />}
                    classes={{ title: classes.title }}
                />
            </List>
        </ScoreCard>
    );
}
Example #2
Source File: with-score-badge.tsx    From react-component-library with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up 
withScoreBadge = (): StoryFnReactReturnType => {
    const useStyles = makeStyles({
        title: {
            fontWeight: 400,
        },
    });
    const classes = useStyles();

    return (
        <ScoreCard
            style={{ width: 400, flex: '0 0 auto' }}
            headerTitle={'Substation 3'}
            headerSubtitle={'Normal'}
            headerInfo={'4 Devices'}
            headerFontColor={Colors.white[50]}
            headerBackgroundImage={backgroundImage}
            actionItems={[<MoreVert onClick={action('clicked more')} key={'morevert'} />]}
            actionRow={actionRow}
            badge={
                <HeroBanner>
                    <Hero
                        icon={<GradeA fontSize={'inherit'} htmlColor={Colors.green[500]} />}
                        label={'Grade'}
                        iconSize={72}
                        iconBackgroundColor={useDarkMode() ? Colors.black[900] : Colors.white[50]}
                        value={'98'}
                        units={'/100'}
                        fontSize={'normal'}
                    />
                </HeroBanner>
            }
            badgeOffset={number('badgeOffset', -52)}
        >
            <List style={{ padding: '.5rem 0' }}>
                <InfoListItem
                    dense
                    style={{ height: '2.25rem' }}
                    title={'0 Alarms'}
                    icon={<Notifications color={'inherit'} />}
                    classes={{ title: classes.title }}
                />
                <InfoListItem
                    dense
                    style={{ height: '2.25rem' }}
                    fontColor={useDarkMode() ? Colors.blue[300] : Colors.blue[500]}
                    iconColor={useDarkMode() ? Colors.blue[300] : Colors.blue[500]}
                    title={'1 Event'}
                    icon={<ListAlt color={'inherit'} style={getLeftToRightIconTransform()} />}
                />
                <InfoListItem
                    dense
                    style={{ height: '2.25rem' }}
                    title={'Online'}
                    icon={<Cloud color={'inherit'} />}
                    classes={{ title: classes.title }}
                />
            </List>
        </ScoreCard>
    );
}