Merge pull request mui#2134 from oliviertassinari/app-bar

[AppBar] Add an example of a clickable title
tyfoo · Nov 12, 2015 · 9879f09 · 9879f09
2 parents c58f120 + b669d99
commit 9879f09
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/docs/src/app/components/pages/components/app-bar.jsx b/docs/src/app/components/pages/components/app-bar.jsx
@@ -11,6 +11,12 @@ const IconMenu = require('menus/icon-menu');
 const MenuItem = require('menus/menu-item');
 const MoreVertIcon = require('svg-icons/navigation/more-vert');
 
+const styles = {
+  title: {
+    cursor: 'pointer',
+  },
+};
+
 export default class AppBarPage extends React.Component {
 
   constructor(props) {
@@ -136,7 +142,7 @@ export default class AppBarPage extends React.Component {
             iconClassNameRight="muidocs-icon-navigation-expand-more" />
           <br />
           <AppBar
-            title="Title"
+            title={<span style={styles.title} onTouchTap={this._onTouchTap}>Title</span>}
             iconElementLeft={<IconButton><NavigationClose /></IconButton>}
             iconElementRight={<FlatButton label="Save" />} />
           <br />
@@ -157,4 +163,8 @@ export default class AppBarPage extends React.Component {
     );
   }
 
+  _onTouchTap() {
+    alert('onTouchTap triggered on the title component');
+  }
+
 }
diff --git a/docs/src/app/components/raw-code/app-bar-code.txt b/docs/src/app/components/raw-code/app-bar-code.txt
@@ -3,7 +3,7 @@
   iconClassNameRight="muidocs-icon-navigation-expand-more" />
 
 <AppBar
-  title="Title"
+  title={<span>Title</span>}
   iconElementLeft={<IconButton><NavigationClose /></IconButton>}
   iconElementRight={<FlatButton label="Save" />} />
 

diff --git a/src/app-bar.jsx b/src/app-bar.jsx
@@ -164,7 +164,7 @@ const AppBar = React.createClass({
       // If not, just use it as a node.
       titleElement = typeof title === 'string' || title instanceof String ?
         <h1 onTouchTap={this._onTitleTouchTap} style={this.prepareStyles(styles.title, styles.mainElement)}>{title}</h1> :
-        <div onTouchTap={this._onTitleTouchTap} style={this.prepareStyles(styles.mainElement)}>{title}</div>;
+        <div onTouchTap={this._onTitleTouchTap} style={this.prepareStyles(styles.title, styles.mainElement)}>{title}</div>;
     }
 
     if (showMenuIconButton) {