Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
README.md
button.css
button.html
button.js
button.meta
screenshot-group.png
screenshot.png

README.md

Button

Button

The Button component wraps a <button>, <input type="button"> or <a> element, and exposes the standard attributes of those elements as properties, which you can use with data binding, for example.

How to use

"button": {
    "prototype": "digit/ui/button.reel",
    "properties": {
        "element": {"#": "button"}
    }
}
<button data-montage-id="button">Button</button>

Available properties

  • label - Label of the button.

Variations

  • digit-Button--glass - Turns a button into a background/border-less square.

Customizing with CSS

  • .digit-Button - The Button element
.digit-Button {
    background-color: pink;
}

ButtonGroup

ButtonGroup

The ButtonGroup component wraps multiple Buttons and groups them together.

How to use

"button-1": {
    "prototype": "digit/ui/button.reel",
    "properties": {
        "element": {"#": "button-1"}
    }
}
"button-2": {
    "prototype": "digit/ui/button.reel",
    "properties": {
        "element": {"#": "button-2"}
    }
}
"button-3": {
    "prototype": "digit/ui/button.reel",
    "properties": {
        "element": {"#": "button-3"}
    }
}
<span class="digit-ButtonGroup">
    <button data-montage-id="button-1">1</button>
    <button data-montage-id="button-2">2</button>
    <button data-montage-id="button-3">3</button>
</span>

Available properties

  • None - The ButtonGroup only adds styling

Customizing with CSS

  • .digit-ButtonGroup - The wrapper that holds multiple Buttons.
.digit-ButtonGroup {
    border-radius: 4px;
}

.digit-ButtonGroup > .digit-Button {
    background-color: pink;
}

Browser support

  • Chrome (latest)
  • Firefox (latest)
  • Opera (latest)
  • IE 10+
  • Safari 7+