Closed kakariko-village closed 7 years ago
Here's the component i use react-mdl tabs:
import React from 'react'; import 'react-mdl/extra/material.css'; import 'react-mdl/extra/material.js'; import 'normalize.css/normalize.css'; import 'react-mdl/extra/css/material.cyan-red.min.css'; import { Tabs, Tab } from 'react-mdl'; export default class UserTabBar extends React.Component { constructor(props) { super(props); this.state = { activeTab: 0 }; } render() { if (location.pathname.indexOf('users') > 0) { return ( <Tabs activeTab={this.state.activeTab} onChange={(tabId) => { this.setState({ activeTab: tabId }); this.context.rootCallback(tabId); }} ripple> <Tab>PROFILE</Tab> <Tab>SETTINGS</Tab> <Tab>ACTIVITY</Tab> </Tabs> ); } return null; } } UserTabBar.contextTypes = { rootCallback: React.PropTypes.func };
The tabs were rendered without ripple effect and underline effect on active tabs: http://i.imgur.com/4wcTQZs.png
Parent component of UserTabBar:
import React from 'react'; import UserTabBar from 'widget/TabBar/UserTabBar'; import { Menu, MenuItem, IconButton, Textfield } from 'react-mdl'; import styles from './Header.scss'; export default class StickyHeader extends React.Component { render() { return ( <div className={styles.header}> <h1> Home </h1> <div className={styles.headerRightContent}> <Textfield onChange={() => { console.log(document.getElementById('textfield-Search').value); }} label='Search' expandable expandableIcon='search' style={{ color: 'white', paddingTop: 15, paddingRight: 5 }} /> <IconButton ripple name='more_vert' id='demo-menu-lower-right' style={{ color: 'white' }} /> <Menu target='demo-menu-lower-right' align='right'> <MenuItem>Log Out</MenuItem> <MenuItem>Account</MenuItem> <MenuItem>Sign Out</MenuItem> </Menu> </div> <UserTabBar /> </div> ); } }
Also seeing issue in CodePen example
That's a duplicate of #415 and #394 that should be fixed in 1.8.0 .
Thanks @DirtyHairy :)
Here's the component i use react-mdl tabs:
The tabs were rendered without ripple effect and underline effect on active tabs: http://i.imgur.com/4wcTQZs.png
Parent component of UserTabBar: