@beeanco/svelte-bulma v0.14.5

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

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>

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>

File

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

FormField

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

Input

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

SubmitField

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

Textarea

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

elements

Icon

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

Displays a v4 Ionicon as a bulma icon.

Progress

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

Tag

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

Small tag labels to insert anywhere

Tags

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

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>

components

Breadcrumbs

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

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

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

Pagination

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

Tab

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

TabList

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

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>

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>

Modal

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

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

MenuItem

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

MenuList

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