@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>

| Name | Description | | :-------- | :---------- | | defaults | | | getConfig | |

| 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>

| 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>

| Name | Description | | :--------- | :---------- | | contextKey | |

| 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';

| Name | Description | | :--------------- | :---------- | | hasName | | | boxed | | | accept | | | multiple | | | color | | | alignment | | | size | | | placeholder | | | noSelectionLabel | | | value | |

FormField

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

| 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';

| Name | Description | | :---------- | :---------- | | name | | | type | | | placeholder | | | value | |

SubmitField

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

| Name | Description | | :---- | :---------- | | label | | | color | |

Textarea

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

| Name | Description | | :---- | :--------------------- | | value | The textfield's value. |

elements

Icon

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

Displays a v4 Ionicon as a bulma icon.

| 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';

| Name | Description | | :---- | :---------- | | color | | | size | | | max | | | value | |

Tag

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

Small tag labels to insert anywhere

| 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';

| 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>

| Name | Description | | :------ | :--------------------------- | | message | The message to display. | | color | The background color to use. |

components

Breadcrumbs

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

| 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' },
  ]}
/>

| 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} />

| 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';

| Name | Description | | :------------- | :---------- | | defaultStrings | |

| Name | Description | | :-------- | :---------- | | total | | | active | | | show | | | size | | | style | | | alignment | | | pageLink | | | strings | |

Tab

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

| Name | Description | | :------ | :---------- | | hasIcon | | | size | | | image | | | link | |

TabList

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

| 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>

| 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>

| 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';

| 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} />

| Name | Description | | :---- | :-------------------- | | items | The items to display. |

MenuItem

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

| Name | Description | | :----- | :---------- | | title | | | href | | | active | | | items | |

MenuList

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

| Name | Description | | :--- | :---------- | | item | |