<github-button>
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 •
🕹️ Examples
<style>
color-scheme-button {
width: 128px;
height: 128px;
--icon-color: #333;
}
</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>
🚀 Usage
- 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>
🐝 API
📒 Properties/Attributes
Name | Type | Default | Description |
---|---|---|---|
link | String | '' |
Github Absolute / Relative path to user / project |
Methods
None
Events
None
🧁 CSS Custom Properties
Name | Default | Description |
---|---|---|
--icon-color |
#000 |
SVG fill attribute |
💪 Accessibility
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" .
🔧 TODO
- [ ] Better Documentation
🧑💻 Author
@cicciosgamino |
Support
Reach out to me at one of the following places:
Donate
Donate help and contibutions!
License
GNU General Public License v3.0
Made