CODEWITHSUNDEEP
javascriptangularjsangular-material
Manolis Karamanis
Manolis Karamanis

Reputation: 788

How to implement top right profile button like Google with AngularJS?

I want to have a floating button on the top right corner of the main screen, which will open a card below the button when clicked, preferably with an arrow pointing to the button just like the one here https://www.google.gr/. I use Angular Material. Currently for this purpose I have a fab-speed-dial button and I use a card for the fab-actions. The problem is that when the card appears the profile button relocates, so that its horizontal position is in the middle of the card. 

<md-fab-speed-dial md-open="isProfileOpen"
               md-direction="down"
               ng-class="md-fling">
<md-fab-trigger>
    <md-button class="md-fab md-primary md-hue-2"
               aria-label="Profile">
        <md-icon md-svg-src="assets/img/profile.svg"></md-icon>
    </md-button>
</md-fab-trigger>
<md-fab-actions>
    <md-card ng-show="isProfileOpen"  md-theme="{{ showDarkTheme ? 'dark-purple' : 'default' }}" md-theme-watch>
        <md-card-title>
            <md-card-title-text>
                <span class="md-headline">Card with image</span>
                <span class="md-subhead">Medium</span>
            </md-card-title-text>
            <md-card-title-media>
                <div class="md-media-md card-media"></div>
            </md-card-title-media>
        </md-card-title>
        <md-card-actions layout="row" layout-align="end center">
            <md-button><a href="#!/login">Logout</a></md-button>
        </md-card-actions>
    </md-card>
</md-fab-actions>
</md-fab-speed-dial>

Is there a way to do this with Angular Material? What other options do I have?

Upvotes: 0

Views: 2158

Answers (1)

Jonathan Brizio
Jonathan Brizio

Reputation: 1210

A better option to recreate that you wish on the topbar is used a md-menu component from Angular Material. Menus are elements that open when clicked. They are useful for displaying additional options within the context of an action.

Take a look at the demo on the official documentation. I hope that helps.

Keep rocking!

Upvotes: 1

Related Questions