org.webjars.bowergithub.brightspaceui:button
Advanced tools
A series of Polymer-based web components and Sass mixins for D2L buttons.
For further information on this and other Brightspace UI components, see the docs at ui.developers.brightspace.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="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../d2l-button/d2l-button.html">
</head>
The <d2l-button> element can be used just like the native button element, but also supports the primary attribute for denoting the primary button.
Normal button:
Primary button:
<d2l-button primary>Primary</d2l-button>
<d2l-button>Secondary</d2l-button>
<d2l-button disabled>Disabled</d2l-button>
As an alternative to the web component, a Sass mixin can be used to apply button styles to your button elements:
@import 'bower_components/d2l-button/d2l-button.scss';
.my-button {
@include d2l-button();
}
The primary and disabled attributes work the same way as they do with the web component.
<head>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../d2l-button/d2l-button-subtle.html">
</head>
The subtle button shows text with an optional icon, and can be added by using the <d2l-button-subtle> custom element. It should be used for advanced or de-emphasized actions.
text and icon as opposed to putting content in the slot to ensure that the recommended subtle button style is maintained.Without icon:
With icon:
With icon on right:
Alignment (bottom uses h-align="text")
<d2l-button-subtle text="Subtle Button"></d2l-button-subtle>
<d2l-button-subtle icon="d2l-tier1:bookmark-hollow" text="Subtle Button with Icon"></d2l-button-subtle>
<d2l-button-subtle icon="d2l-tier1:bookmark-hollow" text="Subtle Button with Right Icon" icon-right></d2l-button-subtle>
<d2l-button-subtle icon="d2l-tier1:gear" text="Disabled Button" disabled></d2l-button-subtle>
<d2l-button-subtle icon="d2l-tier1:gear" text="Text Aligned" h-align="text"></d2l-button-subtle>
As an alternative to the web component, a Sass mixin can be used to apply button styles to your button elements:
@import 'bower_components/d2l-button/d2l-button.scss';
.my-button {
@include d2l-button-subtle();
}
Usage is slightly different in that the text and icon attributes are not used, and instead their content is added within the button. For example:
<button class="my-button">
<d2l-icon icon="d2l-tier1:gear"></d2l-icon>
Subtle Button with icon
</button>
<head>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../d2l-button/d2l-button-icon.html">
</head>
The icon button shows an icon with an aria-label, and can be added by using the <d2l-button-icon> custom element. It should be used when icons perform a clickable action.
Alignment (bottom uses h-align="text")
Translucent (for use on rich/busy backgrounds, specify the translucent attribute)
<d2l-button-icon icon="d2l-tier1:bookmark-hollow" text="Bookmark"></d2l-button-icon>
<d2l-button-icon icon="d2l-tier1:gear" text="Translucent" translucent></d2l-button-icon>
<d2l-button-icon icon="d2l-tier1:gear" text="Settings (disabled)" disabled></d2l-button-icon>
<d2l-button-icon icon="d2l-tier1:gear" text="Text Aligned" h-align="text"></d2l-button-icon>
As an alternative to the web component, a Sass mixin can be used to apply button styles to your button elements:
@import 'bower_components/d2l-button/d2l-button.scss';
.my-button-icon {
@include d2l-button-icon();
}
Usage is slightly different in that the text and icon attributes are not used. Instead, the icon is added within the button and the aria-label is added as a button attribute. For example:
<button class="my-button-icon" aria-label="Settings">
<d2l-icon icon="d2l-tier1:gear"></d2l-icon>
</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="../webcomponentsjs/webcomponents-lite.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:
<d2l-floating-buttons>
<d2l-button primary>Save</d2l-button>
<d2l-button>Cancel</d2l-button>
</d2l-floating-buttons>
After cloning the repo, run npm install to install dependencies.
If you don't have it already, install the Polymer CLI globally:
npm install -g polymer-cli
To start a local web server that hosts the demo page and tests:
polymer serve
To lint (eslint and Polymer lint):
npm run lint
To run unit tests locally using Polymer test:
polymer test --skip-plugin sauce
To lint AND run local unit tests:
npm test
FAQs
WebJar for d2l-button
We found that org.webjars.bowergithub.brightspaceui:button demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.