Does Header really need HeaderRow or HeaderTabs inside? about react-mdl HOT 4 CLOSED

This works:

<header className="mdl-layout__header is-casting-shadow">
  <IconButton name="arrow_back" className="mdl-layout-icon" />
  <HeaderRow title={title}>
    ...     
  </HeaderRow>
</header>

@tleunen Thanks for this awesome library!

from react-mdl.

You can put whatever you want inside the Drawer component. So you can add your custom header if you want instead of using the Header component. (Which doesn't seem to be the case in this mdl example anyway).

from react-mdl.

@tleunen Hey, I've got similar question. I'd like to add a back button to the header:

<header class="mdl-layout__header">
  <button class="mdl-layout-icon mdl-button mdl-js-button mdl-button--icon">
    <i class="material-icons">arrow_back</i>
  </button>    
  <div class="mdl-layout__header-row">
    <span class="mdl-layout-title">Some title</span>
    <div class="mdl-layout-spacer"></div>
  </div>
</header>

I guess it's not possible with the current Header component? I can always use plain HTML, just asking :)

from react-mdl.

Everything you put in a <Header> will be wrap inside a HeaderRow, unless it's already a row, or a tab.
So with the current implementation, you cannot achieve exactly the same thing as what you describe, but you can have something quite similar I think using this:

const customTitle = <div><IconButton name="arrow_back" /> Some title</div>;
<Header title={customTitle} />

from react-mdl.