This is a collection of Svelte components, primarily useful for Wordpress admin pages.
Usage
<script>
import {Button} from 'svelte-wordpress-components';
function handleClick() {alert('Clicked!');}</script><Buttonon:click={handleClick}primary={true}href="/">Clickme!</Button>
Missing a component? Ask for it, or send me a pull request.
Alert
<script>
import {Alert} from 'svelte-wordpress-components';
</script><Alerttype="success">Success!</Alert>
Props
Name
Type
Default
Description
type
string
'info'
The type of alert. Can be 'info', 'success', 'warning', or 'error'.
dismissible
boolean
false
Whether the alert can be dismissed.
display_icon
boolean
true
Whether to display an icon.
class
string
null
The classes of the alert.
Button
<script>
import {Button} from 'svelte-wordpress-components';
</script><Buttonprimary={true}href="/">Clickme!</Button>
Props
Name
Type
Default
Description
primary
boolean
false
Whether the button is a primary button.
title
string
null
The title of the link.
type
string
'button'
The type of button. Can be 'button', 'submit', or 'reset'.
id
string
null
The ID of the button.
class
string
'button'
The classes of the button.
disabled
boolean
false
Whether the button is disabled.
aria_label
string
null
The aria-label of the button.
aria_hidden
boolean
false
Whether the button is aria-hidden.
large
boolean
false
Whether the button is large.
small
boolean
false
Whether the button is small.
warning
boolean
false
Whether the button is a warning button.
danger
boolean
false
Whether the button is a danger button.
link
boolean
false
Whether the button is a link.
FormInput
<script>
import {FormInput} from 'svelte-wordpress-components';
</script><FormInputlabel="Name"name="name"value="John Doe"/>
Props
Name
Type
Default
Description
id
string
null
The ID of the input.
name
string
null
The name of the input.
label
string
null
The label of the input.
type
string
'text'
The type of input. Can be 'text', 'email', 'password', 'number', 'url', 'tel', 'date', 'time', 'datetime-local', 'month', 'week', 'color', 'checkbox', 'radio', 'textarea', 'select', 'file', or 'hidden'.
value
string
null
The value of the input.
values
array
[]
The values of radio and checkbox input.
description
string
null
A description of the input that will display below the input.
class
string
null
The classes of the alert.
placeholder
string
null
The placeholder of the input.
required
boolean
false
Whether the input is required.
readonly
boolean
false
Whether the input is readonly.
disabled
boolean
false
Whether the input is disabled.
options
array
[]
The options of a checkbox, radio or select input.
multiple
boolean
false
Whether a select input takes multiple options.
checked
boolean
false
Whether a checkbox input is checked.
min
string
null
The min of a number input.
max
string
null
The max of a number input.
step
string
null
The step of a number input.
pattern
string
null
The pattern of the input.
rows
string
null
The rows of a textarea input
cols
string
null
The cols of a textarea input.
wrap
string
null
Whether to wordwrap a textarea input.
Form Table
NOTE: Previously called Form
<script>
import {FormTable,FormInput} from 'svelte-wordpress-components';
</script><FormTable><FormInputlabel="Name"name="name"value="John Doe"/></FormTable>
Props
Name
Type
Default
Description
class
string
null
The classes of the alert.
id
string
null
The ID of the form.
ListTable
A list table creates a table similar to a WP_List_Table.