Documentation

Iframe

Iframe is exactly what it sounds like. An iframe that is placed in the same view as a code editor.

Iframes are needed and used to display examples of components that typically claim the entire screen area. Such as dialogues, toasters, drawers and more.

It has the same appearance as the code editor, with an items menu at the top where you can switch between examples that are then run in an iframe.

Code examples

This is an example of the implementation for Loader.

// Import Iframe component
import Iframe from '@components/iframe';

// Use it and pass tabs array with label and path to example that should run in the iFrame.
<Iframe tabs={[
  {label: 'Default', path: '/components/loader/code/examples/default'},
  {label: 'Inverted', path: '/components/loader/code/examples/inverted'}
]}></Iframe>



// This is what the default.js example looks like
import { Button, Loader} from 'trinidad-ui';
import { useEffect, useState } from 'react';
import styles from '@styles/pages/iframe.module.css';
import {Typography} from '@components/typography';

export default function Default() {
  const [isSSR, setIsSSR] = useState(true);
  const loaderDefault = new Loader('.js-loader-examples-default');
  const [activeLoader, setActiveLoader] = useState(false);

  useEffect(()=> {
    setIsSSR(false);
  }, [isSSR]);

  const handleLoaders = (size) => {
    loaderDefault.show(size);
    setActiveLoader(true);
    setTimeout(() => {
      loaderDefault.hide();
      setActiveLoader(false);
    }, 3000);
  };
  const fullScreenLoader = () => {
    const loader = new Loader();
    loader.show();
    setTimeout(() => {
      loader.hide();
    }, 3000)
  }

  return (
    <>
      {
        !isSSR &&
        <div className={`${styles.loaderWrapper} ${styles.darkMode}`}>
          <Typography component='h1' variant='subtitle200' inverted noMarginTop noAnchor>Loader examples</Typography>
          <Typography inverted>Click to display a default loader for 3 seconds.</Typography>
          <div className={styles.flex}>
            <Button className='js-contextual-example-1' disabled={activeLoader} onClick={() => handleLoaders(100)}>Small</Button>
            <Button className='js-contextual-example-1' disabled={activeLoader} onClick={() => handleLoaders(200)}>Medium</Button>
            <Button className='js-contextual-example-1' disabled={activeLoader} onClick={() => handleLoaders(300)}>Large</Button>
          </div>
          <div className={styles.darkMode}>
            <div className='js-loader-examples-default'></div>
          </div>
        </div>
      }
    </>
  );
}

Default.getLayout = function getLayout(page) {return (page)}

Props table

Prop name	Type	Default Value	Description
path	string		Pass a path if no tabs is used.
tabs	array		Array with path and label where the path should point to example code.