solarliner/preact-bulma

Preact components for the Bulma CSS project.

Preact Bulma ⚛️

A collection of components to build interfaces with Bulma.

npm install preact-bulma

For the version targeting Preact X, use

npm install preact-bulma@next

^{v1 but still in alpha! Here's why.}

Getting started

1. Install

preact-bulma has a peer dependency on Preact, which means you need to install it separately, but allows you to choose the version. The project supports 8.2.x and up.

2. Add styling

The project doesn't import any styling by default - this is to let you have full control over the style. You can import the full Bulma framework, or, using SASS/SCSS, only pull the parts that you want.

Full Bulma bundle (default theme, no customization, easiest)

// Import Bulma CSS
import "bulma/css/bulma.min.css";

Custom styling (allows customization, recommended)

// Import SCSS file
import "styles/app.scss";

@charset "utf-8";
// Import *all* of Bulma - refer to the customization guide for more info on customizing Bulma:
// https://bulma.io/documentation/customize/
@import "~bulma/bulma";

3. Use preact-bulma

You can now use the provided components into your project as you would with any component.

import { Card } from "preact-bulma";
function MyCard() {
  <Card.Card>
    <Card.Header
      title="Physics breakthrough"
      icon="fas fa-exclamation-circle"
    />
    <Card.Content>
      No, really, literally. Black holes have been proven to break through
      spacetime. (get it?)
    </Card.Content>
    <Card.Footer>
      <Card.FooterItem>Share</Card.FooterItem>
    </Card.Footer>
  </Card.Card>;
}

Links

• Storybook with all components: https://solarliner.github.io/preact-bulma
• Wiki with usage notes: https://github.com/solarliner/preact-bulma/wiki

preact-bulma's Issues

Navbar.MenuItem shows arrow for non-dropdown items.

When you create a new MenuItem in a navbar, it will always have a little arrow on the right side that indicates that it is a dropdown, even when it is not a dropdown (see the storyboard).

This code:

<Navbar.MenuItem href="#">Link</Navbar.MenuItem>

generates the following html:

<div class="navbar-item"><a class="navbar-link" href="#">Link</a></div>

However, I expect it to generate one of the following pieces of html:

<div class="navbar-item"><a class="navbar-link is-arrowless" href="#">Link</a></div>

<a class="navbar-item" href="#">Link</a>

In both cases, the arrow is not rendered.

My current workaround is the following:

<Navbar.Navbar>
    <Navbar.Menu side="end">
        <a href="#" class="navbar-item">Lap Times</a>
    </Navbar.Menu>
</Navbar.Navbar>