BootCell

WebCell

BootCell

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

NPM Dependency CI & CD

Anti 996 license jaywcjlove/sb

NPM

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

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: