How to use @uifabric/experiments - 10 common examples

To help you get started, we’ve selected a few @uifabric/experiments examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / Shimmer / examples / Shimmer.LoadData.Example.tsx View on Github external
private _getCustomElements = (): JSX.Element => {
    return (
      <div
        // tslint:disable-next-line:jsx-ban-props
        style={{ display: 'flex' }}
      >
        <ShimmerElementsGroup
          shimmerElements={[{ type: ElemType.circle, height: 40 }, { type: ElemType.gap, widthInPixel: 16, height: 40 }]}
        />
        <ShimmerElementsGroup
          flexWrap={true}
          width={'100%'}
          shimmerElements={[
            { type: ElemType.line, widthInPercentage: 100, height: 10, verticalAlign: ElemVerticalAlign.bottom },
            { type: ElemType.line, widthInPercentage: 90, height: 8 },
            { type: ElemType.gap, widthInPercentage: 10, height: 20 }
          ]}
        />
      </div>
    );
  };
}
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / Shimmer / examples / Shimmer.CustomElements.Example.tsx View on Github external
private _getCustomElementsExampleThree = (): JSX.Element => {
    return (
      <div
        // tslint:disable-next-line:jsx-ban-props
        style={{ display: 'flex' }}
      >
        <ShimmerElementsGroup
          width={'90px'}
          shimmerElements={[{ type: ElemType.line, height: 80, widthInPixel: 80 }, { type: ElemType.gap, widthInPixel: 10, height: 80 }]}
        />
        <div
          // tslint:disable-next-line:jsx-ban-props
          style={{ display: 'flex', flexWrap: 'wrap', width: '100%' }}
        >
          <ShimmerElementsGroup
            shimmerElements={[{ type: ElemType.circle, height: 40 }, { type: ElemType.gap, widthInPixel: 10, height: 40 }]}
          />
          <ShimmerElementsGroup
            flexWrap={true}
            width={'calc(100% - 50px)'}
            shimmerElements={[
              { type: ElemType.line, widthInPercentage: 90, height: 10 },
              { type: ElemType.gap, widthInPercentage: 10, height: 20 },
              { type: ElemType.line, widthInPercentage: 100, height: 10 }
            ]}
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / Shimmer / examples / Shimmer.CustomElements.Example.tsx View on Github external
private _getCustomElementsExampleOne = (): JSX.Element => {
    return (
      <div
        // tslint:disable-next-line:jsx-ban-props
        style={{ display: 'flex' }}
      >
        <ShimmerElementsGroup
          shimmerElements={[{ type: ElemType.line, widthInPixel: 40, height: 40 }, { type: ElemType.gap, widthInPixel: 10, height: 40 }]}
        />
        <ShimmerElementsGroup
          flexWrap={true}
          shimmerElements={[
            { type: ElemType.line, widthInPixel: 300, height: 10 },
            { type: ElemType.line, widthInPixel: 200, height: 10 },
            { type: ElemType.gap, widthInPixel: 100, height: 20 }
          ]}
        />
      </div>
    );
  };
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / Shimmer / examples / Shimmer.LoadData.Example.tsx View on Github external
private _getCustomElements = (): JSX.Element => {
    return (
      <div
        // tslint:disable-next-line:jsx-ban-props
        style={{ display: 'flex' }}
      >
        <ShimmerElementsGroup
          shimmerElements={[{ type: ElemType.circle, height: 40 }, { type: ElemType.gap, widthInPixel: 16, height: 40 }]}
        />
        <ShimmerElementsGroup
          flexWrap={true}
          width={'100%'}
          shimmerElements={[
            { type: ElemType.line, widthInPercentage: 100, height: 10, verticalAlign: ElemVerticalAlign.bottom },
            { type: ElemType.line, widthInPercentage: 90, height: 8 },
            { type: ElemType.gap, widthInPercentage: 10, height: 20 }
          ]}
        />
      </div>
    );
  };
}
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / Shimmer / examples / Shimmer.LoadData.Example.tsx View on Github external
private _getCustomElements = (): JSX.Element => {
    return (
      <div
        // tslint:disable-next-line:jsx-ban-props
        style={{ display: 'flex' }}
      >
        <ShimmerElementsGroup
          shimmerElements={[{ type: ElemType.circle, height: 40 }, { type: ElemType.gap, widthInPixel: 16, height: 40 }]}
        />
        <ShimmerElementsGroup
          flexWrap={true}
          width={'100%'}
          shimmerElements={[
            { type: ElemType.line, widthInPercentage: 100, height: 10, verticalAlign: ElemVerticalAlign.bottom },
            { type: ElemType.line, widthInPercentage: 90, height: 8 },
            { type: ElemType.gap, widthInPercentage: 10, height: 20 }
          ]}
        />
      </div>
    );
  };
}
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / Shimmer / examples / Shimmer.CustomElements.Example.tsx View on Github external
private _getCustomElementsExampleOne = (): JSX.Element => {
    return (
      <div
        // tslint:disable-next-line:jsx-ban-props
        style={{ display: 'flex' }}
      >
        <ShimmerElementsGroup
          shimmerElements={[{ type: ElemType.line, widthInPixel: 40, height: 40 }, { type: ElemType.gap, widthInPixel: 10, height: 40 }]}
        />
        <ShimmerElementsGroup
          flexWrap={true}
          shimmerElements={[
            { type: ElemType.line, widthInPixel: 300, height: 10 },
            { type: ElemType.line, widthInPixel: 200, height: 10 },
            { type: ElemType.gap, widthInPixel: 100, height: 20 }
          ]}
        />
      </div>
    );
  };
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / Shimmer / examples / Shimmer.LoadData.Example.tsx View on Github external
private _getCustomElements = (): JSX.Element => {
    return (
      <div
        // tslint:disable-next-line:jsx-ban-props
        style={{ display: 'flex' }}
      >
        <ShimmerElementsGroup
          shimmerElements={[{ type: ElemType.circle, height: 40 }, { type: ElemType.gap, widthInPixel: 16, height: 40 }]}
        />
        <ShimmerElementsGroup
          flexWrap={true}
          width={'100%'}
          shimmerElements={[
            { type: ElemType.line, widthInPercentage: 100, height: 10, verticalAlign: ElemVerticalAlign.bottom },
            { type: ElemType.line, widthInPercentage: 90, height: 8 },
            { type: ElemType.gap, widthInPercentage: 10, height: 20 }
          ]}
        />
      </div>
    );
  };
}
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / Shimmer / examples / Shimmer.CustomElements.Example.tsx View on Github external
private _getCustomElementsExampleTwo = (): JSX.Element => {
    return (
      <div
        // tslint:disable-next-line:jsx-ban-props
        style={{ display: 'flex' }}
      >
        <ShimmerElementsGroup
          shimmerElements={[{ type: ElemType.circle, height: 40 }, { type: ElemType.gap, widthInPixel: 10, height: 40 }]}
        />
        <ShimmerElementsGroup
          flexWrap={true}
          shimmerElements={[
            { type: ElemType.line, widthInPixel: 400, height: 10 },
            { type: ElemType.gap, widthInPixel: 100, height: 20 },
            { type: ElemType.line, widthInPixel: 500, height: 10 }
          ]}
        />
      </div>
    );
  };
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / Shimmer / examples / Shimmer.CustomElements.Example.tsx View on Github external
private _getCustomElementsExampleThree = (): JSX.Element => {
    return (
      <div
        // tslint:disable-next-line:jsx-ban-props
        style={{ display: 'flex' }}
      >
        <ShimmerElementsGroup
          width={'90px'}
          shimmerElements={[{ type: ElemType.line, height: 80, widthInPixel: 80 }, { type: ElemType.gap, widthInPixel: 10, height: 80 }]}
        />
        <div
          // tslint:disable-next-line:jsx-ban-props
          style={{ display: 'flex', flexWrap: 'wrap', width: '100%' }}
        >
          <ShimmerElementsGroup
            shimmerElements={[{ type: ElemType.circle, height: 40 }, { type: ElemType.gap, widthInPixel: 10, height: 40 }]}
          />
          <ShimmerElementsGroup
            flexWrap={true}
            width={'calc(100% - 50px)'}
            shimmerElements={[
              { type: ElemType.line, widthInPercentage: 90, height: 10 },
              { type: ElemType.gap, widthInPercentage: 10, height: 20 },
              { type: ElemType.line, widthInPercentage: 100, height: 10 }
            ]}
          />
          <ShimmerElementsGroup
            flexWrap={true}
            width={'100%'}
            shimmerElements={[
              { type: ElemType.line, widthInPercentage: 80, height: 10, verticalAlign: ElemVerticalAlign.bottom },
              { type: ElemType.gap, widthInPercentage: 20, height: 20 },
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / SelectedItemsList / SelectedPeopleList / examples / SelectedPeopleList.WithEdit.Example.tsx View on Github external
controlledComponent: boolean;
}

export class SelectedPeopleListWithEditExample extends React.Component<{}, IPeopleSelectedItemsListExampleState> {
  private _selectionList: ISelectedPeopleList;
  private selection: Selection = new Selection({ onSelectionChanged: () => this._onSelectionChange() });

  // Used to resolve suggestions on the editableItem
  private model = new ExampleSuggestionsModel<IPersonaProps>(people);
  private suggestionsStore = new SuggestionsStore<IPersonaProps>();

  /**
   * Build a custom selected item capable of being edited when the item is right clicked
   */
  private SelectedItem = EditableItem({
    itemComponent: TriggerOnContextMenu(SelectedPersona),
    editingItemComponent: DefaultEditingItem({
      getEditingItemText: persona => persona.text || '',
      onRenderFloatingPicker: (props: EditingItemInnerFloatingPickerProps<IPersonaProps>) => (
        <FloatingPeopleSuggestions
          {...props}
          suggestionsStore={this.suggestionsStore}
          onResolveSuggestions={this.model.resolveSuggestions}
        />
      )
    })
  });

  public render(): JSX.Element {
    return (
      <div className={'ms-BasePicker-text'}>
        Right click any persona to edit it