Looking for SASS-based d2l-button
? It's over here.
A series of Polymer-based web components for D2L buttons.
For further information on this and other D2L UI components, see the docs at ui.valence.d2l.com.
d2l-button
can be installed from Bower:
bower install d2l-button
Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import d2l-button.html
:
<head>
<script src="https://s.brightspace.com/lib/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
<link rel="import" href="../d2l-button/d2l-button.html">
</head>
The native <button>
element can now be extended to be a d2l-button
:
<button is="d2l-button">Button Element</button>
Buttons can be made primary:
<button is="d2l-button" primary>Primary Button</button>
And can be disabled:
<button is="d2l-button" disabled>Disabled Button</button>
Floating workflow buttons behavior can be added by using the <d2l-floating-buttons>
custom element. When the normal position of the workflow buttons is below the bottom edge of the view-port, they'll dock at the bottom edge. When the normal position becomes visible, they'll undock.
<head>
<script src="https://s.brightspace.com/lib/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
<link rel="import" href="../d2l-button/d2l-button.html">
<link rel="import" href="../d2l-button/d2l-floating-buttons.html">
</head>
Include the <d2l-floating-buttons>
container at the bottom of the page, and add your workflow button
elements:
<body>
...
<d2l-floating-buttons>
<button is="d2l-button" primary>Save</button>
<button is="d2l-button">Cancel</button>
</d2l-floating-buttons>
</body>
In production, it's recommended to use a build tool like Vulcanize to combine all your web components into a single import file. More from the Polymer Docs: Optimize for Production...
See the Best Practices & Style Guide for information on naming conventions, plus information about the EditorConfig rules used in this repo.