Skip to content

Latest commit

 

History

History
126 lines (105 loc) · 2.67 KB

Readme.md

File metadata and controls

126 lines (105 loc) · 2.67 KB

Logo

Bootstrap 4 components for Svelte

Work in progress, check back soon - PRs are welcome!

The philosophy of this library is to provide all Bootstrap 4 components for a Svelte app, without needing to use Bootstrap component classes or needing to include Bootstrap's JavaScript.

However, to make using Bootstrap themes easier, this library does not embed Bootstrap styles directly and you will need to include Bootstrap 4 CSS in your page.

The component names and interface are inspired by the reactstrap library for React.

Demo page

Install

npm install sveltestrap

Usage

You need to include a link to Bootstrap 4 stylesheet in your page - these components do not include or embed any Bootstrap styles automatically.

In your svelte component:

<Row>
  <Col>
    <Button color="primary" outline>Hello World!</Button>
  </Col>
<Row>

<script>
  import { Button, Col, Row } from 'sveltestrap';

  export default {
    components: {
      Button,
      Col,
      Row
    }
  }
</script>

Status

  • Most simple, stateless components are visually done (see below).
  • Event handlers (on:click, etc), common optional attributes (id, href, data-, etc) are not applied to components! Ay!
  • Add stateful components and those that depend on tethering (e.g. Alerts, Dropdown, Modals, Popovers, Tooltips).

Layout

  • Container
  • Col
  • Row

Components

  • Alert
  • Badge
  • Breadcrumb
    • BreadcrumbItem
  • Button
    • ButtonDropdown
  • ButtonGroup
  • ButtonToolbar
  • Card
    • CardBlock
    • CardColumns
    • CardDeck
    • CardFooter
    • CardGroup
    • CardHeader
    • CardImg
    • CardImgOverlay
    • CardLink
    • CardSubtitle
    • CardText
    • CardTitle
  • Close
  • Collapse
  • Dropdown
    • DropdownItem
    • DropdownMenu
    • DropdownToggle
  • Form
    • FormFeedback
    • FormGroup
    • FormText
  • Icon (FontAwesome helper)
  • Input
  • InputGroup
    • InputGroupAddon
    • InputGroupButton
  • Jumbotron
  • Label
  • ListGroup
  • ListGroupItem
    • ListGroupItemHeading
    • ListGroupItemText
  • Media
    • MediaBody
  • Modal
    • ModalBody
    • ModalFooter
    • ModalHeader
  • Nav
    • NavDropdown
    • NavItem
    • NavLink
  • Navbar
    • NavbarBrand
    • NavbarToggler
  • Pagination
    • PaginationItem
    • PaginationLink
  • Popover
    • PopoverContent
    • PopoverTitle
  • Progress
  • TabContent
  • TabPane
  • Table
  • Tooltip