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

Enable mwc-button to align items left #1114

Closed
MarcSkovMadsen opened this issue Apr 12, 2020 · 3 comments
Closed

Enable mwc-button to align items left #1114

MarcSkovMadsen opened this issue Apr 12, 2020 · 3 comments
Labels
Type: Feature New feature or request

Comments

@MarcSkovMadsen
Copy link

MarcSkovMadsen commented Apr 12, 2020 •
edited
Loading

My Pain

I'm trying to use the mwc components via HTML primarily. I would like to create an app layout with a mwc-drawer inside which i use the mwc-buttons as menu items.

But I cannot find a way to align the icon+text of the button to the left.

image

Solution

Add functionality to align items.

Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>
    <script type="module" src="https://unpkg.com/@material/mwc-button?module"></script>
    <script type="module" src="https://unpkg.com/@material/mwc-drawer?module"></script>
    <script type="module" src="https://unpkg.com/@material/mwc-icon-button?module"></script>
    <script type="module" src="https://unpkg.com/@material/mwc-slider?module"></script>
    <script type="module" src="https://unpkg.com/@material/mwc-top-app-bar-fixed?module"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
    <style>
        .appMenu mwc-button {
            width: 100%;
            text-align: left;
            align-items: left;
        }
    </style>
</head>
<body>
    <!-- page content -->
    <div>
        <mwc-drawer hasHeader type="dismissible">
            <span slot="title">Material App</span>
            <div class="appMenu">
                <mwc-button label="Data" icon="archive"></mwc-button>
                <mwc-button label="Models" icon="gesture"></mwc-button>
                <mwc-button label="Analytics" icon="assessment"></mwc-button>
            </div>
            <div class="appContent" slot="appContent">
                <mwc-top-app-bar-fixed class="appBar">
                    <mwc-icon-button icon="menu" slot="navigationIcon" class="appDrawerToggleButton"></mwc-icon-button>
                    <div slot="title" style="font-size:20px;">Panel App</div>
                    <mwc-icon-button icon="file_download" slot="actionItems"></mwc-icon-button>
                    <mwc-icon-button icon="print" slot="actionItems"></mwc-icon-button>
                    <mwc-icon-button icon="favorite" slot="actionItems"></mwc-icon-button>
                </mwc-top-app-bar-fixed>
                <div id="appMain">
                    <p><h1>Main Content!</h1></p>
                    <mwc-button raised="" label="raised"></mwc-button>
                    <mwc-icon-button icon="favorite" slot="actionItems"></mwc-icon-button>
                    <mwc-slider pin markers max="50" value="10" step="5"></mwc-slider>
                </div>
            </div>
        </mwc-drawer>
        <script>
                var drawers = document.getElementsByTagName("mwc-drawer");

                <!-- Enables toggling of drawers -->
                for (let drawer of drawers){
                    var button = drawer.getElementsByClassName('appDrawerToggleButton')[0];
                    button.onclick = function(e) {
                    var button = e.target;
                    var drawer = button;
                    while (drawer.tagName!=="MWC-DRAWER") {
                        drawer=drawer.parentElement;
                    }
                    drawer.open = !drawer.open;
                    };


                <!-- Enables displaying the bar in a notebook cell instead of full window -->
                var bar = drawer.getElementsByClassName('appBar')[0];
                bar.scrollTarget = drawer.getElementsByClassName('appContent')[0];
                }
        </script>
        </div>
  </body>
</html>
@MarcSkovMadsen MarcSkovMadsen mentioned this issue Apr 12, 2020
Merged
@asyncLiz
Copy link
Collaborator

This is not how buttons are intended to be used per spec, so we likely will not add functionality for their text or icons to be off-center.

If you just want the buttons to be aligned to the left, you can accomplish this by aligning them to the left and not filling the entire width (https://jsbin.com/vufinokeci/1/edit?html,output).

It really looks like what you're wanting is to use drawer with mwc-list and mwc-list-items. The list items can be used like a button with a ripple and display an icon with a single line of text. List items are also documented on spec as the recommended way to handle navigation items within a drawer.

@MarcSkovMadsen
Copy link
Author

Hi @asyncLiz

Thanks. I will try the mwc-list out. I guess its the action or selected events i should react to?

image

@asyncLiz
Copy link
Collaborator

Correct, I would listen to action events for navigation if moving to a different page. If this is a single page application where you stay on one page and the content changes, then a selected event may be more appropriate.

@spacegaier spacegaier mentioned this issue Sep 5, 2021
Closed
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Type: Feature New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@asyncLiz @MarcSkovMadsen