wikiki / bulma-extensions Goto Github PK
View Code? Open in Web Editor NEWThis repository provides a simple access to all of my extensions for Bulma.io
License: MIT License
This repository provides a simple access to all of my extensions for Bulma.io
License: MIT License
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.
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 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,
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
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.
Perhaps a Comparison Table would make a nice Bulma extension?
Something similar to this maybe? But up to date and mobile responsive.
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.
https://github.com/aramvisser/bulma-steps contain different sass. I can't reproduce examples from bulma-steps. Is this need to be manually updated?
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?
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.
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
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!
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 .
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.
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?
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'
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!
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!
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
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'
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??
want bulma-carousel extension.provide it.
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.
I noticed that bulma-ribbon is there but not included in extension.sass
and not mentioned in documentation also. Is that intentional? Thanks!
Input type=color
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?
Typo in extensions.sass
@import "bulma-iconpciker/iconPicker.sass"
Should be
@import "bulma-iconpicker/iconPicker.sass"
Would really like an implementation of this:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_progressbar6&stacked=h
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..
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.
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.
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?
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
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?
Can you please update the Carousel to change the image after few seconds instead of clicking the arrows on the sides.
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
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.
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!
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/
I'm having trouble getting the JS to load via TS within an Angular 5 app. Any advice?
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!
The checkbox checks are not showing in IE11. - Works in edge though.
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.
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.