Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/elcobvg/svelte-bulma-components
Collection of Bulma UI components to be used in Svelte or standalone
https://github.com/elcobvg/svelte-bulma-components
bulma bulma-ui svelte svelte-components sveltejs
Last synced: 2 months ago
JSON representation
Collection of Bulma UI components to be used in Svelte or standalone
- Host: GitHub
- URL: https://github.com/elcobvg/svelte-bulma-components
- Owner: elcobvg
- License: mit
- Created: 2018-07-18T02:25:17.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-08-20T04:35:55.000Z (over 6 years ago)
- Last Synced: 2024-05-20T03:14:35.261Z (7 months ago)
- Topics: bulma, bulma-ui, svelte, svelte-components, sveltejs
- Language: HTML
- Homepage: http://svelte-bulma-components.surge.sh/
- Size: 56.6 KB
- Stars: 92
- Watchers: 4
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-bulma - svelte-bulma-components - Collection of Bulma UI components for Svelte (UI Libraries & Components / Courses)
README
# 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
...
```
#### 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