2017-05-02 26 views
1

指定されたポイントでContextMenuを開くことができるようにします。Fabric UI:ContextualMenuの配置方法を教えてください。

targetPointIPointに設定する必要があることをAPIのドキュメント(https://dev.office.com/fabric#/components/contextualmenu)から確認できますが、実際にこれを行う方法はありません。

したがって、IPointを使用してFabric UIにコンポーネントを配置しますか?

答えて

1

OK-このAPIは、私は完全に文書化されていない見ることができますが、マウスの周りのコンテキストメニューを生成します。以下は、クリック限りです

class Preview extends React.Component { 
    constructor (props) { 
    super(props) 
    this.showContextMenu = this.showContextMenu.bind(this) 
    this.state = { showContextMenu: false } 
    } 
    showContextMenu (e, text) { 
    this.setState({ 
     showContextMenu: ((text.length > 0) ? true : false), 
     selectionText: text, 
     targetPoint: { 
     x: e.clientX, 
     y: e.clientY 
     } 
    }) 
    } 
    render() { 
    return (
     <div className='ms-font-m ms-bgColor-themeLighter' onMouseUp={(e) => this.showContextMenu(e, window.getSelection().toString())}> 
     <div> 
      { this.state.showContextMenu && <ContextualMenu useTargetPoint="true" targetPoint={this.state.targetPoint} items={[ { key: '1', name: "boo" }, { key: '2', name: "yah" }]} /> } 
     </div> 
     <p> 
      This is a really interesting paragraph, etc... 
     </p> 
     </div> 
    ) 
    } 
} 
関連する問題