github-corner-element
A web component for the corner banner of GitHub, inspired by Tim Holman's GitHub Corners.
Browser Compatibility
It's compatible with browsers which supports
Web Component(including Custom elements
, Shadow DOM
and
HTML Template
). For modern browsers it should be fine, but
old browser may not work. Check out the compatibility on
Can I use
website.
Installations
Use npm command to install pacakge:
npm install github-corner-element
Then import it directly in your app entry to register
github-corner
element:
// register `github-corner` element in the entry file
import 'github-corner-element'
Alternatively, you can load from UNPKG CDN as well:
<!-- latest version -->
<script src="https://unpkg.com/github-corner-element"></script>
<!-- specific version -->
<script src="https://unpkg.com/github-corner-element@1.0.0"></script>
<!-- load in ES Module mode -->
<script type="module" src="https://unpkg.com/github-corner-element/dist/github-corner-element.es.js"></script>
Usage
After installation you can use it as well as a normal HTML element:
<github-corner href="https://github.com/YuskaWu/github-corner-element"></github-corner>
Attributes
In addition to the
global attributes, you can also use
the following additional attributes on
github-corner
element:
Attribute Name | Type | Default Value | Description |
---|---|---|---|
href | href attribute of anchor element | none | The URL of github page. |
size | value of width CSS property | 5rem | The width and height of github-corner element. |
placement | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-right' | The placement of github-corner element, it can be one of the four corners. |
octocat-color | value of color CSS property | white | The color of the octocat. |
banner-color | value of color CSS property | black | The color of the banner. |
wave-duration | value of animation-duration CSS property | 0.5s | The duration to wave octocat's hand. |
Checkout this page for more examples.
Styling
As normal HTML element, you can style it with class
and
style
attribute. But if you want to style elements which is
inside the shadow DOM, then you have to use
::part()
CSS pseudo-element.
There are five parts in shadow DOM that can be selected by ::part():
- anchor
- banner
- octocat
- octocat-arm
- octocat-body
You can use devtool to inspect shadow DOM and checkout the position of these parts.
Here is an example to style the parts inside shadow DOM(see live demo):
<style>
.custom-style::part(banner) {
fill: #cceb34;
stroke: #d453f5;
stroke-width: 16;
transition: fill 0.2s;
}
.custom-style:hover::part(banner) {
fill: white;
}
.custom-style::part(octocat) {
fill: #d453f5;
stroke: black;
stroke-width: 3;
}
.custom-style::part(octocat-arm) {
animation-name: wave-hand;
animation-duration: 0.2s;
animation-iteration-count: infinite
}
</style>
...
<github-corner class="custom-style"></github-corner>
NOTE: Using this way will have more specificity, styling by the attributes listed above will be overwritten.
svg slot
There is a
slot
named "svg"
, SVG element on the slot will be cloned and
append into the SVG container inside shadow DOM. If you want to add
additional SVG to draw something special, or you want to define SVG
gradients, you can use the slot to do so.
Here is an example to draw eyes on octocat(see live demo):
<github-corner>
<svg slot="svg">
<circle cx="160" cy="75" r="4" fill="black" />
<circle cx="160" cy="75" r="6" stroke="black" fill="transparent" />
<circle cx="180" cy="95" r="4" fill="black" />
<circle cx="180" cy="95" r="6" stroke="black" fill="transparent" />
</svg>
</github-corner>
NOTE: You can only put an SVG element on the slot, other elements will be ignored.
License
MIT