Home

Awesome

svelte-bulma-components

Library of UI components to be used in Svelte.js or standalone.

A convenient way to implement interactive Bulma components.

Available components

Demo at http://svelte-bulma-components.surge.sh/

Install

npm install svelte-bulma-components

Use

Import the components you need in your Svelte project.

import {
  Dropdown,
  DropdownLink,
  Modal
} from 'svelte-bulma-components/module'

export default {
  components: {
    Dropdown,
    DropdownLink,
    Modal,
	...
  }
}

And then use them like so:

  <Dropdown label="Dropdown">
    <DropdownLink href="/">A dropdown link</DropdownLink>
    <DropdownLink href="/" active>This link is active</DropdownLink>
    <DropdownLink href="/">Another link item</DropdownLink>
  </Dropdown>

Don't forget to include the Bulma and Font Awesome CSS files!

For including styles, you can either place the below styles in the <head> of your template:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Or you can import them to your webpack/rollup entry point:

require('/path/to/node_modules/bulma/css/bulma.min.css')
require('/path/to/node_modules/font-awesome/css/font-awesome.min.css')

Note that you'll have to install bulma and font-awesome first

Dropdown

An interactive dropdown menu for discoverable content. DropdownLink elements emit an onclick event with the value of the href attribute.

Markup

<Dropdown label="Dropdown">
  <DropdownItem><h5>Dropdown Item</h5>Not clickable</DropdownItem>
  <DropdownDivider />
  <DropdownLink href="/" on:click="logEvent(event)">A dropdown link</DropdownLink>
  <DropdownLink href="/" active>This link is active</DropdownLink>
  <DropdownLink href="/">Another link item</DropdownLink>
</Dropdown>

Options

PropTypeDefaultRequiredDescription
labelString''truetext of dropdown label
hoverableBooleanfalsefalseopen menu on hover instead of click
upBooleanfalsefalsepopup instead of down
rightBooleanfalsefalsealign right

Modal

A classic modal overlay, in which you can include any content you want

Markup

<Modal {active} on:close="set({ active: false })">
  <p>
    ...
  </p>
</Modal>

ModalCard

A modal card, with a head, a body and a foot. This components emits an onclose event when closed with success or cancel as value.

Markup

<ModalCard {active} color="link" on:close="cardClosed(event)">
  <span slot="title">Modal card title</span>
  <span slot="content">
    ...
  </span>
  <span slot="success">Save changes</span>
  <span slot="cancel">Cancel</span>            
</ModalCard>

Options

PropTypeDefaultRequiredDescription
colorStringsuccessfalsecolor of the success button

Slots

SlotDefaultRequiredDescription
title-truetitle of the modal dialog
content-truethe content of the modal
successSubmitfalselabel of the success button
cancelCancelfalselabel of the cancel button

Navbar

A responsive horizontal navbar that can support images, links, buttons, and dropdowns

Markup

<Navbar>
  <!-- navbar-brand -->
  <span slot="brand">
    <NavbarItem href="#">
      <img src="/images/brand-logo.png" alt="Logo">
    </NavbarItem>
  </span>

  <!-- navbar-start -->
  <NavbarStart>
    <NavbarItem href="#">Documentation</NavbarItem>
    <NavbarItem href="#">Videos</NavbarItem>
    <NavbarItem href="#">...</NavbarItem>
  </NavbarStart>

  <!-- navbar-end -->
  <NavbarEnd>
    <NavbarItem>
      <p class="control">
        <a class="button is-info" href="#">
          <strong>Download</strong>
        </a>
      </p>
    </NavbarItem>
  </NavbarEnd>
</Navbar>

Options

PropTypeDefaultRequiredDescription
fixedTopBooleanfalsefalsefixes navbar to top of page
fixedBottomBooleanfalsefalsefixes navbar to bottom
colorString-falsebackground color of the navbar
transparentBooleanfalsefalsesets navbar transparency
noBodyClassBooleanfalsefalsedo not add classes to <body>

Pagination

A responsive, usable, and flexible pagination component.

The pagination component emits an onchange event with the <strong>selected page number</strong>.

Markup

<Pagination current="10" total="20" show="5" on:change="gotoPage(event)" />

Options

PropTypeDefaultRequiredDescription
currentNumber1falsethe currently active page number
totalNumber-truetotal number of pages
showNumber5falsehow many page link buttons to show
transparentBooleanfalsefalsesets navbar transparency
alignString-falsealign centered or right
roundedBooleanfalsefalserounded buttons
sizeString-falsesets size of pagination component
previousStringPreviousfalseset label text for previous button
nextStringNext pagefalseset label text for next button

Tabs

Simple responsive horizontal navigation tabs, with different styles.

Tab items emit an onclick event with the #id of the selected tab.

Markup

<TabsContainer align="centered" boxed>
  <TabItem active label="Pictures" icon="fa fa-image" on:click="setTab(event)" />
  <TabItem label="Music" on:click="setTab(event)" />
  <TabItem label="Videos" on:click="setTab(event)" />
  <TabItem label="Documents" on:click="setTab(event)" />
</TabsContainer>

Options

PropTypeDefaultRequiredDescription
alignString-falsealign centered or right
boxedBooleanfalsefalseclassical, boxed tabs
sizeString-falsesets size of pagination component
toggleBooleanfalsefalsetoggle button like tabs
roundedBooleanfalsefalserounded, can be used with toggle
fullWidthBooleanfalsefalseconsume whole width available

Slots

SlotDefaultRequiredDescription
default-trueset of <TabItem> tabs

Custom classes (new in 0.1.4)

You can now easily add custom classes to the components by adding a regular class attribute:

<Dropdown label="My dropdown" class="my-custom-class">

NOTE: because Svelte component CSS is scoped, you'll have to add the global modifier to your CSS selectors:

:global(.my-custom-class) {
  ...
}

Made with Svelte

It's made with Svelte, which means you don't need any JS framework. Just use the file in the dist directory in any Javascript project.

See also

Reference