Components
This is a
I use them on this site.
<goto-top>
params
- attr: threshold
- Threshold for display. default: 100
- --height
- Button Height. default: 3rem
- --width
- Button Width. default: 3rem
- --position-padding-base
- Position from bottom right. default: 1rem
- --position-padding-bottom
- --position-padding-base added to the position from the bottom. default: 0
- --position-padding-right
- --position-padding-base added to the position from the right. default: 0
- text
- displayed button. default: ▲
usage
<goto-top threshold="200"></goto-top>
- threshold
- 200
now, display bottom right.
debug
change threshold, and scroll again.
window.scrollY
for debug
<goto-top>
<goto-top>
<octicons-link-external>
params
nothing
usage
<octicons-link-external></octicons-link-external>
before text
after text
<p style="color: steelblue">
<octicons-link-external></octicons-link-external>
</p>
before text
after text
<external-link>
params
- attr: href
- target link. set to href attribute of <a> tag.
- text
- option. if nothig, attr: href value is displayed instead.
usage
<external-link></external-link>
- href
- none
- text
- none
display nothing
<external-link href></external-link>
- href
- attribute only, but attr value is not set
- text
- none
display nothing
<external-link href=""></external-link>
- href
- attribute only, but attr value is blank
- text
- none
display nothing
<external-link href="https://example.com"></external-link>
- href
- valued
- text
- none
<external-link href="https://example.com">hello world</external-link>
- href
- valued
- text
- valued
hello world
<external-link>hello world</external-link>
- href
- none
- text
- valued
hello world
displayed, but that is not linked.
<external-link href="https://example.com"> </external-link>
- href
- valued
- text
- valued, but blank.
<external-link href="https://example.com">
</external-link>
- href
- valued
- text
- valued, but "\n", "\r" or "\r\n".
<external-link href="https://example.com"><p></p></external-link>
- href
- valued
- text
- valued: child Element, but that's empty.
<external-link href="https://example.com" />
- href
- valued
- text
- none end tag