https://github.com/kwangure/strawberry

🍓 A set of Svelte components
https://github.com/kwangure/strawberry

svelte svelte-component svelte-components sveltejs

Last synced: 24 days ago
JSON representation

🍓 A set of Svelte components

• Host: GitHub
• URL: https://github.com/kwangure/strawberry
• Owner: kwangure
• License: apache-2.0
• Created: 2019-08-21T21:40:45.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-06-25T16:37:16.000Z (over 1 year ago)
• Last Synced: 2024-10-01T15:48:43.070Z (about 1 month ago)
• Topics: svelte, svelte-component, svelte-components, sveltejs
• Language: Svelte
• Homepage: https://kwangure-strawberry.vercel.app
• Size: 8.88 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# Strawberry

Svelte utils and components.

## Installation

```bash

npm i @kwangure/strawberry

```

## General usage

### Button

```html

	import '@kwangure/strawberry/css/button.css';

	let count = 0;

 count++}>

	Increment Counter: {count}

```

### Code

```html

	import { javascript } from '@kwangure/strawberry/code';

	const code = 'const five = 5;\nconst thirty = five * 6';



	{#each javascript(code) as { segment, color }}

		{segment}

	{/each}



```

### Dialog

```html

	import { Dialog } from '@kwangure/strawberry/default/dialog';

	/** @type {false | 'modal' | 'non-modal'} */

	let open;

	Nice to meet you

	 open = false}>👋 Bye!

 open = 'modal'}>Show

 open = 'non-modal'}>Show modal

```

### Dropdown

```html

    import { Dropdown, Popup } from '@kwangure/strawberry/default/dropdown';

	

		Click for dropdown

	

	

		
Purple

		
Penguin

		
Has

		
Landed

	


```

### Element

```html

    import { Element } from '@kwangure/strawberry/default/element';

    const element = {

    	type: 'p',

    	props: {

    		style: 'font-style: italic; color: red;',

    	},

    	children: ['I am a dynamically generated red <p/> tag element.'],

    };

```

### Inputs

```html

	import { Container } from '@kwangure/strawberry/default/input/container';

	

		This is the input label

	

	

	

		Pick a pizza toping.

	

	

		Pineapple

		Pepperoni

		Peppers

	

```

### Switch

```html

    import { Switch } from '$lib/default/switch';

    let checked = true;

 {checked ? '': 'un'}checked

```

## License

[Apache 2.0](./LICENSE) © Kafungo Wangure