How to use the @uifabric/experiments.renderTileWithLayout function in @uifabric/experiments

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 / Tile / examples / Tile.Media.Example.tsx View on Github external
const imageSize = fitContentToBounds({
    contentSize: props.originalImageSize,
    boundsSize: backgroundSize || { width: 0, height: 0 },
    mode: 'cover'
  });

  return (
    <div style="{{">
      {renderTileWithLayout(tile, {
        background: (
          <img src="{`//placehold.it/${Math.round(imageSize.width)}x${Math.round(imageSize.height)}`}">
        )
      })}
    </div>
  );
};
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / Tile / examples / Tile.Document.Example.tsx View on Github external
hideForeground={!props.showForeground}
      showForegroundFrame={true}
    /&gt;
  );

  const { foregroundSize = { width: 0, height: 0 } } = getTileLayout(tile);

  const imageSize = fitContentToBounds({
    contentSize: props.originalImageSize,
    boundsSize: foregroundSize,
    mode: 'contain'
  });

  return (
    <div>
      {renderTileWithLayout(tile, {
        foreground: (
          <img src="{`//placehold.it/${Math.round(imageSize.width)}x${Math.round(imageSize.height)}`}">
        )
      })}
    </div>
  );
};