Ecodev / Fab Speed Dial
Licence: mit
Angular Material FAB speed dial
Stars: ✭ 82
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Fab Speed Dial
La Capitaine Icon Theme
La Capitaine is an icon pack designed to integrate with most desktop environments. The set of icons takes inspiration from the latest iterations of macOS and Google's Material Design.
Stars: ✭ 1,858 (+2165.85%)
Mutual labels: hacktoberfest, material
Blueprint
Free, feature-rich, easily customizable Android dashboard for icon packs
Stars: ✭ 389 (+374.39%)
Mutual labels: hacktoberfest, material
Noice
A native Android app to relax, improve focus and boost productivity with minimal background noise.
Stars: ✭ 264 (+221.95%)
Mutual labels: hacktoberfest, material
Vue Material
Material design for Vue.js
Stars: ✭ 9,528 (+11519.51%)
Mutual labels: hacktoberfest, material
Filmy
🎥 Material designed awesome movie app which is powered by tmdb.
Stars: ✭ 697 (+750%)
Mutual labels: hacktoberfest, material
Linearprogressbar
Material Linear Progress Bar for your iOS apps
Stars: ✭ 131 (+59.76%)
Mutual labels: hacktoberfest, material
Fabsmenu
A simple library to use a menu of FloatingActionButtons from Design Support Library that follow Material Design Guidelines
Stars: ✭ 324 (+295.12%)
Mutual labels: material, fab
Materialdesigninxamltoolkit
Google's Material Design in XAML & WPF, for C# & VB.Net.
Stars: ✭ 11,603 (+14050%)
Mutual labels: hacktoberfest, material
Awesome Checker Services
✅ List of links to the various checkers out there on the web for sites, domains, security etc.
Stars: ✭ 662 (+707.32%)
Mutual labels: hacktoberfest, speed
Material Shell
A modern desktop interface for Linux. Improve your user experience and get rid of the anarchy of traditional desktop workflows. Designed to simplify navigation and reduce the need to manipulate windows in order to improve productivity. It's meant to be 100% predictable and bring the benefits of tools coveted by professionals to everyone.
Stars: ✭ 6,189 (+7447.56%)
Mutual labels: hacktoberfest, material
Generator Ngx Rocket
🚀 Extensible Angular 11+ enterprise-grade project generator
Stars: ✭ 1,329 (+1520.73%)
Mutual labels: hacktoberfest, material
Vuetify
🐉 Material Component Framework for Vue
Stars: ✭ 33,085 (+40247.56%)
Mutual labels: hacktoberfest, material
Frames
Free, feature-rich, easily customizable Android dashboard for wallpapers apps
Stars: ✭ 396 (+382.93%)
Mutual labels: hacktoberfest, material
Slidetoact
A simple 'Slide to Unlock' Material widget for Android, written in Kotlin 📱🎨🦄
Stars: ✭ 783 (+854.88%)
Mutual labels: hacktoberfest, material
Mahapps.metro.iconpacks
Awesome icon packs for WPF and UWP in one library
Stars: ✭ 1,157 (+1310.98%)
Mutual labels: hacktoberfest, material
Noredink Ui
UI widgets we use -- https://noredink-ui.netlify.com/
Stars: ✭ 81 (-1.22%)
Mutual labels: hacktoberfest
Windows exporter
Prometheus exporter for Windows machines
Stars: ✭ 1,230 (+1400%)
Mutual labels: hacktoberfest
Theodinproject
Main Website for The Odin Project
Stars: ✭ 1,227 (+1396.34%)
Mutual labels: hacktoberfest
Angular Material FAB speed dial
This is a FAB speed dial component for Angular Material.
See the component in action on the demo page.
Install
- Install the library:
yarn add @ecodev/fab-speed-dial
- In
app.module.ts
add the following modules to theimports
array:MatButtonModule
MatIconModule
EcoFabSpeedDialModule
Usage
The following is an example of a minimal template. Either implement a doAction()
,
or adapt the bindings to your needs:
<eco-fab-speed-dial>
<eco-fab-speed-dial-trigger>
<button mat-fab (click)="doAction('trigger')"><mat-icon>menu</mat-icon></button>
</eco-fab-speed-dial-trigger>
<eco-fab-speed-dial-actions>
<button mat-mini-fab (click)="doAction('action1')"><mat-icon>add</mat-icon></button>
<button mat-mini-fab (click)="doAction('action2')"><mat-icon>edit</mat-icon></button>
<button mat-mini-fab (click)="doAction('action3')"><mat-icon>search</mat-icon></button>
</eco-fab-speed-dial-actions>
</eco-fab-speed-dial>
Properties
eco-fab-speed-dial
Property | Type | Default | Description |
---|---|---|---|
open |
boolean |
false |
Indicates if this FAB Speed Dial is opened |
direction |
up , down , left or right
|
up |
The direction to open the action buttons |
animationMode |
fling or scale
|
fling |
The animation to apply when opening the action buttons |
fixed |
boolean |
false |
Indicates if this FAB Speed Dial is fixed (user cannot change the open state on click) |
eco-fab-speed-dial-trigger
Property | Type | Default | Description |
---|---|---|---|
spin |
boolean |
false |
Enables the rotation of the trigger action when the speed dial is opening |
Additionally to spin property, add class "spin180" or "spin360" on html content inside of eco-fab-speed-dial-trigger
tag to activate rotation on a specific element.
In case of buttons, the icon should rotate not the whole button (box-shadow would rotate too).
Development
The most useful commands for development are:
-
yarn dev
to start a development server -
yarn build-demo
to build the demo locally (it will be published automatically by GitHub Actions) -
git tag -a 1.2.3 && git push
to publish the lib to npm (via GitHub Actionsrelease
job)
Prior work
This lib was originally based on angular-smd, and its various forks, itself based on AngularJS FAB Speed Dial.
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].