Fabric Example Pen

fabric-example-pen.markdown

Fabric Example Pen

A Pen by Baker Kong_MSFT on CodePen.

License.

index.html

<script src="//unpkg.com/@fluentui/react@7/dist/fluentui-react.js"></script>
<script src="//unpkg.com/@uifabric/react-hooks@7/dist/react-hooks.js"></script>
<div id="content"></div>

script.typescript

const { DefaultButton, IButtonProps, TeachingBubble, Fabric, initializeIcons } = window.FluentUIReact;
const { useBoolean } = window.FabricReactHooks;

// Initialize icons in case this example uses them
initializeIcons();

const TeachingBubbleBasicExample: React.FunctionComponent = () => {
  const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false);
  
  const [SecteachingBubbleVisible, { toggle: SectoggleTeachingBubbleVisible }] = useBoolean(false);
  
  const examplePrimaryButtonProps: IButtonProps = React.useMemo(
    () => ({
      
      children: 'Show 2nd buble!',      
      onClick: SectoggleTeachingBubbleVisible,
    }),
    [SectoggleTeachingBubbleVisible],
  );     
        
  const exampleSecondaryButtonProps: IButtonProps = React.useMemo(
    () => ({
      children: 'Maybe later',
      onClick: toggleTeachingBubbleVisible,
    }),
    [toggleTeachingBubbleVisible],
  );

  return (
    <div>
      <DefaultButton
        id="targetButton"
        onClick={toggleTeachingBubbleVisible}
        text={teachingBubbleVisible ? 'Hide TeachingBubble' : 'Show TeachingBubble'}
      />

      {teachingBubbleVisible && (
        <TeachingBubble
          target="#targetButton"
          primaryButtonProps={examplePrimaryButtonProps}
          secondaryButtonProps={exampleSecondaryButtonProps}
          onDismiss={toggleTeachingBubbleVisible}
          headline="Discover what’s trending around you"
        >
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, nulla, ipsum? Molestiae quis aliquam magni
          harum non?
        </TeachingBubble>
      )}
      
      {SecteachingBubbleVisible && (
        <TeachingBubble
          target=".ms-TeachingBubble-primaryButton"          
          onDismiss={SectoggleTeachingBubbleVisible}
          headline="This is my Second techingbubble"
        >
          some text goes here !
        </TeachingBubble>
      )}
    </div>
  );
};

const TeachingBubbleBasicExampleWrapper = () => <Fabric><TeachingBubbleBasicExample /></Fabric>;
ReactDOM.render(<TeachingBubbleBasicExampleWrapper />, document.getElementById('content'))