How to use the idyll-components.Float function in idyll-components

To help you get started, we’ve selected a few idyll-components 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 idyll-lang / idyll / packages / idyll-docs / idyll-components / contents.js View on Github external
{
          Fixed: {
            description:
              'Content inside of a `fixed` component will be locked in place, even when the rest of the document scrolls. The [scroll](https://idyll-lang.github.io/idyll/scroll) example uses the `fixed` component to keep the dynamic chart in place:',
            thumbnail: 'fixed.gif',
            image: 'fixed.gif',
            component: COMPONENTS.Fixed,
            liveExample: false
          }
        },
        {
          Float: {
            description:
              'Content inside of a float will use the CSS `float` attribute to float to the left or right of its parent container.',
            thumbnail: 'float.png',
            component: COMPONENTS.Float,
            liveExample: false
          }
        },
        {
          Inline: {
            thumbnail: 'inline.png',
            description:
              'The `inline` component adds the `display: inline-block` style property, so that items inside of `inline` component will be displayed next to each other. For example, this code will display three images side by side:',
            component: COMPONENTS.Inline,
            liveExample: false
          }
        },
        {
          Scroller: {
            description:
              'The `Scroller` component is used to create scroll-based presentations. See [this example](https://mathisonian.github.io/idyll/scaffolding-interactives/) for more details.',