Lightweight UI components for Vue.js based on Bulma
MIT License
Bot releases are visible (Hide)
Published by rafaberaldo about 6 years ago
This is probably the most stable version so far.
// see Toast, Snackbar, Modal and Dialog doc pages for more examples
import { Toast } from 'buefy/dist/components/toast'
Toast.open('Toasty!')
File
and Array<File>
when multiple as v-model
readonly
to editable
on datepicker and timepicker (now just use the prop without false value)https://unpkg.com/buefy/dist/buefy.min.css
; andhttps://unpkg.com/buefy/dist/buefy.min.js
, respectively.$buefy.setOptions({...})
closable
props to taginput (thanks @adrlen)type
prop of field and iconsize
prop to datepicker and timepickerPublished by rafaberaldo about 6 years ago
auto-close
and duration
props to message and notificationallow-duplicates
prop to taginputrequired
prop to radio and checkboxdefaultInputHasCounter
constructor optionsTable script CDN for example:
<script src="https://unpkg.com/[email protected]/dist/components/table/index.js"></script>
icon-pack
from icon to be reactivePublished by rafaberaldo over 6 years ago
header
slot to autocompletetype
prop to checkbox and radioon-paste-separators
and before-adding
props to tagInputellipsis
prop to tagInput and tag componentsdateFormatter
function to datepickerPublished by rafaberaldo over 6 years ago
header
slot to tabItemchangeMonth
and changeYear
events to datepicker in change-month
and change-year
Published by rafaberaldo over 6 years ago
indefinite
prop to snackbarheader
slot to datepickerheader
slot to tabItemcustom-class
prop to field (thanks @docnoe)is-row-checkable
prop to table (thanks @jvmonjo)changeMonth
and changeYear
events to datepickerremove-on-keys
prop to taginput, allowing to remove last tag (thanks @adrlen)is-full-page
prop to loading, to limit it to its container (thanks @adrlen)visible
prop to tabItemclear-on-select
prop to autocomplete (thanks @raniesantos)selectable-dates
prop to datepicker (thanks @pip63)has-detailed-visible
prop to table (thanks @wanxe)focus-on
prop to dialogon-cancel
prop to dialog, get called when clicking confirmPublished by rafaberaldo over 6 years ago
columns
prop to table, you can now pass an array instead of adding scoped slots (for simple tables)rounded
prop to Input, Select, Autocomplete, Datepicker and Timepicker, Paginationopen
prop to collapse trigger
slotnative
prop to uploadopen-on-focus
prop to autocomplete (good to simulate a select element)allow-new
prop to taginputunselectable-days-of-week
prop to datepickericon-size
prop to messagecustom-sort
function of table (thanks @frantic1048)unselectable-times
prop to timepickerpagination-size
prop to table (thanks @nateleavitt)confirm-key-codes
prop to taginputmax-results
prop from autocomplete, it now has a scrollbar with all resultskeep-first
autocomplete prop with async dataPublished by rafaberaldo almost 7 years ago
queue
prop to toast/snackbar and defaultNoticeQueue
constructor option
horizontal
prop (thanks @electrolinux)mobile-native
prop to datepicker and timepickerdefaultDatepickerMobileNative
and defaultTimepickerMobileNative
constructor optionsevents
prop to modal (to bind events programmatically)position
prop to datepicker and timepickersize
prop to dialogtabstop
and disabled
props to tag.sync
option to table current-page
keep-first
selecting on blur when nothing is showncurrent-page
from table to be reactivePublished by rafaberaldo almost 7 years ago
Published by rafaberaldo almost 7 years ago
inputPlaceholder
, inputName
and inputMaxlength
props<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
disabled
prop to tabItemfocusable
prop to tablefocus()
method to tablehoverable
prop to tablecustom-size
prop to iconcustom-class
prop to icondetail-key
and opened-detailed
props to table (thanks @wanxe)scroll
prop to modal/dialog (changes what to do with <body>
scrollbar)parent
prop to modal, pass a Vue object to it to open component modal programmaticallymobile-modal
prop to dropdown to enable/disable modal on mobilesrc/scss/utils/_all.scss
for easier modular importing (thanks @gwvt)current-page
prop to table (thanks @frantic1048)size
prop to radio and checkboxunselectable-dates
prop to datepicker to disable an array of datesfocusable
scroll
prop)Published by rafaberaldo about 7 years ago
inputPlaceholder
, inputName
and inputMaxlength
props, use new inputAttrs
prop, see docs
focus
method on selectselected
prop can now be natigated with keyboardbottom-left
slot to tabledefaultDialogConfirmText
and defaultDialogCancelText
constructor optionsicon
and iconPack
prop to dialogcomponent
prop of modal (thanks @ivalkenburg)Published by rafaberaldo about 7 years ago
footer
slot to tablekey
on detailed rows of table component (thanks @Tirke)labelFor
prop to field component, to set native for
attribute to the label tag (thanks @tmepple)size
prop to radio buttonThanks @jtommy for most part of this release!
Published by rafaberaldo about 7 years ago
empty
slot to autocomplete (empty message)has-counter
prop to input, add it when you want show or hide character counter when maxlength prop is passedreadonly
prop to allow typing a date on datepickerfirst-day-of-week
prop to datepickerPublished by rafaberaldo about 7 years ago
custom-key
prop to table column, add it when you want a column without labelactive
prop to tooltipheader
slot to table (custom headers)custom-is-checked
prop to table column, add it when you want a custom compare function when is checkabledefault-sort-direction
prop to table, add it when you want change default sort direction on the first clickinput
multiple times (thanks @frantic1048)meta
prop to table column, useful for custom headerstype
prop to switch (thanks @Tirke)multiple
support to selectinline
prop to dropdown, items are shown inline and trigger removedhas-custom-template
prop from autocomplete, just use scoped slot to have the same featurePublished by rafaberaldo about 7 years ago
defaultContentElement
renamed to defaultContainerElement
b-dropdown-option
renamed to b-dropdown-item
subheader
prop renamed to custom
<input>
or <select>
itself instead of the root elementchange
events for all form controls (Input, Select Autocomplete, Checkbox, RadioGroup, Switch) that returned pure value will now return $event
(and require .native
modifier), use input
insteadcustom-value
prop renamed to native-value
checked
prop removedv-model
to multiple Checkboxes and set a native-value
, see docs
value
prop renamed to native-value
v-model
supportv-model
to multiple Radios/RadioButtons and set a native-value
see docs
checked
propposition
prop works for grouped
fieldsgroup-multiline
prop to fieldsize
prop to messagemessage
prop (thanks @jtommy)centered
prop to table columnnative-value
, true-value
and false-value
props to switchv-for
Published by rafaberaldo about 7 years ago
narrowed
prop from dropdownaddons
prop to field.media
elementinput
event on docs (input/autocomplete)expanded
prop not working correctlyPublished by rafaberaldo over 7 years ago
component
prop, works better for events and is more common — Old way is not deprecatedfocus()
methodrows
prop to input (textarea)checkHtml5Validity()
methodchange
event (thanks @jtommy).modal-card
responsiveness, added a has-modal-card
propPublished by rafaberaldo over 7 years ago
Published by rafaberaldo over 7 years ago
<keep-alive>
components, see updated animation
.control
element wrappinganimation
prop for dialog and modal, for custom animation (transition name)row-class
property to table to style row status, e.g.:<b-table :data="tableData" :row-class="row => row.amount < 10 && 'is-warning'">[...]</b-table>
key
propactive-change
event to know when it's dropdown list is active/visible (thanks @bartboy011)true-value
and false-value
props to checkboxPublished by rafaberaldo over 7 years ago
Published by rafaberaldo over 7 years ago
visible
prop to table column