JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 37
  • Score
    100M100P100Q55955F
  • License MIT

A reusable flexbox component for Svelte

Package Exports

  • svelte-flex

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-flex) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

svelte-flex

💪 A reusable flexbox component for Svelte.


A simple and reusable flexbox component for Svelte. Has sane defaults, so you can plop it right into your app and focus on making cool stuff.

Installation

This package is available on NPM, and you can install it with npm or yarn:

npm install svelte-flex

yarn add svelte-flex

Browser/UMD

If you want to just import this library directly in the browser, you can add the following script tag:

<script src="https://unpkg.com/svelte-flex/bin/index.umd.js" />

This will expose Flex as a component in the global scope.

Usage

Import the Flex component and use it.

<script>
  import Flex from 'svelte-flex';
</script>

<Flex>
  <div>Flexbox child!</div>
  <div>Flexbox child!</div>
  <div>Flexbox child!</div>
</Flex>

Props

All props are optional (as they all have default values).

Prop Possible Values Default Value
direction 'row' | 'column' 'row'
align 'start' | 'center' | 'end' | 'stretch' 'center'
justify 'start' | 'center' | 'end' | 'around' | 'between' | 'evenly' 'center'
reverse true | false false

Check out the test suite if you're unsure what CSS styles are applied by these props.

Contributing

Feel free to file an issue or open a pull request. Ensure that you add tests for any new functionality.


👌 Built by Dave Lunny.