Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Bottom navigation #7534

Closed
wants to merge 2 commits into from
Closed

feat: Bottom navigation #7534

wants to merge 2 commits into from

Conversation

shoeffner
Copy link

@shoeffner shoeffner commented Feb 6, 2022 •
edited
Loading

This PR adds the bottom navigation component as drafted by @TroyTae in #5022 (closed and in its current state no longer working) and updates it to follow the 13.0.0 material design components version.

It might still need some polishing and tests, but the basics work.
Essentially, you can build a footer with a bottom-navigation as follows:

<footer>
    <nav class="mdc-bottom-navigation">
        <button class="mdc-bottom-navigation__menu">
            <span class="material-icons mdc-bottom-navigation__icon" aria-label="Food">restaurant</span>
            <span class="mdc-bottom-navigation__label">Food</span>
        </button>
        <button class="mdc-bottom-navigation__menu">
            <span class="material-icons mdc-bottom-navigation__icon" aria-label="Drinks">local_drink</span>
            <span class="mdc-bottom-navigation__label">Drinks</span>
        </button>
        <button class="mdc-bottom-navigation__menu">
            <span class="material-icons mdc-bottom-navigation__icon" aria-label="Taxi">hail</span>
            <span class="mdc-bottom-navigation__label">Taxi</span>
        </button>
    </nav>
</footer>

To achieve:
image

Closes #59.

Troy Tae and others added 2 commits February 6, 2022 03:55
@shoeffner
feat(bottom-navigation): Squashed TroyTae's PR
c63e02f 
This squashes the PR of TroyTae to base my changes upon.

Merges material-components#5022.

commit 4959f5e
Author: Troy Tae <tjy970721@gmail.com>
Date:   Thu Sep 5 15:13:05 2019 +0900

    feat(bottom-navigation): fix lint

commit 80c678e
Author: Troy Tae <tjy970721@gmail.com>
Date:   Thu Sep 5 15:05:59 2019 +0900

    feat(bottom-navigation): split function & write comment

commit aa31976
Author: Troy Tae <tjy970721@gmail.com>
Date:   Thu Sep 5 12:31:51 2019 +0900

    feat(bottom-navigation): apply acceleration

commit ff1d809
Author: Troy Tae <tjy970721@gmail.com>
Date:   Mon Sep 2 17:01:40 2019 +0900

    feat(bottom-navigation): fix error

commit 35f44a1
Author: Troy Tae <tjy970721@gmail.com>
Date:   Mon Sep 2 16:39:16 2019 +0900

    feat(bottom-navigation): delete test code

commit bd2b88a
Author: Troy Tae <tjy970721@gmail.com>
Date:   Mon Sep 2 16:38:05 2019 +0900

    feat(bottom-navigation): scroll animation

commit 5e0cd14
Author: Troy Tae <tjy970721@gmail.com>
Date:   Mon Sep 2 15:44:14 2019 +0900

    feat(bottom-navigation): scroll handler

commit 905f299
Author: Troy Tae <tjy970721@gmail.com>
Date:   Thu Aug 29 19:21:16 2019 +0900

    feat(bottom-navigation): define cssClasses/strings

commit dec3981
Author: Troy Tae <tjy970721@gmail.com>
Date:   Wed Aug 28 17:41:18 2019 +0900

    feat(bottom-navigation): fix README.md for lint

commit bff1c49
Author: Troy Tae <tjy970721@gmail.com>
Date:   Wed Aug 28 16:55:49 2019 +0900

    feat(bottom-navigation): component

commit cbfa7b2
Author: Troy Tae <tjy970721@gmail.com>
Date:   Wed Aug 28 15:59:59 2019 +0900

    feat(bottom-navigation): write README.md for lint

commit e3cbb84
Author: Troy Tae <tjy970721@gmail.com>
Date:   Wed Aug 28 15:54:53 2019 +0900

    feat(bottom-navigation): foundation

commit 1897c45
Author: Troy Tae <tjy970721@gmail.com>
Date:   Wed Aug 28 12:13:07 2019 +0900

    feat(bottom-navigation): define adapter

commit 496b745
Author: Troy Tae <tjy970721@gmail.com>
Date:   Wed Aug 28 12:00:06 2019 +0900

    feat(bottom-navigation): define constants

commit 27884b0
Author: Troy Tae <tjy970721@gmail.com>
Date:   Mon Aug 26 15:59:51 2019 +0900

    feat(bottom-navigation): fix lint

commit c8cb97e
Author: Troy Tae <tjy970721@gmail.com>
Date:   Mon Aug 26 15:58:34 2019 +0900

    feat(bottom-navigation): box-shadow for scrolled state

commit 533fe6b
Author: Troy Tae <tjy970721@gmail.com>
Date:   Mon Aug 26 15:43:49 2019 +0900

    feat(bottom-navigation): allow stacked menu

commit 80ce7ac
Author: Troy Tae <tjy970721@gmail.com>
Date:   Fri Aug 23 19:23:16 2019 +0900

    feat(bottom-navigation): declare style variable

commit ca4cac7
Author: Troy Tae <tjy970721@gmail.com>
Date:   Fri Aug 23 18:56:46 2019 +0900

    feat(bottom-navigation): support inline icon/label

commit 92da319
Author: Troy Tae <tjy970721@gmail.com>
Date:   Fri Aug 23 16:40:00 2019 +0900

    feat(bottom-navigation): fix lint

commit 6f3e8f8
Author: Troy Tae <tjy970721@gmail.com>
Date:   Fri Aug 23 16:22:48 2019 +0900

    feat(bottom-navigation): menu ripple

commit 9943778
Author: Troy Tae <tjy970721@gmail.com>
Date:   Fri Aug 23 15:48:51 2019 +0900

    feat(bottom-navigation): write component

commit 86b8621
Author: Troy Tae <tjy970721@gmail.com>
Date:   Fri Aug 23 12:39:21 2019 +0900

    feat(bottom-navigation): configuration bottom-navigation environment
@shoeffner
feat(bottom-navigation): Update to 13.0.0
dbcf50d 
Updates PR material-components#5022 to work with the most recent master branch.
@shoeffner shoeffner changed the title Bottom navigation feat: Bottom navigation Feb 6, 2022
@asyncLiz
Copy link
Contributor

asyncLiz commented Feb 7, 2022

Wow this is amazing!! Good work on such a thorough implementation :D

Unfortunately though, MDC is entering a maintenance-only phase as the Material Web team focuses our efforts on Material You and the next generation of components 😔

I'd encourage you to publish this from your own repo on NPM though! I'm sure others would love to use it while they wait on the Material You bottom nav bar that we've built!

@asyncLiz asyncLiz closed this Feb 7, 2022
@shoeffner
Copy link
Author

Thank you for your feedback! It's all @TroyTae's work, I only fixed some compatibility issues with the latest version.

Sorry to hear you are no longer adding missing components to MDC, I must have missed that. Thanks for pointing me to Material You :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Investigate making Bottom Navigation Component
2 participants
@shoeffner @asyncLiz