https://github.com/theetrain/svelte-cartesian

Cartesian Product component for Svelte
https://github.com/theetrain/svelte-cartesian

svelte svelte-component testing visual-regression-testing

Last synced: 11 days ago
JSON representation

Cartesian Product component for Svelte

• Host: GitHub
• URL: https://github.com/theetrain/svelte-cartesian
• Owner: theetrain
• License: mit
• Created: 2024-06-22T18:06:05.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-09-06T02:07:37.000Z (2 months ago)
• Last Synced: 2024-10-17T09:55:51.241Z (22 days ago)
• Topics: svelte, svelte-component, testing, visual-regression-testing
• Language: Svelte
• Homepage: https://www.npmjs.com/package/svelte-cartesian
• Size: 5.44 MB
• Stars: 9
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README-svelte-5.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Svelte 5 usage (experimental)

> [!WARNING]

> This component is based on the release candidate of Svelte 5 and is considered

> unstable. Any breaking changes will not be properly indicated in

> `svelte-cartesian` releases at this time, but there are no planned changes.

1. Install package

   ```bash

   npm install -D svelte-cartesian

   ```

2. Add component to your page.

   ```html

   

     import Button from "./Button.svelte"

     import { CartesianWithRunes as Cartesian } from "svelte-cartesian"

   

   

   {#snippet children()}

      Click me

   {/snippet}

   

   

   

   ```

3. Pass props with array of potential values, including an explicit `undefined`

   where applicable. Ensure snippets are passed in as props and defined within

   the markup of the page using ``.

### Styling ``

Styling `` is done in the exact same way as with [``](./README.md#styling-cartesian).

### `` props

| prop            | type                            | description                                                                     |

| --------------- | ------------------------------- | ------------------------------------------------------------------------------- |

| `Component`     | `ComponentType`                 | **Required**: A Svelte component.                                               |

| `props`         | `Record`         | **Required**: An object containing prop names and an array of potential values. |

| `unstyled`      | `?boolean=false`                | Disable built-in CSS.                                                           |

| `divAttributes` | `?SvelteHTMLElements["div"]={}` | Attributes to be spread onto the wrapping `
` element.                      |