Maximize Office Fabric UI Dialog

By : Vishnu
Source: Stackoverflow.com
Question!

I didn't find any documentation over resizing Office Fabric Ui Dialog. I need to have a button near 'close' so the Dialog box can be Maximized and resized to original place. Can anybody suggest a way for this?

By : Vishnu


Answers

There's nothing stopping you from extending Fabric components with your own CSS and JavaScript customizations from the source code on GitHub.

If there are features that you think would be helpful you can make requests here: https://trello.com/b/sPTXiMzG/office-ui-fabric-core-requests



Your <App/> needs to handle the event. You can pass a callback function as a prop to <Menu />, on a click this function is called in App. Now the App can react to the click and pass a prop to <Canvas/>.

class App extends Component {
  constructor() {
    super();
    this.state = {clicked: false};
  }

  handleClick() {
    this.setState({clicked: !this.state.clicked});
  }

  render() {
    return (
     <div>
       <OffCanvas isClicked={this.state.clicked} />
       <Menu onClick={() => this.handleClick()} />
     </div>
    );
  }
}

This is a pretty common pattern in react.

Sidenote regarding your jquery example: All you are doing in there can easily be done with "vanilla" JS, no need for jquery.

By : Scarysize


This video can help you solving your question :)
By: admin