Svelte Themes Logo Svelte Themes
Svelte Bulma Components screenshot

Svelte Bulma Components

Author Avatar Theme by Elcobvg
Updated: 20 Aug 2018
95 Stars

Collection of Bulma UI components to be used in Svelte or standalone

Github Live Preview

Categories

Bulma

Overview:

The svelte-bulma-components library is a collection of UI components designed to be used in Svelte.js or as standalone components. It provides a convenient way to implement interactive Bulma components in your projects.

Features:

  • Dropdown: An interactive dropdown menu for discoverable content. It supports options such as label text, hoverable behavior, popup direction, and alignment.
  • Modal: A classic modal overlay that can be used to display any content. It includes options for customizing the color of the success button and emits an onclose event when closed.
  • ModalCard: A modal card that includes a head, body, and foot. It emits an onclose event and supports customizing the color of the success button.
  • Navbar: A responsive horizontal navbar that can contain images, links, buttons, and dropdowns. It offers options for fixed positioning, background color, transparency, and more.
  • Pagination: A responsive and flexible pagination component. It emits an onchange event with the selected page number and supports customization of the current page, total number of pages, and appearance.

Installation:

To install the svelte-bulma-components library, run the following command:

npm install svelte-bulma-components

To use the library in your Svelte project, import the components you need. Make sure to include the Bulma and Font Awesome CSS files as well. Here are two ways to include the styles:

  1. Place the styles in the <head> of your template:
<link rel="stylesheet" href="/path/to/bulma.css">
<link rel="stylesheet" href="/path/to/font-awesome.css">
  1. Import the styles to your webpack/rollup entry point:
import "/path/to/bulma.css";
import "/path/to/font-awesome.css";

Summary:

The svelte-bulma-components library provides a collection of UI components that can be used in Svelte.js projects or as standalone components. It offers various interactive and customizable components such as dropdowns, modals, navbars, and pagination. The installation process is straightforward, and the library requires the inclusion of the Bulma and Font Awesome CSS files. With these components, developers can easily implement interactive Bulma components in their projects.