Nascent Plasticine Materialist

    @beeanco/svelte-bulma
    TypeScript icon, indicating that this package has built-in type declarations

    0.14.5 • Public • Published

    @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

    Keywords

    none

    Install

    npm i @beeanco/svelte-bulma

    DownloadsWeekly Downloads

    10

    Version

    0.14.5

    License

    MIT

    Unpacked Size

    356 kB

    Total Files

    169

    Last publish

    Collaborators

    • lhechenberger