Pluto

Pluto is a webcomponent library written with Svelte.

This is a Test page to showcase the different components.


Usage

Svelte Project

You can use the components directly in any of your Svelte projects and custimse them if you want.

Either clone the full repository from my GitHub Repository or copy the components that you like from the src/lib/ folder.

Components

Details

<Details summary="Text">Some more Text</Details>

Details allow to show further details for a specific topic.

Show me More

This is some more content here.

Button

<Button>Click Me</Button>

Buttons represent actions that are available to the user.

Variants

Buttons can have different variants set:

  • primary (Default)
  • neutral
  • success
  • warning
  • danger
<Button variant="success">Click Me</Button>

Progress Bar

<ProgressBar percentage=0.5 />

The ProgressBar allows to show the status of an ongoing operation, for example, loading further content.

70%

Update In Progress...

Variants

ProgressBar components can be customised in multiple diffent ways:



Hides the percentage label and only shows the progress bar.


<ProgressBar precentage=0.7 hideLabel/>

Splits the progress bar into steps number of smaller pieces.

70%


<ProgressBar precentage=0.7 steps=5/>

Shows an extra Text next to the percentage, to give the user extra information.

70%

Update In Progress...


<ProgressBar precentage=0.7 showText="Update In Progress..."/>

Checkbox

<CheckBox>Check This Out</CheckBox>

Checkboxes allow users to toggle specific values.


Radio Button

<RadioButton name="radio-group" id="1">Option</RadioButton>

Radio Buttons allow the users to select one value from a group of values.

To group radio buttons together they must have the same name.




Badges

<Badge>Primary</Badge>

Badges are used to draw attention and display statuses or counts.

Primary
Variants

Badges can have different variants set:

  • primary (Default)
  • neutral
  • success
  • warning
  • danger
<Badge variant="success">Success</Button>
Neutral
Success
Warning
Danger

Input

<Input label="Name" />
Variants

Input components can be customised in multiple diffent ways:

https://

<Input label="Website" prefix="https://" placeholder="domain.com"/>

@gmail.com

<Input label="Email" suffix="@gmail.com" placeholder="Email"/>


<Input label="Password:" labelPosition="left" inputType="password"/>

WIP (Work In Progress)

This is a list of Work In Progress components that are on the list to be added in the future: