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/[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>

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

Content

1. ListGroup
2. Table
3. Jumbotron
4. Card
5. MediaObject
6. SplitView
7. Accordion
8. Tabs
9. 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

Navigator

1. BreadCrumb
2. Pagination
3. Pager
4. Nav
5. Navbar
6. DrawerNavbar
7. Stepper
8. Dropdown
9. DropdownButton

Prompt

1. Spinner
2. SpinnerBox
3. Tooltip
4. TooltipBox
5. Alert
6. Dialog
7. Modal

Form

1. FormGroup
2. FloatingLabel
3. FormControl
4. FormField
5. FormCheck
6. Button
7. ButtonGroup
8. ButtonToolbar
9. IconButton
10. CloseButton
11. ToggleButton
12. RangeInput
13. InputGroup
14. FilePicker
15. FileUploader
16. 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