BootCell

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

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@6.0.0-alpha.1/dist/css/bootstrap.min.css"
/>
<link
    rel="stylesheet"
    href="https://unpkg.com/bootstrap-icons@1.13.1/font/bootstrap-icons.css"
/>
<link
    rel="stylesheet"
    href="https://unpkg.com/@fortawesome/fontawesome-free@7.3.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

See the migration guide when upgrading an existing project.

Styles & Layout

1. BootstrapStyles
2. Container
3. Row
4. Col
5. Ratio
6. ScrollBoundary
7. Collapse
8. Drawer
9. DrawerBox
10. DrawerHeader
11. DrawerTitle
12. DrawerBody

Content

1. ListGroup
2. ListGroupItem
3. Table
4. Jumbotron
5. Card
6. CardHeader
7. CardBody
8. CardFooter
9. CardTitle
10. CardImg
11. MediaObject
12. SplitView
13. Accordion
14. AccordionItem
15. AccordionHeader
16. AccordionBody
17. Tabs
18. Tab
19. CodeBlock

Reminder

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

Media

1. Image
2. ImagePreview
3. FilePreview
4. FileTypeMap
5. Carousel
6. CarouselCaption
7. CarouselItem

Navigator

1. BreadCrumb
2. BreadcrumbItem
3. Pagination
4. PaginationItem
5. Pager
6. NavLink
7. Nav
8. NavDropdown
9. Navbar
10. NavbarBrand
11. NavbarToggle
12. DrawerNavbar
13. Step
14. Stepper
15. Dropdown
16. DropdownItem
17. DropdownMenu
18. DropdownToggle
19. DropdownButton

Prompt

1. Spinner
2. SpinnerBox
3. Tooltip
4. TooltipBox
5. Alert
6. AlertLink
7. Dialog
8. DialogClose
9. Modal
10. ModalHeader
11. ModalTitle
12. ModalBody
13. ModalFooter

Form

1. FormGroup
2. FormLabel
3. FloatingLabel
4. FormControl
5. FormField
6. FormCheck
7. Button
8. ButtonGroup
9. ButtonToolbar
10. IconButton
11. CloseButton
12. ToggleButton
13. RangeInput
14. InputGroup
15. InputGroupText
16. FilePicker
17. FileUploader
18. FileModel

Calendar

1. CountDown
2. MonthCalendar

Types & Helpers

1. Theme
2. Status
3. ThemeColor
4. BasicColor
5. TextColor
6. BackgroundColor
7. Size
8. PositionY
9. isButton
10. isStep

Theme

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

• https://bootswatch.com/
• https://mdbootstrap.com/docs/standard/getting-started/installation/#section-cdn