Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6
npm install dom-renderer web-cell boot-cell
npm install parcel @parcel/config-default @parcel/transformer-typescript-tsc -D{
"scripts": {
"start": "parcel source/index.html --open",
"build": "parcel build source/index.html --public-url ."
}
}{
"compilerOptions": {
"target": "ES6",
"module": "ES2020",
"moduleResolution": "Node",
"useDefineForClassFields": true,
"jsx": "react-jsx",
"jsxImportSource": "dom-renderer"
}
}{
"extends": "@parcel/config-default",
"transformers": {
"*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
}
}<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>- ListItem
- ListGroup
- Table
- TableRow
- InputCell
- Jumbotron
- Card
- CardHeader
- CardFooter
- MediaObject
- EdgeDetector
- SplitView
- AccordionPanel
- Accordion
- CollapseBox
- TabPanel
- TabView
- BreadCrumb
- Pagination
- NavLink
- Nav
- NavBar
- BannerNavBar
- NavBarToggler
- Step
- Stepper
- DropMenuItem
- DropMenu
- ShareBar
- Form
- Button
- ButtonGroup
- Toolbar
- IconButton
- CloseButton
- ToggleField
- ScoreRange
- Field
- FormField
- InputGroup
- FileInput
Replace BootStrap official CSS file with these 3th-party libraries's directly:
