Simple github button that can be use only to link github, users, projects and other stuff. Active only on https://github.com domain. With the link attribute you can set the path into the github.com world you want link to. Best use case to link the open-source project is inserted to.
examples • usage • api • accessibility • todo •
<style>
color-scheme-button {
width: 128px;
height: 128px;
--icon-color: #333;
--background-color: red;
}
</style>
<!-- Relative link -->
<github-button
link="CICCIOSGAMINO/github-button.git">
</github-button>
<!-- Absolute link -->
<github-button
link="https://github.com/CICCIOSGAMINO/github-button.git">
</github-button>
<!-- Open in new window (default is 'current') -->
<github-button
link="CICCIOSGAMINO/github-button.git"
target-window="new">
</github-button>
- Install package
npm install --save @cicciosgamino/github-button
- Import
<!-- Import Js Module -->
<script type="module">
// Importing this module registers <progress-ring> as an element that you
// can use in this page.
//
// Note this import is a bare module specifier, so it must be converted
// to a path using a server such as @web/dev-server.
import '@cicciosgamino/github-button'
</script>
- Place in your HTML
<github-button
link="https://github.com/CICCIOSGAMINO/github-button.git">
</github-button>
Attribute | Property | Type | Default | Description |
---|---|---|---|---|
link | link | String | '' |
Github Absolute / Relative path to user / project |
target-window | targetWindow | String | 'current' |
Open |
None
None
Name | Default | Description |
---|---|---|
--icon-color |
#000 |
SVG fill attribute |
--background-color |
transparent |
Background color of element |
Acessibility is guaranted with the use of a button with the title and aria-label set on it. SVG icons inside the inner button are set role=img,aria-hidden="true",focusable="false" .
- Better Documentation
@cicciosgamino |
Reach out to me at one of the following places:
Donate help and contibutions!
GNU General Public License v3.0
Made 🧑💻 by @cicciosgamino