Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

a simple fixed-action-button

NotificationsYou must be signed in to change notification settings

vue-comps/vue-fixed-action-button

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-fixed-action-button

a simple fixed-action-button.

Install

npm install --save-dev vue-fixed-action-button

or includebuild/bundle.js.

Usage

# in your componentcomponents:"fab":require("vue-fixed-action-button")# or, when using bundle.jscomponents:"fab":window.vueComps.fab
<fabstyle="bottom:20px;right:20px"><buttonslot="fab">hover me</button><likey=1><button>Action 1</button></li><likey=2><button>Action 2</button></li></fab>

seedev/ for examples.

Props

Nametypedefaultdescription
classArray or Object["fixed-action-btn"]class of thediv
not-dismissableBooleanfalsewill be not close on click outside of menu (only with click-to-toggle)
close-on-clickBooleanfalsewill be closed on click inside of menu
click-to-toggleBooleanfalseopens on click instead of hover
is-openedBooleanfalseset to open / close
transitionString"fab-transition"name of areusable vue transition-group
transition-nameString"fab"name of a css transition

Events

Namedescription
toggled(isOpened:Boolean)emitted when gets opened or closed.

Transition

You can provide a default js transition like this:

// must be a transition group// be sure to pass down the context dataVue.component('fab-transition',{functional:truerender:function(h,context){context.data.attrs.name="fade"context.data.props={css:false}context.data.on={enter: ...}returnh"transition-group",context.data,context.children)}})

Changelog

  • 2.0.0
    now compatible with vue 2.0.0
    changed way of using own transition
    every item needs a key now

  • 1.2.1
    cleanup

  • 1.2.0
    added toggled event
    set default transition

  • 1.1.0
    moved transition tovue-transitions properlyevents are renamed after vue transitions

  • 1.0.0
    moved transition tovue-transitions
    changed element fromspan toa

Development

Clone repository.

npm installnpm run dev

Browse tohttp://localhost:8080/.

License

Copyright (c) 2016 Paul PflugradtLicensed under the MIT license.

About

a simple fixed-action-button

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors2

  •  
  •  

[8]ページ先頭

©2009-2025 Movatter.jp