Library of UI components to be used in Svelte.js or standalone.
A convenient way to implement interactive Bulma components.
Demo at http://svelte-bulma-components.surge.sh/
npm install svelte-bulma-components
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="https://github.com/elcobvg/svelte-bulma-components/blob/master/">A dropdown link</DropdownLink>
<DropdownLink href="https://github.com/elcobvg/svelte-bulma-components/blob/master/" active>This link is active</DropdownLink>
<DropdownLink href="https://github.com/elcobvg/svelte-bulma-components/blob/master/">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
An interactive dropdown menu for discoverable content.
DropdownLink
elements emit an onclick event with the value of the href
attribute.
<Dropdown label="Dropdown">
<DropdownItem><h5>Dropdown Item</h5>Not clickable</DropdownItem>
<DropdownDivider />
<DropdownLink href="https://github.com/elcobvg/svelte-bulma-components/blob/master/" on:click="logEvent(event)">A dropdown link</DropdownLink>
<DropdownLink href="https://github.com/elcobvg/svelte-bulma-components/blob/master/" active>This link is active</DropdownLink>
<DropdownLink href="https://github.com/elcobvg/svelte-bulma-components/blob/master/">Another link item</DropdownLink>
</Dropdown>
Prop | Type | Default | Required | Description |
---|---|---|---|---|
label | String | '' | true | text of dropdown label |
hoverable | Boolean | false | false | open menu on hover instead of click |
up | Boolean | false | false | popup instead of down |
right | Boolean | false | false | align right |
A classic modal overlay, in which you can include any content you want
<Modal {active} on:close="set({ active: false })">
<p>
...
</p>
</Modal>
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.
<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>
Prop | Type | Default | Required | Description |
---|---|---|---|---|
color | String | success | false | color of the success button |
Slot | Default | Required | Description |
---|---|---|---|
title | - | true | title of the modal dialog |
content | - | true | the content of the modal |
success | Submit | false | label of the success button |
cancel | Cancel | false | label of the cancel button |
A responsive horizontal navbar that can support images, links, buttons, and dropdowns
<Navbar>
<!-- navbar-brand -->
<span slot="brand">
<NavbarItem href="#">
<img src="https://github.com/elcobvg/svelte-bulma-components/raw/master/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>
Prop | Type | Default | Required | Description |
---|---|---|---|---|
fixedTop | Boolean | false | false | fixes navbar to top of page |
fixedBottom | Boolean | false | false | fixes navbar to bottom |
color | String | - | false | background color of the navbar |
transparent | Boolean | false | false | sets navbar transparency |
noBodyClass | Boolean | false | false | do not add classes to <body> |
A responsive, usable, and flexible pagination component.
The pagination component emits an onchange
event with the selected page number.
<Pagination current="10" total="20" show="5" on:change="gotoPage(event)" />
Prop | Type | Default | Required | Description |
---|---|---|---|---|
current | Number | 1 | false | the currently active page number |
total | Number | - | true | total number of pages |
show | Number | 5 | false | how many page link buttons to show |
transparent | Boolean | false | false | sets navbar transparency |
align | String | - | false | align centered or right |
rounded | Boolean | false | false | rounded buttons |
size | String | - | false | sets size of pagination component |
previous | String | Previous | false | set label text for previous button |
next | String | Next page | false | set label text for next button |
Simple responsive horizontal navigation tabs, with different styles.
Tab items emit an onclick
event with the #id
of the selected tab.
<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>
Prop | Type | Default | Required | Description |
---|---|---|---|---|
align | String | - | false | align centered or right |
boxed | Boolean | false | false | classical, boxed tabs |
size | String | - | false | sets size of pagination component |
toggle | Boolean | false | false | toggle button like tabs |
rounded | Boolean | false | false | rounded, can be used with toggle |
fullWidth | Boolean | false | false | consume whole width available |
Slot | Default | Required | Description |
---|---|---|---|
default | - | true | set of <TabItem> tabs |
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) {
...
}
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.