A Brick tabbar component.
-
Import Web Components polyfill:
<script src="bower_components/platform/platform.js"></script>
-
Import Custom Element:
<link rel="import" href="src/element.html">
-
Start using it:
<brick-tabbar></brick-tabbar>
| Attribute | Options | Default | Description |
|---|---|---|---|
target-event |
string | reveal |
The event that a tab fires on its target element when the tab is clicked. |
| Property | Type | Default | Description |
|---|---|---|---|
target-event |
string | reveal |
Corresponds to the target-event attribute. |
tabs (getter only) |
array | - | Returns a list of the <brick-tabbar-tab> elements in the <brick-tabbar>. |
| Attribute | Options | Default | Description |
|---|---|---|---|
target-event |
string | - | The event that a tab fires on its target element when the tab is clicked. If not specified a tab takes the event specified on the parent brick-tabbar. |
target |
string | - | The id of the target element of this particular tab. |
| Property | Type | Default | Description |
|---|---|---|---|
target-event |
string | reveal |
Corresponds to the target-event attribute. |
target |
string | - | Corresponds to the target attrubute. |
targetElement |
node | getter: Returns the element targeted by the specific tab. setter: Assigns the tab's targeted element. (If target is assigned using this dynamic assignment, the target-selector attribute is removed.) |
| Method | Parameters | Returns | Description |
|---|---|---|---|
select() |
- | - | Select the tab. |
| Event | Description |
|---|---|
reveal |
Whenever a brick-tabbar-tab is clicked, and target-event is not otherwise specified, a reveal event is fired on each of its target elements. It is up to the target element to respond to this event. Some Brick Elements have default responses to the reveal. |
select |
The select event is fired when the tab is explicitly selected, using its select method. |
Brick components use Stylus to generate their CSS.
This repository comes outfitted with a set of tools to ease the development process.
To get started:
-
$ npm install -g bower gulp
-
Install local dependencies:
$ npm install && bower install
While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code.
To run the development server:
- Run
gulp server - Navigate to
http:localhost:3001
To simply build and lint your code, run gulp build.
You can also push your code to GitHub Pages by running gulp deploy.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent