Demo source code - Githubissues

emilmuller commented 4 years ago

There are a lot of demos (e.g. https://material-components.github.io/material-components-web-catalog/#/component/menu). It would be really helpful if the demos included the source code for what is being demonstrated. Right now, it's like "here's what you can do, and here's the link to the entire component so you can tediously go figure out how it was done" :)

velociwabbit commented 4 years ago

I must agree. Usually google does a stellar job with this sort of thing. I am beginning to be concerned that Material Design Components are way too complicated and therefore easy examples are not possible.

here is a very simple but very needed use case:

I challenge anyone to construct an example that has a drawer that collapses where the buttons in the drawer display a dialog as a result of selecting each button. This is a very simple use case that should be available. Instead we are referred to repos and then to "switch" which looks like it was done as a 3rd grade class project where the third graders have spent the half their lives chained to their desks learning how to code

And the repos that supposedly have examples? how is a scss page an executable example? Either relabel the links or don't refer them as examples because there is nothing examply (if that is a word) about them for vanilla javascript.

The simplest examples require angular or webpack or react or some other set of npm packages. I thought that material UI was too top heavy but at least i can render a dialog.

There is a great deal of documentation but no where does it show this very simple case. Not with react or angular but simply with html.

I find it a bit ironic that despite all of this effort towards material design marketing and instruction the basic use cases are missing or are embedded in so much extra stuff that they are unusable without spending days debugging doc pages to figure out what was done.

This should be a 5 minute exercise for someone at google to produce. If it cannot be produced easily then we should be warned so that we can make other plans.

.

velociwabbit commented 4 years ago

I will even make it easier

Here is code that does most of the above (except the rendering of a dialog.)

If someone could generate a dialog render on selecting one of the buttons it will go a long way towards usability.


 <html>
<head>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"     rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,500,700|Material+Icons"       rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700|Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"                           rel="stylesheet">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
<script src="https://cdn.jsdelivr.net/npm/resize-observer-polyfill@1.5.1/dist/ResizeObserver.min.js"></script>

<style>
html { height: 100%;}
body { display: flex;  flex-direction: column;  min-height: 100%;  margin: 0;  padding: 0;   box-sizing: border-box;}

.d3-tip             { line-height:   1.5;  font-weight: 400; font-family: Roboto; font-size: 16px; color: #00b4dc;  position: relative;  padding: 20px;  background: #ffffff; border-radius: 3px;     }
.d3-tip:after       { line-height:    .5;  font-weight: 400; font-family: Roboto; font-size: 20px; color: #00b4dc;  position: absolute;   width: 100%;    content: "\25BC"; text-align: center;  box-sizing: border-box;  display: inline;}
.d3-tip.n:after     { margin: -1px 0 0 0;  top: 100%;  left: 0;}
.app-drawer-layout  {  display: flex;  flex: 1;   .mdc-drawer--dismissible {    top: 64px;    height: calc(100% - 64px);      }}

.main-content       {  display: flex;  flex-direction: column;   flex: 1;  padding: 1.5rem;}

div.tooltip {  position: absolute;  text-align: center;  width: 120px;  padding: 2px;  font: 8px Roboto;  background: lightsteelblue;  border: 0px;  border-radius: 8px;  pointer-events: none;}
.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    vertical-align: top;
    overflow: hidden;
}
.svg-content {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

</style>
</head>
<body>

<header class="mdc-top-app-bar">
  <div class="mdc-top-app-bar__row">
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
      <button class="mdc-top-app-bar__navigation-icon mdc-icon-button material-icons" href="#">menu</button>
      <a class="mdc-top-app-bar__title" href="https://www.webdenim.io" target="_blank" style="color: inherit;">Demo</a>
    </section>
  </div>
</header>

<div class="app-drawer-layout mdc-top-app-bar--fixed-adjust">

  <aside class="mdc-drawer mdc-drawer--dismissible demo-drawer">
    <nav class="mdc-drawer__drawer">
      <nav class="mdc-drawer__content">
        <div id="icon-with-text-demo" class="mdc-list">
          <a class="mdc-list-item mdc-list-item--selected demo-drawer-list-item"  id='g0' ><i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Graph1</a>
          <a class="mdc-list-item demo-drawer-list-item" id='g1' ><i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Graph2</a>
          <a class="mdc-list-item demo-drawer-list-item" id='g2' ><i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>Graph3</a>
          <a class="mdc-list-item demo-drawer-list-item" id='g3' ><i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>Graph4</a>
          <a class="mdc-list-item demo-drawer-list-item" id='g4' ><i class="material-icons mdc-list-item__graphic" aria-hidden="true">email</i>Graph5</a>
          <a class="mdc-list-item demo-drawer-list-item" id='g5' ><i class="material-icons mdc-list-item__graphic" aria-hidden="true">delete</i>Graph6</a>
          <a class="mdc-list-item demo-drawer-list-item" id='g6' ><i class="material-icons mdc-list-item__graphic" aria-hidden="true">report</i>Graph7</a>

        <hr class="mdc-list-divider">
          <a class="mdc-list-item demo-drawer-list-item" id='reset' ><i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Reset</a>
          <a class="mdc-list-item demo-drawer-list-item" id='up'    ><i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>Up</a>
          <a class="mdc-list-item demo-drawer-list-item" id='down'  ><i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>Down</a>
          <a class="mdc-list-item demo-drawer-list-item" id='left'  ><i class="material-icons mdc-list-item__graphic" aria-hidden="true">email</i>Left</a>
          <a class="mdc-list-item demo-drawer-list-item" id='right' ><i class="material-icons mdc-list-item__graphic" aria-hidden="true">delete</i>Right</a>
          <a class="mdc-list-item demo-drawer-list-item" id='rever' ><i class="material-icons mdc-list-item__graphic" aria-hidden="true">report</i>Reverse</a>
   </div>    
      </nav>
    </nav>
  </aside>

    <main class="mdc-drawer-app-content main-content ">
      <div id="main" style =" resize: both; position: relative; width:620px; height:620px; overflow: hidden;  border-radius: 4px; background-color: #ffffff ; padding: 10px; box-shadow: 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12), 0 5px 5px -3px rgba(0,0,0,.2); " >
     </main>   
</div>

</body>

<script>

const drawer     = new mdc.drawer.MDCDrawer.attachTo( document.querySelector('.mdc-drawer'));
const topAppBar  = new mdc.topAppBar.MDCTopAppBar.attachTo( document.querySelector('.mdc-top-app-bar'));

topAppBar.setScrollTarget(document.querySelector('.main-content')) 
topAppBar.listen('MDCTopAppBar:nav', () => drawer.open = !drawer.open) 
document.oncontextmenu  = ()=> false
</script>
</body>
</html>

abhiomkar commented 4 years ago

Thanks for the suggestion. We're are considering to add working demo in all component pages.

We're currently testing with code generator tools that produces snippets based on component variant - See https://material-components.github.io/material-components-web-catalog/#/component/button for example.

Also see our screenshot test pages for more examples https://github.com/material-components/material-components-web/tree/master/test/screenshot/spec for all components.

velociwabbit commented 4 years ago

I have just finished an app that has removed material.js and uses a subset of the material.css to do most of the formatting. It solves all of the issues i outlined in various emails.

The only downside to it is that it is web only and dependent upon about 100 lines of javascript.

I am willing to make it open source if I receive any feedback that others might want to also use it.

Splaktar commented 3 years ago

It would also be nice to have the demos be based on the latest release. I'm not aware of any place on the internet where I can test the components from the latest release (i.e. for a11y). It's not clear what version the site linked in https://github.com/material-components/material-components-web/issues/5023#issuecomment-528446581 is using, but it looks like it might be a couple of years old.

material-components / material-components-web

Demo source code #5023