@beeanco/svelte-bulma

Svelte components using the bulma CSS framework

Documentation

Installation

With node.js installed, use npm to install this package:

npm install @beeanco/svelte-bulma

Components

helpers

Config

import { Config } from '@beeanco/svelte-bulma';

Updates configuration for components.

Usage

Update the transition duration

<Config transition={{ duration: 1000 }}>
  <!-- All components in here use slower transitions -->
  <Dropdown
    title="Click me"
    items={[
      { title: 'Home', href: 'https://www.beeanco.com' },
      { divider: true },
      { title: 'Shop', href: 'https://www.beeanco.com/shop' },
    ]}
  />
</Config>

Using the config in other components

<!-- MyComponent.svelte -->
<script>
  import { getConfig } from '@beeanco/svelte-bulma';

  // Returns a store that holds the current configuration
  const config = getConfig();

  // Access configuration values like this:
  $: duration = $config.transition.duration;
</script>

<strong><code>transition.duration</code> is currenty {duration}</strong>
Exports
Name Description
defaults
getConfig
Props
Name Description
transition The transition configuration to apply. Currenty only supports the property duration, which set the transition duration in milliseconds.

Single

import { Single } from '@beeanco/svelte-bulma';

Renders only the top instance. Use it if components should not be rendered twice, e.g. for modal dialogs.

Usage

Basic example

<Single>You will not see this message.</Single>

<Single>But this one!</Single>
Props
Name Description
key The key used to identify instances linked together: If two instances should not be rendered at the same time, use the same key for both.
active A flag that can be used to hide and show an instance.
anotherIsActive If another instance is active.

form

ErrorMessage

import { ErrorMessage } from '@beeanco/svelte-bulma';

Displays an error message.

Field

import { Field } from '@beeanco/svelte-bulma';

Renders a bulma form field.

Usage

Minimal example

<Field label="Name">
  <input type="input" class="input" />
</Field>

With help

<Field label="Name" help="Insert your name here">
  <input type="input" class="input" />
</Field>

With error message

<Field label="Name" help={{ type: 'danger', text: 'Insert your name here' }}>
  <input type="input" class="input" />
</Field>

Horizontal field

<Field label="Name" horizontal>
  <input type="input" class="input" />
</Field>
Exports
Name Description
contextKey
Props
Name Description
label The label text to display.
help The help text to display.
horizontal If the field should display label and control side-by-side.
placeholder The placeholder text to display.

File

import { File } from '@beeanco/svelte-bulma';
Props
Name Description
hasName
boxed
accept
multiple
color
alignment
size
placeholder
noSelectionLabel
value

FormField

import { FormField } from '@beeanco/svelte-bulma';
Props
Name Description
name The field name
label The label text to display.
help The help text to display.
horizontal If the field should display label and control side-by-side.
placeholder The placeholder text to display.
type The input type to display. Inherited from the field otherwise

Input

import { Input } from '@beeanco/svelte-bulma';
Props
Name Description
name
type
placeholder
value

SubmitField

import { SubmitField } from '@beeanco/svelte-bulma';
Props
Name Description
label
color

Textarea

import { Textarea } from '@beeanco/svelte-bulma';
Props
Name Description
value The textfield's value.

elements

Icon

import { Icon } from '@beeanco/svelte-bulma';

Displays a v4 Ionicon as a bulma icon.

Props
Name Description
size The size of the icon, can be 'small', 'medium' or 'large'
color The color to display the icon in.
icon Name of the icon to display.

Progress

import { Progress } from '@beeanco/svelte-bulma';
Props
Name Description
color
size
max
value

Tag

import { Tag } from '@beeanco/svelte-bulma';

Small tag labels to insert anywhere

Props
Name Description
size The tag's size
color The tag's color
text The tag's content. Can also be passed as the component's contents

Tags

import { Tags } from '@beeanco/svelte-bulma';
Props
Name Description
items

Notification

import { Notification } from '@beeanco/svelte-bulma';

Renders a bulma notification element.

Usage

Basic usage

<Notification message="Hello!" />

Using colors

<Notification message="Nope" color="danger" />

Using custom content

<Notification color="success">
  This is
  <strong>very nice!</strong>
</Notification>

Dynamic

<script>
  import { notify } from '@beeanco/svelte-bulma';

  function handleClick() {
    const yes = Math.random() >= 0.5;

    notify({
      // These properties are passed to the component instance
      color: yes ? 'success' : 'danger',
      message: yes ? 'Yes!' : 'No!',
    });
  }
</script>

<!--
  Once this button is clicked, a notification appears on the upper right corner of the screen
-->

<button on:click={handleClick}>Yes or no?</button>
Props
Name Description
message The message to display.
color The background color to use.

components

Breadcrumbs

import { Breadcrumbs } from '@beeanco/svelte-bulma';
Props
Name Description
items
alignment
separator
size

Dropdown

import { Dropdown } from '@beeanco/svelte-bulma';

Displays a button with a dropdown menu for the given items.

Usage

Basic usage

<Dropdown
  title="Click me"
  items={[
    { title: 'Home', href: 'https://www.beeanco.com' },
    { divider: true },
    { title: 'Shop', href: 'https://www.beeanco.com/shop' },
  ]}
/>
Props
Name Description
title The title shown in the button
items An array of items to display. These should be objects with a 'divider' property for dividers or 'href' and a 'title' properties for actual items. Optionally, you can also provide an icon class in the 'icon' property.
active If the dropdown menu is currently shown.

Message

import { Message } from '@beeanco/svelte-bulma';

Displays a message component

Usage

Basic usage

<Message message="My message" />

Providing custom message content

<Message>
  You can use <b>any</b> content here...
</Message>

Adding a title

<Message title="My title" message="My message" />

Styles

<Message message="My message" color="danger" />

Dismissable

<Message message="My message" dismissable />

Custom dismiss handling

<script>
  function handleDismiss() {
    console.log('Message has been dismissed');
  }
</script>

<Message message="My message" dismissable on:dismiss={handleDismiss} />
Props
Name Description
color The message color
title The message's title
message The message's content
dismissable It the message should be closable

Pagination

import { Pagination } from '@beeanco/svelte-bulma';
Exports
Name Description
defaultStrings
Props
Name Description
total
active
show
size
style
alignment
pageLink
strings

Tab

import { Tab } from '@beeanco/svelte-bulma';
Props
Name Description
hasIcon
size
image
link

TabList

import { TabList } from '@beeanco/svelte-bulma';
Props
Name Description
alignment
size
style
fullwidth

TabPanel

import { TabPanel } from '@beeanco/svelte-bulma';

Tabs

import { Tabs } from '@beeanco/svelte-bulma';

A tab view.

Usage

Basic usage

<Tabs>
  <TabList>
    <Tab>one</Tab>
    <Tab>two</Tab>
    <Tab>three</Tab>
  </TabList>

  <TabPanel>
    <h2>First panel</h2>
  </TabPanel>

  <TabPanel>
    <h2>Second panel</h2>
  </TabPanel>

  <TabPanel>
    <h2>Third panel</h2>
  </TabPanel>
</Tabs>
Exports
Name Description
TABS

Dialog

import { Dialog } from '@beeanco/svelte-bulma';

I modal component displaying a title, a message and a cancel and a okay button. Dispatches a close event with a confirmed property once the user takes action.

Usage

Minimal usage example

<script>
  import { confirm } from '@beeanco/svelte-bulma';

  async function doSomething() {
    if (await confirm({ message: 'Are you sure?' })) {
      // At this point the user clicked on 'Okay'
    }
  }
</script>
Props
Name Description
title The title to use in the modal
message The message to display
confirmText The label of the confirm button
cancelText The label of the cancel button

Modal

import { Modal } from '@beeanco/svelte-bulma';
Props
Name Description
active If the modal is active.
close The close action, to be used in bindings.

Menu

import { Menu } from '@beeanco/svelte-bulma';

Renders a bulma menu for some items.

Usage

Basic example

<script>
  import { Menu } from '@beeanco/svelte-bulma';

  const items = [
    {
      title: 'General',
      items: [
        { href: '.', title: 'Dashboard' },
        { href: 'customers', title: 'Customers' },
      ],
    },
    {
      title: 'Administration',
      items: [
        { href: 'settings', title: 'Team Settings' },
        {
          href: 'manage',
          title: 'Manage Your Team',
          active: true,
          items: [
            { href: 'manage/members', title: 'Members' },
            { href: 'manage/plugins', title: 'Plugins' },
          ],
        },
      ],
    },
  ];
</script>

<Menu {items} />
Props
Name Description
items The items to display.

MenuItem

import { MenuItem } from '@beeanco/svelte-bulma';
Props
Name Description
title
href
active
items

MenuList

import { MenuList } from '@beeanco/svelte-bulma';
Props
Name Description
item