svelte-bulma-components

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

A convenient way to implement interactive Bulma components.

$3

- Dropdown
- Modal
- ModalCard
- Navbar
- Pagination
- Tabs

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

$3

npm install svelte-bulma-components

$3

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

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 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
...









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




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.

$3

- 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

$3

- https://bulma.io/documentation/components/
- https://svelte.technology/guide