angular-material-extensions/fab-menuPublic

NotificationsYou must be signed in to change notification settings
Fork16
Star48

Angular Component that represents a menu of buttons triggered by a floating action button | built with material design

angular-material-extensions.github.io/fab-menu/

License

MIT license

48 stars 16 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 137 Commits
.github		.github
assets		assets
e2e		e2e
projects/angular-material-extensions/fab-menu		projects/angular-material-extensions/fab-menu
src		src
.editorconfig		.editorconfig
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
angular.json		angular.json
browserslist		browserslist
karma.conf.js		karma.conf.js
package-lock.json		package-lock.json
package.json		package.json
prerender.ts		prerender.ts
server.ts		server.ts
server.ts.bak		server.ts.bak
static.paths.ts		static.paths.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.server.json		tsconfig.server.json
tsconfig.spec.json		tsconfig.spec.json
tslint.json		tslint.json
webpack.server.config.js.bak		webpack.server.config.js.bak

Repository files navigation

@angular-material-extensions/fab-menu - Angular Material component that allow users to select a country or nationality with an autocomplete feature

Built by and for developers ❤️

Do you have any question or suggestion ? Please do not hesitate to contact us!Alternatively, provide a PR | open an appropriate issuehere

If you like this project, supportangular-material-extensionsby starring ⭐ and sharing it 📢

Demo

View all the directives and components in action athttps://angular-material-extensions.github.io/fab-menu

Library's components

<mat-fab-menu> used to display the main component

Dependencies

Angular

Installation

1. Install viang add. (Recommended)

If Angular Material Design is not setup, just runng add @angular/materiallearn more

Now add the library via theangular schematics

ng add @angular-material-extensions/fab-menu

2. Install vianpm. (Alternative)

Now install@angular-material-extensions/fab-menu via:

npm install --save @angular-material-extensions/fab-menu

Import the library

If you installed the library via angular schematics, you can skip this step

Once installed you need to import the main module:

import{MatFabMenuModule}from'@angular-material-extensions/fab-menu';

import{MatFabMenuModule}from'@angular-material-extensions/fab-menu';@NgModule({declarations:[AppComponent, ...],imports:[MatFabMenuModule, ...],bootstrap:[AppComponent]})exportclassAppModule{}

Other modules in your application like for lazy loading importMatSelectCountryModule into your feature module:

API

`<mat-fab-menu>` used to display the main component -see the demo examples

`<mat-mini-fab-menu>` used to display a mini version of the fab menu -see the demo examples

option	bind	type	default	description
fabButtons	`Input()`	`MatFabMenu[]`	-	array of floating actions button as menu to render
icon	`Input()`	`string`	`add`	material icon string e.g: home, mail, phonesee more
direction	`Input()`	`MatFabMenuDirection`	`top`	the direction of buttons: `'top'
color	`Input()`	`ThemePalette`	`accent`	the color of the main fab: primary, accent or warn
isActive	`Input()`	`boolean`	`false`	Whether the component is active
disabled	`Input()`	`boolean`	`false`	Whether the component is disabled
closeAfterSelection	`Input()`	`boolean`	`true`	Close after selecting a fab menu item
onFabMenuItemSelected	`Output()`	`EventEmitter<string \| number>`	-	emits the selected button by id

Methods

@ViewChild('matFabMenu',{static:false}) matFabMenu:MatFabMenu;

toggle() will toggle theisActive property

Important interfaces or type

import{ThemePalette,TooltipPosition}from'@angular/material';interfaceMatFabMenu{id:string|number;icon?:string;// please use either icon or imgUrliconColor?:ThemePalette;imgUrl?:string;// please use either icon or imgUrltooltip?:string;tooltipPosition?:TooltipPosition;color?:ThemePalette;}typeMatFabMenuDirection='top'|'bottom'|'left'|'right';

Usage

<mat-fab-menucolor="primary"[fabButtons]="fabButtonsRandom"></mat-fab-menu><!-- or if you prefer the mini version --><mat-mini-fab-menucolor="primary"[fabButtons]="fabButtonsRandom"></mat-mini-fab-menu>

import{MatFabMenu}from'@angular-material-extensions/fab-menu';fabButtonsRandom:MatFabMenu[]=[{id:1,icon:'create'},{id:2,icon:'mail'},{id:3,icon:'file_copy'},{id:4,icon:'phone'},];

try to use your own svg instead of material icons:

import{MatFabMenu}from'@angular-material-extensions/fab-menu';fabCountries:MatFabMenu[]=[{id:1,imgUrl:'assets/countrys-flags/svg/canada.svg'},{id:2,imgUrl:'assets/countrys-flags/svg/germany.svg'},{id:3,imgUrl:'assets/countrys-flags/svg/france.svg'},{id:4,imgUrl:'assets/countrys-flags/svg/lebanon.svg'},];

<mat-fab-menucolor="primary"[fabButtons]="fabButtonsRandom"></mat-fab-menu>

<mat-fab-menucolor="primary"direction="bottom"[fabButtons]="fabButtonsRandom"></mat-fab-menu>

<mat-fab-menucolor="primary"direction="left"[fabButtons]="fabButtonsRandom"></mat-fab-menu>

<mat-fab-menucolor="primary"direction="right"[fabButtons]="fabButtonsRandom"></mat-fab-menu>

Run Demo App Locally

Build the library

after installing the dependencies withnpm i

$ npm run build:lib

Serve the demo app

$ npm start

Other Angular Libraries

Support

Drop an email to:Anthony Nahas
or open an appropriateissue
let us chat onGitter

Built by and for developers ❤️ we will help you 👊

Who is using ngx-mailto? Awesome apps?

Nahaus.de

Are you missing your project or you app? PR me to publish it on the README

This project is supported byjetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl.webstorm

License

About

Angular Component that represents a menu of buttons triggered by a floating action button | built with material design

angular-material-extensions.github.io/fab-menu/

Code of conduct

Contributing

Activity

Custom properties

Stars

48 stars

Watchers

2 watching

Forks

16 forks

Report repository

Releases14

Release 6.1.0 Latest

Dec 19, 2022

+ 13 releases

Sponsor this project

Learn more about GitHub Sponsors

Packages

No packages published

Movatterモバイル変換

Uh oh!

License

angular-material-extensions/fab-menu

Folders and files

Latest commit

History

Repository files navigation

@angular-material-extensions/fab-menu - Angular Material component that allow users to select a country or nationality with an autocomplete feature

Built by and for developers ❤️

Table of Contents

Demo

Library's components

Dependencies

Installation

1. Install viang add. (Recommended)

2. Install vianpm. (Alternative)

Import the library

API

<mat-fab-menu> used to display the main component -see the demo examples

<mat-mini-fab-menu> used to display a mini version of the fab menu -see the demo examples

Methods

Usage

Run Demo App Locally

Other Angular Libraries

Support

Who is using ngx-mailto? Awesome apps?

License

About

Topics

Resources

License

Code of conduct

Contributing

Uh oh!

Stars

Watchers

Forks

Releases14

Sponsor this project

Uh oh!

Packages0

Uh oh!

Contributors4

Uh oh!

Languages

`<mat-fab-menu>` used to display the main component -see the demo examples

`<mat-mini-fab-menu>` used to display a mini version of the fab menu -see the demo examples

Packages