0

svelte-bulma-components

Collection of Bulma UI components to be used in Svelte or standalone

官方網站
Github 資源庫
主要指標

Github星跟蹤圖

svelte-bulma-components

Library of UI components to be used in Svelte.js or standalone.

A convenient way to implement interactive Bulma components.

Available components

  • Dropdown
  • Modal
  • ModalCard
  • Navbar
  • Pagination
  • Tabs

Demo at http://svelte-bulma-components.surge.sh/

Install

npm install svelte-bulma-components

Use

Import the components you need in your Svelte project.

import {
  Dropdown,
  DropdownLink,
  Modal
} from 'svelte-bulma-components/module'

export default {
  components: {
    Dropdown,
    DropdownLink,
    Modal,
	...
  }
}

And then use them like so:

  <Dropdown label="Dropdown">
    <DropdownLink href="/">A dropdown link</DropdownLink>
    <DropdownLink href="/" active>This link is active</DropdownLink>
    <DropdownLink href="/">Another link item</DropdownLink>
  </Dropdown>

Don't forget to include the Bulma and Font Awesome CSS files!

For including styles, you can either place the below styles in the <head> of your template:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Or you can import them to your webpack/rollup entry point:

require('/path/to/node_modules/bulma/css/bulma.min.css')
require('/path/to/node_modules/font-awesome/css/font-awesome.min.css')

Note that you'll have to install bulma and font-awesome first

An interactive dropdown menu for discoverable content.
DropdownLink elements emit an onclick event with the value of the href attribute.

Markup

<Dropdown label="Dropdown">
  <DropdownItem><h5>Dropdown Item</h5>Not clickable</DropdownItem>
  <DropdownDivider />
  <DropdownLink href="/" on:click="logEvent(event)">A dropdown link</DropdownLink>
  <DropdownLink href="/" active>This link is active</DropdownLink>
  <DropdownLink href="/">Another link item</DropdownLink>
</Dropdown>

Options, Prop, Type, Default, Required, Description, ------, ------, ---------, ----------, -------------, label, String, '', true, text of dropdown label, hoverable, Boolean, false, false, open menu on hover instead of click, up, Boolean, false, false, popup instead of down, right, Boolean, false, false, align right

A classic modal overlay, in which you can include any content you want

Markup

<Modal {active} on:close="set({ active: false })">
  <p>
    ...
  </p>
</Modal>

ModalCard

A modal card, with a head, a body and a foot. This components emits an onclose event when closed with success or cancel as value.

Markup

<ModalCard {active} color="link" on:close="cardClosed(event)">
  <span slot="title">Modal card title</span>
  <span slot="content">
    ...
  </span>
  <span slot="success">Save changes</span>
  <span slot="cancel">Cancel</span>            
</ModalCard>

Options, Prop, Type, Default, Required, Description, ------, ------, ---------, ----------, -------------, color, String, success, false, color of the success button

Slots, Slot, Default, Required, Description, ------, ---------, ----------, -------------, title, -, true, title of the modal dialog, content, -, true, the content of the modal, success, Submit, false, label of the success button, cancel, Cancel, false, label of the cancel button

A responsive horizontal navbar that can support images, links, buttons, and dropdowns

Markup

<Navbar>
  <!-- navbar-brand -->
  <span slot="brand">
    <NavbarItem href="#">
      <img src="/images/brand-logo.png" alt="Logo">
    </NavbarItem>
  </span>

  <!-- navbar-start -->
  <NavbarStart>
    <NavbarItem href="#">Documentation</NavbarItem>
    <NavbarItem href="#">Videos</NavbarItem>
    <NavbarItem href="#">...</NavbarItem>
  </NavbarStart>

  <!-- navbar-end -->
  <NavbarEnd>
    <NavbarItem>
      <p class="control">
        <a class="button is-info" href="#">
          <strong>Download</strong>
        </a>
      </p>
    </NavbarItem>
  </NavbarEnd>
</Navbar>

Options, Prop, Type, Default, Required, Description, ------, ------, ---------, ----------, -------------, fixedTop, Boolean, false, false, fixes navbar to top of page, fixedBottom, Boolean, false, false, fixes navbar to bottom, color, String, -, false, background color of the navbar, transparent, Boolean, false, false, sets navbar transparency, noBodyClass, Boolean, false, false, do not add classes to <body>

Pagination

A responsive, usable, and flexible pagination component.

The pagination component emits an onchange event with the selected page number.

Markup

<Pagination current="10" total="20" show="5" on:change="gotoPage(event)" />

Options, Prop, Type, Default, Required, Description, ------, ------, ---------, ----------, -------------, current, Number, 1, false, the currently active page number, total, Number, -, true, total number of pages, show, Number, 5, false, how many page link buttons to show, transparent, Boolean, false, false, sets navbar transparency, align, String, -, false, align centered or right, rounded, Boolean, false, false, rounded buttons, size, String, -, false, sets size of pagination component, previous, String, Previous, false, set label text for previous button, next, String, Next page, false, set label text for next button

Tabs

Simple responsive horizontal navigation tabs, with different styles.

Tab items emit an onclick event with the #id of the selected tab.

Markup

<TabsContainer align="centered" boxed>
  <TabItem active label="Pictures" icon="fa fa-image" on:click="setTab(event)" />
  <TabItem label="Music" on:click="setTab(event)" />
  <TabItem label="Videos" on:click="setTab(event)" />
  <TabItem label="Documents" on:click="setTab(event)" />
</TabsContainer>

Options, Prop, Type, Default, Required, Description, ------, ------, ---------, ----------, -------------, align, String, -, false, align centered or right, boxed, Boolean, false, false, classical, boxed tabs, size, String, -, false, sets size of pagination component, toggle, Boolean, false, false, toggle button like tabs, rounded, Boolean, false, false, rounded, can be used with toggle, fullWidth, Boolean, false, false, consume whole width available

Slots, Slot, Default, Required, Description, ------, ---------, ----------, -------------, default, -, true, set of <TabItem> tabs

Custom classes (new in 0.1.4)

You can now easily add custom classes to the components by adding a regular class attribute:

<Dropdown label="My dropdown" class="my-custom-class">

NOTE: because Svelte component CSS is scoped, you'll have to add the global modifier to your CSS selectors:

:global(.my-custom-class) {
  ...
}

Made with Svelte

It's made with Svelte, which means you don't need any JS framework. Just use the file in the dist directory in any Javascript project.

See also

Reference

主要指標

概覽
名稱與所有者elcobvg/svelte-bulma-components
主編程語言HTML
編程語言JavaScript (語言數: 2)
平台
許可證MIT License
所有者活动
創建於2018-07-18 02:25:17
推送於2018-08-20 04:35:55
最后一次提交2018-08-20 11:35:16
發布數5
最新版本名稱v0.1.3 (發布於 2018-07-25 09:25:45)
第一版名稱v0.0.2 (發布於 2018-07-19 09:16:35)
用户参与
星數95
關注者數4
派生數6
提交數15
已啟用問題?
問題數2
打開的問題數1
拉請求數0
打開的拉請求數0
關閉的拉請求數0
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?