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

[Feature] Scrollable tabs #2861

Closed
wants to merge 9 commits into from
Closed

[Feature] Scrollable tabs #2861

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c115455
[Feature] Scrollable tabs
fredriklindell Jan 3, 2016
80fd52f
[Feature] Scrollable tabs
fredriklindell Jan 3, 2016
4a1e93c
Build and document error fixes
fredriklindell Jan 9, 2016
2c521e0
Render fix and new scollable example
fredriklindell Jan 13, 2016
ef20dbd
Fixed for timing issue when components render
fredriklindell Jan 14, 2016
a1e02e1
Rebase changes
fredriklindell Jan 30, 2016
17f948c
Changes according to comments
fredriklindell Jan 30, 2016
c5c2788
Another comment change
fredriklindell Jan 31, 2016
ea7b5cd
Tab width changes
23054082 Feb 6, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
176 changes: 176 additions & 0 deletions docs/src/app/components/pages/components/Tabs/ExampleScrollable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
import React from 'react';
import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';
import Slider from 'material-ui/lib/slider';

const styles = {
headline: {
fontSize: 24,
paddingTop: 16,
marginBottom: 12,
fontWeight: 400,
},
};

const TabsExampleScrollable = () => (
<Tabs>
<Tab label="Item One" >
<div>
<h2 style={styles.headline}>Tab One Template Example</h2>
<p>
This is an example of a tab template!
</p>
<p>
You can put any sort of HTML or react component in here. It even keeps the component state!
</p>
<Slider name="slider0" defaultValue={0.5} />
</div>
</Tab>
<Tab label="Item Two" >
<div>
<h2 style={styles.headline}>Tab Two Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Three" >
<div>
<h2 style={styles.headline}>Tab Three Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Four" >
<div>
<h2 style={styles.headline}>Tab Four Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Five" >
<div>
<h2 style={styles.headline}>Tab Five Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Six" >
<div>
<h2 style={styles.headline}>Tab Six Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Seven" >
<div>
<h2 style={styles.headline}>Tab Seven Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Eight" >
<div>
<h2 style={styles.headline}>Tab Eight Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Nine" >
<div>
<h2 style={styles.headline}>Tab Nine Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Ten" >
<div>
<h2 style={styles.headline}>Tab Ten Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Eleven" >
<div>
<h2 style={styles.headline}>Tab Eleven Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Twelve" >
<div>
<h2 style={styles.headline}>Tab Twelve Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Thirteen" >
<div>
<h2 style={styles.headline}>Tab Thirteen Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Fourteen" >
<div>
<h2 style={styles.headline}>Tab Fourteen Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Fifteen" >
<div>
<h2 style={styles.headline}>Tab Fifteen Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Sixteen" >
<div>
<h2 style={styles.headline}>Tab Sixteen Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Seventeen" >
<div>
<h2 style={styles.headline}>Tab Seventeen Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Eighteen" >
<div>
<h2 style={styles.headline}>Tab Eighteen Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
<Tab label="Item Nineteen" >
<div>
<h2 style={styles.headline}>Tab Nineteen Template Example</h2>
<p>
This is another example of a tab template!
</p>
</div>
</Tab>
</Tabs>
);

export default TabsExampleScrollable;
10 changes: 10 additions & 0 deletions docs/src/app/components/pages/components/Tabs/Page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import tabsExampleIconCode from '!raw!./ExampleIcon';
import TabsExampleIcon from './ExampleIcon';
import tabsExampleIconTextCode from '!raw!./ExampleIconText';
import TabsExampleIconText from './ExampleIconText';
import tabsExampleScrollableCode from '!raw!./ExampleScrollable';
import TabsExampleScrollable from './ExampleScrollable';
import tabsCode from '!raw!material-ui/lib/tabs/tabs';
import tabCode from '!raw!material-ui/lib/tabs/tab';

Expand All @@ -25,6 +27,7 @@ const descriptions = {
'and allowing tabs to be swiped on touch devices.',
icon: 'An example of tabs with icon.',
iconText: 'An example of tabs with icon and text.',
scrollable: 'An example of tabs with scrollable tabs.',
};

const TabsPage = () => (
Expand Down Expand Up @@ -65,6 +68,13 @@ const TabsPage = () => (
>
<TabsExampleIconText />
</CodeExample>
<CodeExample
title="Scrollable Tabs example"
description={descriptions.scrollable}
code={tabsExampleScrollableCode}
>
<TabsExampleScrollable />
</CodeExample>
<PropTypeDescription code={tabsCode} header="### Tabs Properties" />
<PropTypeDescription code={tabCode} header="### Tab Properties" />
</div>
Expand Down
7 changes: 7 additions & 0 deletions src/icon-button.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@ const IconButton = React.createClass({
*/
className: React.PropTypes.string,

/**
* Disables the icon button ripple effect.
*/
disableTouchRipple: React.PropTypes.bool,

/**
* Disables the icon button.
*/
Expand Down Expand Up @@ -133,6 +138,7 @@ const IconButton = React.createClass({
iconStyle: {},
tooltipPosition: 'bottom-center',
touch: false,
disableTouchRipple: false,
};
},

Expand Down Expand Up @@ -297,6 +303,7 @@ const IconButton = React.createClass({
ref="button"
centerRipple={true}
disabled={disabled}
disableTouchRipple={this.props.disableTouchRipple}
style={this.mergeStyles(styles.root, this.props.style)}
onBlur={this._handleBlur}
onFocus={this._handleFocus}
Expand Down
16 changes: 9 additions & 7 deletions src/ink-bar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import React from 'react';
import Transitions from './styles/transitions';
import StylePropable from './mixins/style-propable';
import getMuiTheme from './styles/getMuiTheme';

const InkBar = React.createClass({

propTypes: {
color: React.PropTypes.string,
left: React.PropTypes.string.isRequired,
left: React.PropTypes.number.isRequired,
moveBarLeft: React.PropTypes.bool.isRequired,
right: React.PropTypes.number.isRequired,

/**
* Override the inline-styles of the root element.
*/
style: React.PropTypes.object,
width: React.PropTypes.string.isRequired,
},

contextTypes: {
Expand Down Expand Up @@ -52,22 +52,24 @@ const InkBar = React.createClass({
let {
color,
left,
width,
right,
moveBarLeft,
style,
...other,
} = this.props;

let colorStyle = color ? {backgroundColor: color} : undefined;
let styles = this.mergeStyles({
left: left,
width: width,
right: right,
bottom: 0,
display: 'block',
backgroundColor: this.state.muiTheme.inkBar.backgroundColor,
height: 2,
marginTop: -2,
position: 'relative',
transition: Transitions.easeOut('1s', 'left'),
position: 'absolute',
transition: `left ${moveBarLeft ? '0.125' : '0.25'}s cubic-bezier(.35,0,.25,1),
right ${moveBarLeft ? '0.25' : '0.125'}s cubic-bezier(.35,0,.25,1)`,
}, this.props.style, colorStyle);

return (
Expand Down
20 changes: 12 additions & 8 deletions src/mixins/style-resizable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import Events from '../utils/events';

const Widths = {
LARGE_DEVICE_MINIMUM: 992,
MEDIUM_DEVICE_MINIMUM: 786,
};

const Sizes = {
SMALL: 1,
MEDIUM: 2,
Expand Down Expand Up @@ -31,16 +36,15 @@ export default {
return this.state.deviceSize >= desiredSize;
},

_updateDeviceSize() {
getDeviceSize() {
const width = window.innerWidth;
if (width >= Widths.LARGE_DEVICE_MINIMUM) return Sizes.LARGE;
if (width >= Widths.MEDIUM_DEVICE_MINIMUM) return Sizes.MEDIUM;
return Sizes.SMALL; // width < 768
},

if (width >= 992) {
this.setState({deviceSize: Sizes.LARGE});
} else if (width >= 768) {
this.setState({deviceSize: Sizes.MEDIUM});
} else { // width < 768
this.setState({deviceSize: Sizes.SMALL});
}
_updateDeviceSize() {
this.setState({deviceSize: this.getDeviceSize()});
},

_bindResize() {
Expand Down
Loading