BootCell

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

Usage

Installation

npm install dom-renderer web-cell boot-cell
npm install parcel @parcel/config-default @parcel/transformer-typescript-tsc -D

package.json

{
    "scripts": {
        "start": "parcel source/index.html --open",
        "build": "parcel build source/index.html --public-url ."
    }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "module": "ES2020",
        "moduleResolution": "Node",
        "useDefineForClassFields": true,
        "jsx": "react-jsx",
        "jsxImportSource": "dom-renderer"
    }
}

.parcelrc

{
    "extends": "@parcel/config-default",
    "transformers": {
        "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
    }
}

source/index.html

<link
    rel="stylesheet"
    href="https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css"
/>
<link
    rel="stylesheet"
    href="https://unpkg.com/bootstrap-icons@1.11.3/font/bootstrap-icons.css"
/>
<link
    rel="stylesheet"
    href="https://unpkg.com/@fortawesome/fontawesome-free@6.5.1/css/all.min.css"
/>
<script src="https://polyfill.web-cell.dev/feature/ECMAScript.js"></script>
<script src="https://polyfill.web-cell.dev/feature/WebComponents.js"></script>
<script src="https://polyfill.web-cell.dev/feature/ElementInternals.js"></script>
<script src="https://polyfill.web-cell.dev/feature/Dialog.js"></script>
<script src="https://polyfill.web-cell.dev/feature/Share.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

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/