@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