# svelte-bulma-components Library of UI components to be used in [Svelte.js](https://svelte.technology/) or standalone. A convenient way to implement [**interactive Bulma components**](https://bulma.io/documentation/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. ```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 ### Custom classes (new in 0.1.4) 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](https://svelte.technology/), 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 ### Reference - https://bulma.io/documentation/components/ - https://svelte.technology/guide

	Stars	Issues	Version	Updated	Created
smelte			1.1.8	3 years ago	5 years ago
svelma	537	27	0.4.5	3 years ago	5 years ago
svelte-bulma-components			0.1.5	6 years ago	6 years ago
svelte-chota	291	6	1.8.6	3 years ago	5 years ago
svelte-material-ui	3,255	234	7.0.0	13 days ago	5 years ago

smelte vs svelma vs svelte-bulma-components vs svelte-chota vs svelte-material-ui

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past