Install
npm install @oruga-ui/theme-bulma
or
yarn add @oruga-ui/theme-bulma
Configure
import { createApp } from 'vue'
import App from './App.vue'
import Oruga from '@oruga-ui/oruga-next'
import { bulmaConfig } from '@oruga-ui/theme-bulma'
import '@oruga-ui/theme-bulma/dist/bulma.css'
createApp(App)
.use(Oruga, bulmaConfig)
.mount('#app')
Please note, the package also works for @oruga-ui/oruga (Vue 2) and you can use it without importing the full Oruga bundle.
Customization (SASS/SCSS)
Using the following sample code you don't need import '@oruga-ui/theme-bulma/dist/bulma.css' but you have to add a custom sass/scss file to customize Bulma and theme variables.
@import "~bulma/sass/utilities/_all";
// Set your colors
$primary: #8c67ef;
$primary-light: findLightColor($primary);
$primary-dark: findDarkColor($primary);
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);
// Lists and maps
$custom-colors: null !default;
$custom-shades: null !default;
// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: mergeColorMaps(
(
"white": (
$white,
$black,
),
"black": (
$black,
$white,
),
"light": (
$light,
$light-invert,
),
"dark": (
$dark,
$dark-invert,
),
"primary": (
$primary,
$primary-invert,
$primary-light,
$primary-dark,
),
"link": (
$link,
$link-invert,
$link-light,
$link-dark,
),
"info": (
$info,
$info-invert,
$info-light,
$info-dark,
),
"success": (
$success,
$success-invert,
$success-light,
$success-dark,
),
"warning": (
$warning,
$warning-invert,
$warning-light,
$warning-dark,
),
"danger": (
$danger,
$danger-invert,
$danger-light,
$danger-dark,
),
),
$custom-colors
);
// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;
@import "~bulma/bulma";
@import '[email protected]/theme-bulma/dist/scss/bulma';
Override default config
In case you want to replace the default style of a component you can override or add new classes changing bulmaConfig; more details about components customization on https://oruga.io/documentation/#customization
import { createApp } from 'vue'
import Oruga from '@oruga-ui/oruga-next'
import { bulmaConfig } from '@oruga-ui/theme-bulma'
import '@oruga-ui/theme-bulma/dist/bulma.css'
const customBulmaConfig = {
...bulmaConfig,
checkbox: {
override: true,
rootClass: 'checkbox'
}
}
createApp(App)
.use(Oruga, customBulmaConfig)
.mount('#app')
Buefy users
Components
| Buefy | Oruga | Note |
|---|---|---|
| Taginput | Inputitems | |
| Toast | N.A. | You can customize Notification with noticeClass and/or passing a component using programmatic way |
| Snackbar | N.A. | You can customize Notification with noticeClass and/or passing a component using programmatic way |
At the moment you won't find Carousel, Dialog, Navbar, Menu but we'll add them soon in Oruga core code.
Props
| Buefy | Oruga | Component | Note |
|---|---|---|---|
| type | variant | - | Removed prefix is- |
| size | size | - | Removed prefix is- |
| loading | N.A. | - | Not supported |
| label-position | N.A. | Field | Not suppported but you can easily add is-floating-label or is-floating-in-label class to root-class prop |
| size | N.A. | Tooltip | You can use multiline-class or content-class |
| custom | N.A. | Dropdown Item | You can use tag prop |
| has-modal-card | N.A. | Modal | You have to add content-class="modal-content" when you don't use modal-card classes as content |
Contributors
Thank you to everyone involved for improving this project, day by day
Credits
Logo designed by rubjo
License
Code released under MIT license.
Docs: New logo
Using Oruga logo and Bulma logo "draw" a new logo to publish in the Readme and in the official docs.
Your profile will be mentioned in the README 🎉
Datepicker header fields are not attached
Hello,
I have an issue with the datepicker component: month and year fields are not attached.
Following HTML rendered (differences seems to be
<div class="pagination-list">children) and screenshotsWith Buefy (0.9.10) / bulma (0.9.3), I got this:
And now with oruga-next: (0.5.4) / theme-bulma (0.2.3), it display like this:
I presume we need to have this missing part:
I tried to add the Bulma
field has-addonsclasses to thediv.pagination-listusing thelistsClassprop but it overflows 😞:Last (ugly) try, I updated the
.dropdown-menuwithmin-width: 25rem...Cannot load externally because of unexpected characters in global namespace
Hello,
I like to load theme-bulma externally using webpack. But because the global name @orugaUi/themeBulma used in bulma.js contains non-ascii characters this is not possible. Works fine if I modify the bulma.js file myself to use a global name such as themeBulma.
Is there any chance the global name will be changed to something compatible with webpack in the near future? Or do you see this as a bug in webpack itself?
vue.config.js
npm run build
Upload component shows extra, standard HTML "Choose File" button
Vue version: 3.2.25 Bulma theme: 0.2.2 Oruga: 0.5.4
Using the example of the base Upload component in the Oruga documentation, I'm getting two buttons: one o-button, and one that seems to be the standard upload element's button reading "Choose File".
I haven't looked into it yet, but has this component been confirmed working before with the Bulma plugin? Can't use it like this. :)
Notification renders double close button
First off, great library, keep up the good work!
I'm using @oruga-ui/oruga-next 0.5.6 and @oruga-ui/theme-bulma 0.2.7 in a Vue 3 app with fontawesome. When I open a notification like this
oruga creates a notification with a double close button like this
This issue is theme applies bulma's
deleteclass to the close element (creating the circular close button using css) and also generates an icon using the default value of thecloseIconprop in the component. I was able to get around this problem by passing an empty string for closeIcon in my config like this:I would recommend making this a part of the theme for a smoother dev experience.
fix: vertical tabs and bottom border of boxed tabs
a new try to fix the bottom border of boxed tabs. this time there is a bottom border over the whole length, just like in Bulma. Additionaly I fixed vertical tabs and the positions.
Please provide examples on how to use theme-bulma with Vue 2, especially when importing single components
the readme states: 'Please note, the package also works for @oruga-ui/oruga (Vue 2) and you can use it without importing the full Oruga bundle.'.
I am using Vue 3 however, but am using the Options API like so.
But how would I use the
bulmaConfigto configure that individual components where there are needed? I really do not want to import the entire package into my app, I only need a few components.Buttons (and selects) in fields with has-addons don't attach correctly
Buttons in fields with
Wrapping the button in a
has-addonsdon't attach to the field corrctly and keep theirborder-radiusset.<div class="control">fixes this, is this the intended behaviour?o-table pagination issue
Hey guys, I'm currently trying to integrate Oruga into my app that has been using Buefy.
I'm using Oruga
0.5.2and theme-bulma0.2.1.I'm having an issue with the appearance of the pagination section when I use the Oruga Table Component
o-table.When I compare it to Buefy's pagination for
b-table, I notice that all the level classes aren't being applied. For example:level top,level-right,level-leftand so on.As a temporary fix, I manually wrote the scss for the level classes to be applied to the pagination divs.
I've included the styles below...
I think a more permanent solution will have to be an update to both theme-bulma and oruga. Oruga needs to have the customizations for those divs so theme-bulma can set the configuration for the level classes. Right now, the only customization for this is
paginationWrapperClass, and theme-bulma sets this to empty when it should at least make it thelevelclass.Switch not showing after upgrade to Oruga 0.5.x
After upgrading to Oruga 0.5, the Switch component did not show on screen, as can be seen here:
if I remove theme-bulma, the switch appears again, as can be seen here:
the HTML code is:
and the app file is:
I think that some detil sliped during the Oruga upgrade and is afecting theme-bulma. Will be alert for any test request or aditional information needed.
Feature: create packaging
This repository aims to bring a default configuration to use Oruga components with Bulma styles.
We need some help to
to make it ready to be built as a NPM package.
fix: Add datepicker classes for monthly mode
I was messing around with this library and noticed that when the datepicker was created in monthly mode, the styling broke (also reported in https://github.com/oruga-ui/theme-bulma/issues/71).
From inspecting the DOM tree it looked like none of the classes were set, so this explicitly adds the class props in the bulma config.
A screenshot of how it looked for me when I did it using the override
I'm not sure if there's a better way to fix this or if it's a bug in the Oruga lib itself when it generates classes, though, so worth a review!
datepicker appearance with month type
Hi,
Thank you very much for the project!
My environment:
With the following code (from Oruga documentation):
I get the following result:
From Oruga documentation (https://oruga.io/components/datepicker.html), I should get something like this:
firefox inspector gives the following html:
inputitems sizing does not work correctly.
When I set the size to small
the component display small initially, however as soon as an entry is selected it increases in size.
The issues I've found so far are:
when blank the o-inputitems component renders at 30.7px high (vs a o-input control as small renders at 30px)
when an entry is added to the o-inputitems the size increases to 36.1667px
Other sizes are also not inline either. default 40 vs 39.8 medium 50 vs 48.9 large 60 vs 58
for Buefy the taginput sizes are 29.6, 39.8, 50, 60.2 and do not have the issue of changing sizes with or without the "tags".
sticky-header on table does not work with theme-bulma
adding the sticky-header prop on an o-table when using theme-bulma does nothing as
Other usability-questions regarding sticky Headers.
Replace the use of @import
According to https://sass-lang.com/blog/the-module-system-is-launched we should replace
@importthat has been deprecated since last October and we'll be removed before the end of year.https://sass-lang.com/documentation/at-rules/import