ifndefdeadmau5 / React Floating Button Menu
Licence: mit
A customizable floating action button menu that follows material design
Stars: ✭ 27
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Floating Button Menu
Rhsidebuttons
Library provides easy to implement variation of Android (Material Design) Floating Action Button for iOS. You can use it as your app small side menu. 🌶
Stars: ✭ 164 (+507.41%)
Mutual labels: demo, material
Vuetify
🐉 Material Component Framework for Vue
Stars: ✭ 33,085 (+122437.04%)
Mutual labels: material, ui-components
Material Bread
Cross Platform React Native Material Design Components
Stars: ✭ 287 (+962.96%)
Mutual labels: material, ui-components
Primereact
The Most Complete React UI Component Library
Stars: ✭ 2,393 (+8762.96%)
Mutual labels: material, ui-components
Materialscrollbar
An Android library that brings the Material Design 5.1 sidebar to pre-5.1 devices.
Stars: ✭ 761 (+2718.52%)
Mutual labels: material, ui-components
Material Backdrop
A simple solution for implementing Backdrop pattern for Android
Stars: ✭ 221 (+718.52%)
Mutual labels: material, ui-components
Android Art
🎄 Android™ 设计相关的在线工具: 图标制作、配色方案、尺寸修改、截图加壳等,持续更新...
Stars: ✭ 95 (+251.85%)
Mutual labels: material, ui-components
Web
⚡️ Supercharged version of Create React App with all the bells and whistles.
Stars: ✭ 594 (+2100%)
Mutual labels: demo, material
Ngx Auth Firebaseui
Angular Material UI component for firebase authentication
Stars: ✭ 518 (+1818.52%)
Mutual labels: demo, material
Mrn
Material React Native (MRN) - A Material Design style React Native component library.
Stars: ✭ 1,741 (+6348.15%)
Mutual labels: material, ui-components
Demo Progressive Web App
🎉 A demo for progressive web application with features like offline, push notifications, background sync etc,
Stars: ✭ 798 (+2855.56%)
Mutual labels: demo, material
Material
A lightweight Material Design library for Angular based on Google's Material Components for the Web.
Stars: ✭ 143 (+429.63%)
Mutual labels: material, ui-components
Smart Webcomponents
Web Components & Custom Elements for Professional Web Applications
Stars: ✭ 110 (+307.41%)
Mutual labels: material, ui-components
Svelte Materialify
A Material UI Design Component library for Svelte heavily inspired by vuetify.
Stars: ✭ 351 (+1200%)
Mutual labels: material, ui-components
Togglebuttons
Android toggle buttons that adhere to the Material Design documentation.
Stars: ✭ 88 (+225.93%)
Mutual labels: material, ui-components
Material Viewpagerindicator
Dot-based Android ViewPager indicator with Material Design animations.
Stars: ✭ 511 (+1792.59%)
Mutual labels: demo, material
Ui Libraries
A collection of UI Frameworks and their platform implementations.
Stars: ✭ 769 (+2748.15%)
Mutual labels: material, ui-components
Android Expandicon
Nice and simple customizable implementation of Google style up/down expand arrow.
Stars: ✭ 871 (+3125.93%)
Mutual labels: material, ui-components
react-floating-button-menu
A customizable floating action button menu
Inspired by react-material-floating-button
Install
npm install --save react-floating-button-menu
Demo
See the project page
Usage
You can customize opening direction, speed, and styles of each button via props. Other options will be added soon
import {
FloatingMenu,
MainButton,
ChildButton,
Directions
} from 'react-floating-button-menu';
import MdAdd from '@material-ui/icons/add';
import MdClose from '@material-ui/icons/clear';
import MdFavorite from '@material-ui/icons/favorite';
state = {
isOpen: false,
}
...
<FloatingMenu
slideSpeed={500}
direction={Directions.Up}
spacing={8}
isOpen={this.state.isOpen}
>
<MainButton
iconResting={<MdAdd style={{ fontSize: 20 }} nativeColor="white" />}
iconActive={<MdClose style={{ fontSize: 20 }} nativeColor="white" />}
background="black"
onClick={() => this.setState({ isOpen: !this.state.isOpen })}
size={56}
/>
<ChildButton
icon={<MdFavorite style={{ fontSize: 20 }} />}
background="white"
size={40}
onClick={() => console.log('First button clicked')}
/>
<ChildButton
icon={<MdFavorite style={{ fontSize: 20 }} />}
background="white"
size={40}
/>
<ChildButton
icon={<MdFavorite style={{ fontSize: 20 }} />}
background="white"
size={40}
/>
</FloatingMenu>
...
License
MIT © ifndefdeadmau5
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].