Skip to content

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

License

Notifications You must be signed in to change notification settings

EasyWebApp/BootCell

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

98 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.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>

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: