How to use the framework7-react.ColorsEnum.Green function in framework7-react

To help you get started, we’ve selected a few framework7-react examples, based on popular ways it is used in public projects.

github bencompton / framework7-react / kitchen-sink / components / pages / ProgressBarPage.tsx View on Github external
<ContentBlock>
                        <p>
                            Framework7 has two different styles of progress bars...determinate
                            (accepts a progress percentage number to update itself) and indeterminate/infinite
                            (when no progress number can be calculated) to indicate activity:
                        </p>
                    </ContentBlock>
                    <ListBlock title="Determinate progress bars:">
                        <ListItem>
                            <ProgressBar infinite={false} progress={25} color={ColorsEnum.Blue} />
                        </ListItem>
                        <ListItem>
                            <ProgressBar infinite={false} progress={50} color={ColorsEnum.Red} />
                        </ListItem>
                        <ListItem>
                            <ProgressBar infinite={false} progress={75} color={ColorsEnum.Green} />
                        </ListItem>
                        <ListItem>
                            <ProgressBar infinite={false} progress={100} color={ColorsEnum.Orange} />
                        </ListItem>
                    </ListBlock>
                    <ListBlock title="Infinite/Indeterminate progress bar:">
                        <ListItem>
                            <ProgressBar infinite={true} color={ColorsEnum.Multi} />
                        </ListItem>
                    </ListBlock>
                </PageContent>
            </PageBody>
        </Page>
    );
};