Hey man, you bulma-extensions is awesome. but I find the carousel, not support sliding switch. and I try to expand this carousel. my code is here https://codepen.io/wploey/pen/PQzLKv not very standard but I still hope you add this features.

Firstly, thanks for the great extension! It really is great.

My proposal about switch is to remove requirements of label from switch.

Let's say I want to create a setting screen like below, one like iPhone and Android.

Airplane Mode          [□　]  (off)
Wi-Fi                  [　□]  (on)
Bluetooth              [□　]  (off)

to accomplish this, I need a code like below.

<div>
  Airplane Mode
  <div class="field align-right">
    <input id="switchExample1" type="checkbox" name="switchExample1" class="switch">
    <label for="switchExample1"></label>
  </div>
</div>
<div>
  Wi-Fi
  <div class="field align-right">
    <input id="switchExample2" type="checkbox" name="switchExample2" class="switch" checked="checked">
    <label for="switchExample2"></label>
  </div>
</div>
<div>
  Bluetooth
  <div class="field align-right">
    <input id="switchExample3" type="checkbox" name="switchExample3" class="switch">
    <label for="switchExample3"></label>
  </div>
</div>

Label is empty, but it is still required to show switch it self. I felt awkward writing this labels, and I thought it would be better if I could omit it.

<div>
  Airplane Mode
  <div class="field align-right">
    <input id="switchExample1" type="checkbox" name="switchExample1" class="switch">
  </div>
</div>

Please consider, thanks.

Hi,
i'am trying to use your calendar extension in the firestarter app (https://github.com/codediodeio/angular-firestarter). I'm not sure to understand what is the correct way to do this. I have this error:
"TypeError: datepicker_1.DatePicker is not a constructor" when I try to create a new datepicker for a text input in my form.

If I write "@import "~bulma-calendar";" in my styles.scss file I have this error:
Undefined variable: "$radius-small"

I m lost, could you help me please?

Erald

Thank you for your great collection of extensions. I'm trying to use Steps extension for Form Wizard. It would be good if the Steps extension have changeable content like Form Wizard.

Hello, thank you for amazing extensions. I just start using your extensions, Steps component mobile size looks a bit bad.

My suggestion mobile size should be like @aramvisser component which you know it already.

Thanks!

As a feature request, would be nice to have a position for the badge, or a special class to be used in the nav bar. Currently using it on a nav item will be cut off the page since it's loaded at the top.

Using bulma v0.6.2 and bulma carousel v0.3.5 from npm I get:

Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/postcss-loader/lib/index.js??postcss!node_modules/sass-loader/lib/loader.js!src/scss/style.scss:
       [0] ./node_modules/css-loader!./node_modules/postcss-loader/lib?{"ident":"postcss"}!./node_modules/sass-loader/lib/loader.js!./src/scss/style.scss 254 bytes {0} [built] [failed] [1 error]
   
    ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib?{"ident":"postcss"}!./node_modules/sass-loader/lib/loader.js!./src/scss/style.scss
    Module build failed: 
    $carousel-nav-background: rgba($white, 0.7) !default
                                  ^
          Undefined variable: "$white".
          in /usr/src/app/node_modules/bulma-carousel/carousel.sass (line 1, column 32)

The same happens with bulma-extensions v0.7.4, just complaining on a different file.
.
This is my webpack config if it helps anything http://dpaste.com/0M6DS6S.

Hello,
I'm a newbie in programming, even more CSS.
How to re-design BULMA card component that looks like in the image below?

With some hover light-shadow and the card-image and button slightly out of the card.

Thank you in advance.

I cannot get the Carousel to work with this version of bulma. I am displaying 5 items but I do not see 5 images instead I see following image

The code for the element from browser is

` #html

Images

Let me know if you need anything else.

I manage all my dependencies using npm, including bulma. It would be very useful to publish this repo to npm, so we can add it to package.json and import both bulma and the extensions in a main.sass file.

Thanks!

Input type=color

Perhaps a Comparison Table would make a nice Bulma extension?

Something similar to this maybe? But up to date and mobile responsive.

As the title says, I am requesting that the ability to sort tag items via drag and drop be added.

This feature would be very useful as it would allow an easier method of controlling the order of tags. Currently the best solution I have is to enter them in the order needed the first time I enter them. Or worse, when adjusting an already entered list, using a tricky combo strategically deleting some tags and then reentering them in the proper order.

Hi, there!

The fa-icons inside timeline circles are appearing out.

HTML

<div class="container is-fluid">
        <div class="columns">
            <div class="column">
                <header class="timeline-header">
                    <span class="tag is-medium is-primary">Últimas transações</span>
                </header>
                <div class="timeline">
                    <div class="timeline-item is-danger">
                        <div class="timeline-marker is-danger is-icon">
                            <i class="fa fa-arrow-down"></i>
                        </div>
                        <div class="timeline-content">
                            <p class="heading">Lavacar Joao</p>
                            <p> - R$ 19,00</p>
                        </div>
                    </div>
                    <div class="timeline-item is-danger">
                        <div class="timeline-marker is-danger is-icon">
                            <i class="fa fa-arrow-down"></i>
                        </div>
                        <div class="timeline-content">
                            <p class="heading">Estapar Jardim Americas</p>
                            <p> - R$ 8,00</p>
                        </div>
                    </div>
                    <div class="timeline-item is-success">
                        <div class="timeline-marker is-success is-icon">
                            <i class="fa fa-arrow-up"></i>
                        </div>
                        <div class="timeline-content">
                            <p class="heading">Recarga de Conta</p>
                            <p>R$ 100,00</p>
                        </div>
                    </div>
                    <div class="timeline-item is-success">
                        <div class="timeline-marker is-success is-icon">
                            <i class="fa fa-sync"></i>
                        </div>
                        <div class="timeline-content">
                            <p class="heading">Valdisnei Prego</p>
                            <p>R$ 30,00</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

SASS

@import './../node_modules/bulma/bulma';
@import './../node_modules/bulma-extensions/bulma-timeline/dist/bulma-timeline';

Any ideas about whay could be happening?

Hello there! I've been trying to include the extension to my vuejs project. Please tell me the right attribute I should use to do the same.

This is the error I'm getting-
Module not found: Error: Can't resolve 'sass-loader'

Thanks in advance!

You can test in a blank npm project .
Run npm install bumla-extensions and npm install bulma-calendar . The dist source js code of bulma-calendar are different and there have a bug when using bulma-calendar in bumla-extensions : next month button icon is wrong .

Hey,

I'm currently working on creating a JS integration for the core Bulma components.

I really like how your extensions look, would you be happy for me to create JS integrations for some or all of your components once the core Bulma ones are completed?

I will need help with some of them, such as the Calendar, but I'm to give all of them a go.

You can find the project here.

Hi community,

it seems my extensions have issue with the compilation process used in a Laravel project.
Is there any developer here who could help me to debug it and try to find a configuration working with Laravel ?

regards,

First, I'd like to say thanks for your efforts. Amazing work.

Why there isn't precompiled versions? Compiling from SASS seems like a hassle.

Hi,

I'm trying to use the bulma slider script and it throws the following error.

bulma-slider.js:7 Uncaught ReferenceError: outputs is not defined
at findOutputForSlider (bulma-slider.js:7)
at bulma-slider.js:49
at NodeList.forEach ()
at HTMLDocument. (bulma-slider.js:48)

If I change the event listener to "load" instead of "DOMContentLoaded" the error goes but the slider does not update the value in the <output> tag.

This error occurs on your demo page as well (using chrome) https://wikiki.github.io/form/slider/

want bulma-carousel extension.provide it.

I am not a linux user. Cannot add the Bulma extensions to my project. I am using windows 10. What to do now?

I am a newbe about developing sites.

Hi,

After last calendar update (from 0.1.9 to 0.2.0), calendar does not trigger after selecting text field. Don't know if it's Firefox 58.0.1 problem or bulma-calendar 0.2.0.
This problem appears using overlay as true or false.
It does work fine with Chromium.

Regards

From the documentation it states that the TagsInput form field is possible due to being based on developit/tags-input. Using the original library I can see that it includes a feature that prevents defaults.

This seems like a cool and useful feature. I'm wondering if there's a bug causing it to not work in this implementation or something else?

I tried pulling in the some extensions seapeartely using npm.
When trying to build the project it fails because of these references at the top of pageloader:

@import "initial-variables.sass"
@import "functions.sass"
@import "derived-variables.sass"
@import "animations.sass"
@import "mixins.sass"
@import "controls.sass"

surely these are loaded by Bulma anyway??

when you navigate away from a page using for example the bulma-accordion and go back, the accordion stops working.

That is because i would presume they only get initializes once with DOMContentLoaded

so the DOM/HTML of the accordion gets destroyed when someone navigates away and is recreated but the code that initializes the accordion will not be triggered anymore.

Hi, I got stuck with this (please help if you have time):

I've implemented accordion as part of sidebar menu for catalog, so here the React component code:

<div className={("accordion") + (this.state.isActive ? ' is-active' : '')}>
            <div className="accordion-header toggle">
              <a href={parent.url}>
                {parent.name}
              </a>
            </div>

          <div className="accordion-body">
            <ul>
              {categories.filter(category => category.parent_id === parent.id).map((item, index) =>
                <li key={index}>
                  <a href={item.url} className="is-pulled-left">
                    {item.name}
                  </a>
                </li>
              )}
            </ul>
          </div>
        </div>

I want user click on header so link fire AND accordion fire up simultanously, so how do I achieve that? Now it's just the accordeon and link doesn't work at all

The checkbox checks are not showing in IE11. - Works in edge though.

Hi! Thanks for these extensions.

I am having an issue with the calendar, I want to highlight the event. I am using is-active for today and I want to give range-start/end color to another single day. When I assign range-start and range-end, the lighter color leaks.

To clarify, for example here: https://wikiki.github.io/bulma-extensions/calendar... I want only 16 and 20 highlighted like they are without what is between them as they are different events.

How can I do that? Thanks.

Hello,
in my personal project, i created a new file in node_modules/bulma-extensions/dist/ folder, that i named bulma-extensions.min.js which countain these lines:

import '../bulma-accordion/dist/bulma-accordion.min.js'
import '../bulma-calendar/dist/bulma-calendar.min.js'
import '../bulma-carousel/dist/bulma-carousel.min.js'
import '../bulma-iconpicker/dist/bulma-iconpicker.min.js'
import '../bulma-quickview/dist/bulma-quickview.min.js'
import '../bulma-slider/dist/bulma-slider.min.js'
import '../bulma-steps/dist/bulma-steps.min.js'
import '../bulma-tagsinput/dist/bulma-tagsinput.min.js'

so instead of importing each js file alone (which is boring) we just import one full file
for example in vuejs project: we just add the line: import '../node_modules/bulma-extensions/dist/bulma-extensions.min.js'

Would really like an implementation of this:

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_progressbar6&stacked=h

I noticed that bulma-ribbon is there but not included in extension.sass and not mentioned in documentation also. Is that intentional? Thanks!

Great extensions!

I have included this extension in Bulma preset package for Laravel.

https://github.com/laravel-frontend-presets/bulma

Thought at some point bulma users will come looking for adding these functionality on their projects.

Thanks!

After installing all the extensions, npm module not found or file is not readable, error in all cases. I have tried all the given methods none of them worked for me. Keep in mind I am using Laravel.
Any Idea, please.
Thanks. @Wikiki

Hi,

We have created AxureRP Library for Bulma and all the extensions so it could be useful to link to it for designers that might want to use it.

Link: https://github.com/Code-Mine-Development/Bulma.io-axure

Can you please update the Carousel to change the image after few seconds instead of clicking the arrows on the sides.

I stumbled for quite a while on integrating the calendar extension into my project.

The 4th bullet on this page https://wikiki.github.io/bulma-extensions/overview#integration says to copy the code from bulma-switch repo. I just did what this said and didn't realize that bulma-switch was a submodule and it took me a while to figure out why the calendar wasn't loading correctly..

I've tried using
@import 'bulma-extensions/extensions' following a tutorials.
But i've got error bulma-extensions/extensions not found.
So how to import all extensions in scss correctly?

typo in extensions.sass:

@import "bulma-iconpciker/iconPicker.sass"

should be:

@import "bulma-iconpiCker/iconPicker.sass"

Hi! I've tried to use bulma-pageloader exptension and it seems that there is no js files in dist directory even after gulp build. what am I doing wrong?

https://github.com/aramvisser/bulma-steps contain different sass. I can't reproduce examples from bulma-steps. Is this need to be manually updated?

Hi,
I'm trying to get the carousel extension working in my angular app but but no luck.
I've added the courousel.js script in my index.html. Also, I've installed bulma and bulma-extensions with npm and added @import 'bulma'; in my style.scss which gives me this error: File to import not found or unreadable: bulma. Parent style sheet: stdin

Can you help?

Hi Im have a problem whn i include this code
var bulmaSteps = new bulmaSteps(document.getElementById('stepsDemo'), { onShow: (id) => console.log(id) })

The Stage 2 has been ignored. Someone can help me?

My code is here: https://codepen.io/anon/pen/bMPjZB

Thx advance for help!

The tooltip breaks the calendar if there's a range. Please take a look:

I'm having trouble getting the JS to load via TS within an Angular 5 app. Any advice?

Hello, I am trying to add a validation to the extension, I have come to this article through google. But it is impossible to instantiate the "StepsWizard" object in order to define "beforeNext". I do not know how I should use it or where I have to define it. I do not want to touch the file "bulma-steps.js"

Thanks for all!

Typo in extensions.sass

@import "bulma-iconpciker/iconPicker.sass"

Should be

@import "bulma-iconpicker/iconPicker.sass"

after installing bulma-extensions via npm and importing tagsinput:

import 'bulma/css/bulma.css'
import 'bulma-extensions/bulma-tagsinput'

I'm getting an error:
Module not found: Error: Can't resolve 'sass-loader'