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
- Dropdown
- Modal
- ModalCard
- Navbar
- Pagination
- Tabs
Demo at http://svelte-bulma-components.surge.sh/
Install
npm install svelte-bulma-components
Use
Import the components you need in your Svelte project.
components: Dropdown DropdownLink Modal ...
And then use them like so:
A dropdown link This link is active Another link item
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:
Or you can import them to your webpack/rollup entry point:
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 ItemNot clickable A dropdown link This link is active Another link item
Options
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 |
Modal
A classic modal overlay, in which you can include any content you want
Markup
...
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
Modal card title ... Save changes Cancel
Options
Prop | Type | Default | Required | Description |
---|---|---|---|---|
color | String | success | false | color of the success button |
Slots
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 |
Navbar
A responsive horizontal navbar that can support images, links, buttons, and dropdowns
Markup
<!-- navbar-brand --> <!-- navbar-start --> Documentation Videos ... <!-- navbar-end --> Download
Options
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> |
Pagination
A responsive, usable, and flexible pagination component.
The pagination component emits an onchange
event with the selected page number.
Markup
Options
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 |
Tabs
Simple responsive horizontal navigation tabs, with different styles.
Tab items emit an onclick
event with the #id
of the selected tab.
Markup
Options
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 |
Slots
Slot | Default | Required | Description |
---|---|---|---|
default | - | true | set 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:
NOTE: because Svelte component CSS is scoped, you'll have to add the global
modifier to your CSS selectors:
)
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
- https://www.npmjs.com/package/svelte-bulma-forms Bulma form components for Svelte
- https://www.npmjs.com/package/svelte-autocomplete a lightweight autocomplete component made with Svelte