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-buttonInclude 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent