❤
npm
Sign UpSign In

boot-cell
TypeScript icon, indicating that this package has built-in type declarations

2.0.0-beta.20 • Public • Published

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/bootstrap@5.3.2/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>

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

Utilities

  1. encodeQRC

Theme

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

Readme

Keywords

Package Sidebar

Install

npm i boot-cell

Repository

github.com/EasyWebApp/BootCell

Homepage

bootstrap.web-cell.dev/

Weekly Downloads

3

Version

2.0.0-beta.20

License

LGPL-3.0

Unpacked Size

771 kB

Total Files

35

Last publish

Collaborators

  • tech_query
Try on RunKit
Report malware