BootCell

Web Components UI library based on WebCell v2, BootStrap v5, BootStrap Icon v1 & FontAwesome v5

Usage

npm install boot-cell iterable-observer @nuintun/qrcode

index.html

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.6/dist/dialog-polyfill.css"
/>
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
/>
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css"
/>
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css"
/>
<script
    crossorigin
    src="https://polyfill.app/api/polyfill?features=es.array.flat,es.object.from-entries,regenerator-runtime,intersection-observer,resize-observer"
></script>
<script src="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.6/dist/dialog-polyfill.js"></script>
<script src="https://cdn.jsdelivr.net/npm/share-api-polyfill@1.0.21/dist/share-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.6.0/custom-elements-es5-adapter.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.6.0/webcomponents-bundle.js"></script>

Components

Content

1. ListItem
2. ListGroup
3. Table
4. TableRow
5. InputCell
6. Jumbotron
7. Card
8. CardHeader
9. CardFooter
10. MediaObject
11. EdgeDetector
12. SplitView
13. AccordionPanel
14. Accordion
15. CollapseBox
16. TabPanel
17. TabView

Reminder

1. Badge
2. ProgressBar
3. Progress
4. Icon
5. FAIcon
6. BGIcon

Media

1. Image
2. Embed
3. CarouselCaption
4. CarouselItem
5. CarouselView

Navigator

1. BreadCrumb
2. Pagination
3. NavLink
4. Nav
5. NavBar
6. BannerNavBar
7. NavBarToggler
8. Step
9. Stepper
10. DropMenuItem
11. DropMenu
12. ShareBar

Prompt

1. Spinner
2. SpinnerBox
3. TooltipBox
4. PopoverBox
5. AlertBox
6. ToastBox
7. Modal
8. openDialog()

Form

1. Form
2. Button
3. ButtonGroup
4. Toolbar
5. IconButton
6. CloseButton
7. ToggleField
8. ScoreRange
9. Field
10. FormField
11. InputGroup
12. FileInput

Calendar

1. CountDown
2. CalendarTable
3. WeekCalendar
4. MonthCalendar

Constants

1. Color
2. Theme
3. Status
4. CommonColors
5. TextColors
6. BackgroundColors
7. Size
8. Position
9. JustifyType

Utilities

1. encodeQRC

Theme

Replace BootStrap official CSS file with these 3th-party libraries's directly:

• https://bootswatch.com/
• https://mdbootstrap.github.io/bootstrap-material-design/
• https://daemonite.github.io/material/