开源软件名称（OpenSource Name）：nobitagit/material-floating-button开源软件地址(OpenSource Url)：https://github.com/nobitagit/material-floating-button开源编程语言(OpenSource Language)：JavaScript 100.0%开源软件介绍(OpenSource Introduction)：Material Floating ButtonMaterial design floating button action implementation. Made to be semantic, fast and easy to customize.
See a demo here to see it in action or just take a look at this awesome gif: Test all the available effects to date in the demo. ##Other versions## Also available as: ##How to use## ###Basic usage### Clone/download the repo from Github or just use npm: (Optionally) run <link href="path/to/css/mfb.css" rel="stylesheet">Use the appropriate html structure (better explained later), for example: <ul class="mfb-component--tl mfb-slidein" data-mfb-hover>
<!-- the menu content -->
</ul>Everything should already work fine. You may or may not want to include the provided <script src="path/to/js/mfb.js"></script>For a breakdown on why and when you need to include the script please refer to Toggling options and touch devices support. ###Customising the component### ####HTML#### The basic structure of the component is the following (the customisable classes/attributes are in curly braces): <ul class="{{placement-class}} {{effect-class}}" {{hover/click-to-open}} {{menu-state}}>
<li class="mfb-component__wrap">
<!-- the main menu button -->
<a data-mfb-label="{{the label text of the main button}}" class="mfb-component__button--main">
<!-- the main button icon visibile by default -->
<i class="mfb-component__main-icon--resting {{icon-class}}"></i>
<!-- the main button icon visibile when the user is hovering/interacting with the menu -->
<i class="mfb-component__main-icon--active {{active-icon-class}}"></i>
</a>
<ul class="mfb-component__list">
<!-- a child button, repeat as many times as needed -->
<li>
<a href="link.html" data-mfb-label="{{the label text of the a child button}}" class="mfb-component__button--child">
<i class="mfb-component__child-icon {{icon-class}}"></i>
</a>
</li>
</ul>
</li>
</ul>####SCSS/CSS#### Although you can use the provided css as is, it's highly likely that you will want to customise the looks and behavior of the component by changing its underlying css. A number of variables is provided for your convenience in the SASS file. The best way to tweak them is leave the // your .scss working file
$main-color: #4991EF;
@import "path/to/src/mfb.scss";This will leave the core files unchanged from the source. You will then be able to keep this repo as upstream and pull in any future changes without having to worry about overwriting your changes. Here below is a breakdown of all the variables currently available, along with their defaults. #####Basic#####
#####Effects##### n.b. - set to true to include the effect styles in the compiled .css file. To actually activate the desired effect you need to reference the corresponding class in the markup (see here)
As a suggestion, try to only include the animation you're using in production in order to have a much lighter css. #####Speeds#####
#####Sizes#####
You can compile the final css on your own or use the provided, pre-configured Grunt tasks for it. After installing all dependencies (by running ####Toggling options and touch devices support#### The menu can be customised to be activated either on hover or on click/tap. To assign the desired toggling method the component provides some attributes to add this functionality in a declarative way right from the markup. #####Hover toggling##### If you're only interested in desktop support and want the menu to be activated on hover you won't need to include any scripts as that animation is CSS-based and included in the stylesheet provided. Just set the <ul class="mfb-component--tl mfb-slidein" data-mfb-toggle="hover">#####Click toggling##### To add click and touch support (and to support the open/close animation programmatically, more on this later) include the <ul class="mfb-component--tl mfb-slidein" data-mfb-toggle="click" data-mfb-state="closed">If you want the menu to appear open at load time, do this instead: <ul class="mfb-component--tl mfb-slidein" data-mfb-toggle="click" data-mfb-state="open">#####Hover toggling along with touch support##### If you want the menu to work on hover but need support for touch devices you first need to include Modernizr to detect touch support. If you are alreay using it in your project just make sure that the touch detection is enabled. If you're not using Modernizr already, just include the provided Then include the <ul class="mfb-component--tl mfb-slidein" data-mfb-toggle="hover">The script will take care of changing the behavior when the page is viewed from a touch enabled device. #####Opening/closing the menu programmatically##### If you need to close the menu after a certain event (or open it without user interaction) you can easily do so just by setting its state to menu.setAttribute('data-mfb-state', 'closed');Or open it with: menu.setAttribute('data-mfb-state', 'open');##Contributions?## Yes please! If you submit a PR please add the relative documentation in this README (if needed) and don't forget to add you name and/or email to the contributors list in the package.json file. ##Credits##
##Todos##
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论