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
Copy

package.json

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

tsconfig.json

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

.parcelrc

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

source/index.html

<link
    rel="stylesheet"
    href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"
/>
<link
    rel="stylesheet"
    href="https://unpkg.com/[email protected]/font/bootstrap-icons.css"
/>
<link
    rel="stylesheet"
    href="https://unpkg.com/@fortawesome/[email protected]/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>
Copy

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/