Neurotic Pumpkin Murderer

    svelte-body
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.6 • Public • Published

    Svelte Body

    Apply styles to the body in routes! Designed to work with Svelte Kit and Routify.

    Example REPL

    Why?

    Currently in Svelte Kit and Routify, applying styles per page to the body doesn't work. You can't use :global(body) since the style tags aren't removed and reapplied on route change. svelte-body handles that for you!

    Install

    npm i svelte-body -D
    
    # pnpm
    pnpm add svelte-body -D
    
    # yarn
    yarn add svelte-body -D

    Usage

    Just like in regular html you can apply classes with class="" and styles with style="".

    <script>
        import { Body } from 'svelte-body';
    </script>
    
    <Body class="some classes" style="color: blue" />

    Alternativley you can use a style object like so:

    <script>
        import { Body } from 'svelte-body';
    
        const style = {
            backgroundColor: 'violet',
            color: 'white',
            '--cool-css-prop': '😎'
        };
    </script>
    
    <Body {style} />

    For Class, you can pass a combination of string, object, and array of both of these. Literally anything that can be passed to class.

    <script>
      import { classList } from 'svelte-body';
    
      let isBlue = true;
    </script>
    
    <Body class="red green blue" />
    <Body class={{ red: true, blue: isBlue }} />
    <Body class={['red', isBlue && 'blue']} />
    <Body class={[ 'red', { blue: isBlue } ]} />

    Actions

    There are also svelte actions that can be used on <svelte:body />:

    • classList

      <script>
          import { classList } from 'svelte-body';
      </script>
      
      <svelte:body use:classList={"red green blue"} />
      <svelte:body use:classList={{ red: true, blue: isBlue }} />
      <svelte:body use:classList={['red', isBlue && 'blue']} />
      <svelte:body use:classList={[ 'red', { blue: isBlue } ]} />
    • style

      <script>
          import { style } from 'svelte-body';
      </script>
      
      <svelte:body use:style={"background-color: blue;"} />

      It can also take an object:

      <script>
          import { style } from 'svelte-body';
      </script>
      
      <svelte:body
          use:style="{{ backgroundColor: 'blue', '--cool-css-prop': '😎' }}"
      />

    Support

    Keywords

    none

    Install

    npm i svelte-body

    DownloadsWeekly Downloads

    432

    Version

    1.3.6

    License

    MIT

    Unpacked Size

    10.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • ghostsos