Añadiendo panel derecho.

src/webparts/homeDetailsList/components/HomeDetailsList.tsx

@@ -6,7 +6,9 @@ import { DetailsList, DetailsListLayoutMode, Selection, IColumn } from 'office-u
 import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
 import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
 import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
-import { PrimaryButton } from '@microsoft/office-ui-fabric-react-bundle';
+import { DefaultButton, PrimaryButton } from '@microsoft/office-ui-fabric-react-bundle';
+import { Panel, PanelType } from 'office-ui-fabric-react';
+
 
 
 const exampleChildClass = mergeStyles({
@@ -27,6 +29,7 @@ export interface IDetailsListBasicExampleState {
   items: IDetailsListBasicExampleItem[];
   selectionDetails: string;
   itemsAux: IDetailsListBasicExampleItem[];
+  showPanel: boolean;
 }
 
 export default class HomeDetailsList extends React.Component<IHomeDetailsListProps, IDetailsListBasicExampleState> {
@@ -34,7 +37,7 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro
   private _allItems: IDetailsListBasicExampleItem[];
   private _columns: IColumn[];
   
-  
+
 
   constructor(props: IHomeDetailsListProps) {
     super(props);
@@ -68,7 +71,8 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro
   
       ],
       selectionDetails: '',
-      itemsAux: []
+      itemsAux: [],
+      showPanel: false
     };
       
     this._selection = new Selection({
@@ -90,12 +94,13 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro
 
   public render(): React.ReactElement<IHomeDetailsListProps> {
     const { items, itemsAux, selectionDetails } = this.state;
-    const {disabled, checked} = this.props
+
     
     function _alertClicked(): void {
       alert('Clicked');
     }
     
+    
 
     return (
       <Fabric>
@@ -122,14 +127,55 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro
             onItemInvoked={this._onItemInvoked}
           />
           <br />
-          <PrimaryButton text="Añadir Productos" onClick={_alertClicked} allowDisabledFocus disabled={disabled} checked={checked} />
+          
           <div>
-
+          <PrimaryButton
+          secondaryText='Opens the Sample Panel'
+          onClick={ this._onShowPanel }
+          text='Open Panel'
+        />
+        <Panel
+          isOpen={ this.state.showPanel }
+          type={ PanelType.smallFixedFar }
+          onDismiss={ this._onClosePanel }
+          isFooterAtBottom={ true }
+          headerText='Panel with footer at bottom'
+          closeButtonAriaLabel='Close'
+          onRenderFooterContent={ this._onRenderFooterContent }
+        >
+          <span>Content goes here.</span>
+        </Panel>
           </div>
         </MarqueeSelection>
       </Fabric>
     );
   }
+
+  private _onShowPanel = () => {
+    this.setState({ showPanel: true });
+  }
+  private _onClosePanel = () => {
+    this.setState({ showPanel: false });
+  }
+
+  private _onRenderFooterContent = (): JSX.Element => {
+    return (
+      <div>
+        <PrimaryButton
+          onClick={ this._onClosePanel }
+          style={ { 'marginRight': '8px' } }
+        >
+          Save
+        </PrimaryButton>
+        <DefaultButton
+          onClick={ this._onClosePanel }
+        >
+          Cancel
+        </DefaultButton>
+      </div>
+    );
+  }
+
   private _getSelectionDetails(): string {
     const selectionCount = this._selection.getSelectedCount();
 

src/webparts/homeDetailsList/components/IHomeDetailsListProps.ts

 export interface IHomeDetailsListProps {
   description: string;
-  disabled?: boolean;
-  checked?: boolean;
 }