Skip to content
/ bee Public
forked from blossom/bee

Bee is a collection of lightweight interaction elements for modern web applications. It is built on top of Dart's Web UI package. It contains frequently used components like Buttons, Popovers, Overlays, Input Fields and more.

License

Notifications You must be signed in to change notification settings

ciarand/bee

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This project is deprecated and unmaintained. Proceed with caution!

Bee

Bee is a collection of lightweight interaction elements for modern web applications. It is built on top of Dart's Web UI package. It contains frequently used components like Buttons, Popovers, Overlays, Input Fields and more.

##Install

Bee is a Pub Package. To install Bee you can add it to your pubspec.yaml.

name: my-app
dependencies:
  bee: any

##Getting started

To use a component you need to import it via a link tag.

<link rel="import" href="package:bee/components/button.html">

Add the custom Bee element inside the same file where you imported the component.

<b-button>Primary</b-button>

You might want to check out the example.

##Components

###Button

<link rel="import" href="package:bee/components/button.html">
<b-button>Primary</b-button>

###Show Password

<link rel="import" href="package:bee/components/secret.html">
<b-secret placeholder="Enter your Password"></b-secret>

###Loading Indicator

<link rel="import" href="package:bee/components/loading.html">
<b-loading></b-loading>

###Popover

<link rel="import" href="package:bee/components/popover.html">
<b-popover>
    <span class="launch-area">Launch Popover</span>
    <div class="body">This is a Popover</div>
</b-popover>

###Overlay

<link rel="import" href="package:bee/components/overlay.html">
<span on-click="query('.q-example-overlay').xtag.show()" on-touch-start="query('.q-example-overlay').xtag.show()">Launch Overlay</span>
<b-overlay width="600px" class="q-example-overlay">
    <h2>Bee</h2>
    <p>Bee is a collection of lightweight interaction elements for modern web applications. It is built on top of Dart's Web UI package. It contains frequently used components like Buttons, Popovers, Overlays, Input Fields and more.</p>
</b-overlay>

Nexted Example

A button which opens an overlay on click. The overlay contains a popover. Note: Pressing 'ESC' closes popovers as well as overlays but only closes the youngest (last shown) component.

<b-button type="button" on-click="query('.q-example-nested').xtag.show()" on-touch-start="query('.q-example-nested').xtag.show()">Launch Overlay</b-button>
<b-overlay width="600px" class="q-example-nested">
    <h2>Bee</h2>
    <p>Bee is a collection of lightweight interaction elements for modern web applications. It is built on top of Dart's Web UI package. It contains frequently used components like Buttons, Popovers, Overlays, Input Fields and more.</p>
    <b-popover>
        <b-button type="button" class="launch-area">Launch Popover inside Overlay</b-button>
        <div class="body">This is a Popover</div>
    </b-popover>
    <p>Bee is a collection of lightweight interaction elements for modern web applications. It is built on top of Dart's Web UI package. It contains frequently used components like Buttons, Popovers, Overlays, Input Fields and more.</p>
</b-overlay>

##Coming Soon

This is just the initial release and we'll add a bunch of additional components, examples, documentation and polish going forward :)

  • Tests, Tests, Tests
  • Component: Tooltip
  • Component: Date Picker

About

Bee is a collection of lightweight interaction elements for modern web applications. It is built on top of Dart's Web UI package. It contains frequently used components like Buttons, Popovers, Overlays, Input Fields and more.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 56.4%
  • Dart 43.6%