Usage
Components and Utilities
All of the components and utility functions can be imported directly from bubbles-ui. The only caveat is a global css module that you'll want to import either in a global __layout.svelte file or reference in the root app.html which is imported from bubbles-ui/css/app.css.
There is a current limitation with svelte kit that the goto function from app/navigation cannot be bundled into the UI Kit. You will need to pass a reference to this function to the configStore.
Default Config
You can import a store called configStore into your initial __layout.svelte file to set some default behaviors for Bubbles. You can view the table below for all of the default options:
Performance
Bubbles is build specifically for Svelte Kit. This means that it installs as a dev dependency and will not include any components you don't use after your build step.
<script>
// __layout.svelte
// First import the global css styles
import "bubbles-ui/css/app.css";
// Import config store to update defaults
import { configStore } from "bubbles-ui";
// When you include validation for inputs bubbles can
// validate each input when the input focus is lost. The
// default for this is false
$configStore.validate_on_blur = true;
// If something is marked as required as one of the
// validation requirements you can have bubbles add a "*"
// to the end of the input label. This is better UX for
// required fields. The default for this is true
// How long to delay a toast notification before it
// automatically hides in milliseconds
$configStore.toast_delay = 5500;
// How long to show input error states until it goes
// back to it's normal form
$configStore.error_delay = 4500;
// We'll let you know if there are any issues with the
// Bubbles library
$configStore.debug = true;
// Compact will reduce padding everywhere for more information density
$configStore.padding = "roomy"; //or compact
// Blocky will reduce the radius on elements. Plays nicely with "compact" padding
$configStore.radius = "rounded"; //or blocky
// The max width for the content in pixels.
$configStore.max_content_width = 1200;
</script>