aramvisser / bulma-steps

Steps component for bulma.io

Steps component for Bulma

This is an extensions for the Bulma CSS Framework. It adds a steps component to track progress in multi step forms or wizards.

Documentation

Usage & Examples

I'm trying to keep this working with the latest available Bulma version. Currently tracking: bulma v0.5.3. Other versions should work, but no promises.

Installation

NPM

npm install bulma-steps-component

Manually

There is no .css file available, only a .sass file. Make sure you are using the SASS version of Bulma in your current workflow

• Download the bulma-steps.sass file
• Add @import "bulma-steps.sass" after the @import "bulma.sass" statement in your own stylesheet

Development

This repository doubles as the documentation page using Jekyll. You can easily see changes in the documentation by running Jekyll locally.

• Install ruby and then install Jekyll with gem install jekyll
• Clone this repository
• Run jekyll serve inside the root directory of this repository
• Open the documentation page on http://localhost:4000
• Make changes to the bulma-steps.sass file
• Reload the documentation page to see your changes

Related Project

There is another steps extensions for Bulma available from Wikiki. It even has the same name!

bulma-steps's Issues

wede

Any simple JS to activate a step????

Looks like I have everything loaded correctly - but cannot figure out how to set a step or segment to active - all help is appreciated - TIA!

Is there a way to remove the space in first and last item?

I need the component to fill its parent full width, but first and last item are taking its space.
Is it posible to remove the left/right space on this items?

is-hollow circle has the bar going through it

It happens only in horizontal view with no gaps.

It happens on firefox and chrome (I haven't test other browsers)

EDIT: It happens only with has-content-centered. Also the is-divider-content modifier doesn't work with has-content-centered and text stays under marker (TestB on the example)

Great Job !

Hi @aramvisser ,

Just to tell you made an amazing job with this extension.
Yours is very complete.
What do you think if we work together to improve the bulma-timeline extension too based on your steps version ? Let me know if you're interesting.

Regards

option for horizontal progess bar on mobile device

It would be helpful if a class like is-mobile can be used to force horizontal display of the bar in mobile devices and similarly in other viewports

all disabled option

when none of the steps are applied with is-active class, all the steps turn into active. defaulting all the steps when no is-active class is present looks like a better option

[Question] Half-filled Step-bar

Hey,
At first: Thanks for your good work.
I have a question: I want to show that I am between Step 2 and Step 3. Is it possible to fill the step-bar between these steps only half?
Until now, I only found options filling it completely to the next step…

Thanks again

please consider publish to npm.

Currently there is no other way to use this awesome extension without cloning or downloading it which makes harder to use it as dependency in other projects. If you publish this on npm this would be great, however if you dont want to bother to publish it simply created package.json would help too.
Thanks

Dividers don't touch when using .is-narrow and .has-content-centered when the content is too wide

grammar error on overview page

On the overview page : https://aramvisser.github.io/bulma-steps/
The first sentence under "Installation" contains an error :

This is an extensions for the Bulma CSS framework.

There is only one extension, which here doesn't take an "S"...
There might be some other errors, but this one appears on the screen at page loading, and it's a really bad feeling...

new release is needed

Hello

The current release 0.5.3 has the main property in package.json as index.js that's why I have to use @import '~bulma-steps-component/bulma-steps.sass' instead of @import '~bulma-steps-component'.

The master already has the correct main property, please do a new release.

Auto scroll for overflow

Hi again,

I had an idea for the steps (not yet implemented in my version but on my todo list), maybe it could interest you: be able to set an autoscroll (for example instead of getting vertical on mobile then keep the horizontal layout but with an x scroll.)
It could be used to fit in a zone (or with max-width / max-height) without changing layout and getting too long.

Regards

Add bower

Hello,
thanks for the nice bulma extension.

Can you add this repo to bower? I will use it in my new assessment system.

Best regards

Make dividers overlap markers

Currently dividers just barely touch the steps markers. If the divider is big enough, you can actually see a small gap emerge between dividers and markers.

The dividers should instead be positioned underneath the marker, touching the center. This would make the divider touch the marker completely, no matter the size.

Contact

Hi @aramvisser ,

I've created lots of extension for bulma and templates too. I alos created https://creativebulma.net marketplace and I'd like to share an opportunity with you. Can you please contact me at [email protected] so I'll be able to give you more details about it.

Regards,

I would like all the mandatory fields to be completed before going to the next step.

Hello
I would like all the mandatory fields to be completed before going to the next step. How to do ?

Thanks