Bulma UI components for Svelte.js
npm install svelte-bulma-componentsA convenient way to implement interactive Bulma components.
- Dropdown
- Modal
- ModalCard
- Navbar
- Pagination
- Tabs
Demo at http://svelte-bulma-components.surge.sh/
npm install svelte-bulma-components
Import the components you need in your Svelte project.
``javascript
import {
Dropdown,
DropdownLink,
Modal
} from 'svelte-bulma-components/module'
export default {
components: {
Dropdown,
DropdownLink,
Modal,
...
}
}
`
And then use them like so:
`xml`
Don't forget to include the Bulma and Font Awesome CSS files!
For including styles, you can either place the below styles in the
of your template:`xml
`Or you can import them to your webpack/rollup entry point:
`javascript
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
`xml
Dropdown Item
Not 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
`xml
...
`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
`xml
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
`xml

Documentation
Videos
...
`
#### 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
Pagination
A responsive, usable, and flexible pagination component.
The pagination component emits an
onchange event with the selected page number.#### Markup
`xml
`
#### 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
`xml
`
#### 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
tabs$3
You can now easily add custom classes to the components by adding a regular
class attribute:`xml
`
NOTE: because Svelte component CSS is scoped, you'll have to add the global modifier to your CSS selectors:`css
: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.- 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
- https://bulma.io/documentation/components/
- https://svelte.technology/guide