Through the anchor point, you can quickly find the position of the information content on the current page.
Basic Usage
The most basic usage
The links point at this page’s own sections.
el_anchor(
"toc",
offset = 70,
links = list(
el_anchor_link("Basic Usage", "#basic-usage"),
el_anchor_link("Horizontal Mode", "#horizontal-mode"),
el_anchor_link("Scroll Container", "#scroll-container"),
el_anchor_link(
"Anchor API",
"#api",
el_anchor_link("Anchor Attributes", "#anchor-attributes"),
el_anchor_link("Anchor Events", "#anchor-events")
)
)
)Horizontal Mode
Horizontally aligned anchors
Tip
Horizontal Mode does not support
sub-linkslots
el_anchor(
"toc_h",
offset = 70,
direction = "horizontal",
links = list(
el_anchor_link("Basic Usage", "#basic-usage"),
el_anchor_link("Horizontal Mode", "#horizontal-mode"),
el_anchor_link("Scroll Container", "#scroll-container")
)
)Scroll Container
Custom scroll area, use offset props can set anchor
scroll offset, listen the link-click event and prevents
browser default behavior then it will not change history.
part <- function(id, colour) {
tags$div(
id = id,
style = sprintf("height: 300px; background: %s; margin-top: 30px", colour),
id
)
}
el_row(
el_col(
span = 18,
tags$div(
id = "anchor-scroller",
style = "height: 300px; overflow-y: auto",
part("part1", "rgba(255, 0, 0, 0.02)"),
part("part2", "rgba(0, 255, 0, 0.02)"),
part("part3", "rgba(0, 0, 255, 0.02)")
)
),
el_col(
span = 6,
el_anchor(
"toc_s",
container = "#anchor-scroller",
links = list(
el_anchor_link("part1", "#part1"),
el_anchor_link("part2", "#part2"),
el_anchor_link("part3", "#part3")
)
)
)
)part1
part2
part3
Anchor link change
Listening for anchor link change
The current link is input$<id>, as the page
scrolls.
el_anchor(
"toc_change",
offset = 70,
links = list(
el_anchor_link("Basic Usage", "#basic-usage"),
el_anchor_link("Horizontal Mode", "#horizontal-mode"),
el_anchor_link("Scroll Container", "#scroll-container")
)
)Underline type
set type="underline" change to underline type
el_anchor(
"toc_u",
type = "underline",
offset = 70,
links = list(
el_anchor_link("Basic Usage", "#basic-usage"),
el_anchor_link("Horizontal Mode", "#horizontal-mode"),
el_anchor_link("Scroll Container", "#scroll-container")
)
)Affix Mode
Use the affix component to fix the anchor point within the page.
el_affix(
offset = 60,
el_anchor(
"toc_a",
offset = 70,
width = "300px",
links = list(
el_anchor_link("Basic Usage", "#basic-usage"),
el_anchor_link("Horizontal Mode", "#horizontal-mode"),
el_anchor_link("Scroll Container", "#scroll-container")
)
)
)API
Element Plus’s tables, and beside each entry where it is in R.
Anchor Attributes
| Element | In R | Description | Type | Accepted | Default |
|---|---|---|---|---|---|
container |
container |
Scroll container. |
string \ |
HTMLElement \ |
Window |
offset |
offset |
Set the offset of the anchor scroll. | number |
0 | |
bound |
bound |
The offset of the element starting to trigger the anchor. | number |
15 | |
duration |
duration |
Set the scroll duration of the container, in milliseconds. | number |
300 | |
marker |
marker |
Whether to show the marker. | 1 | true | |
type |
type |
Set Anchor type. |
2'default' \\| 'underline'
|
default |
|
direction |
direction |
Set Anchor direction. |
3'vertical' \\| 'horizontal'
|
vertical |
|
select-scroll-top |
select_scroll_top |
Scroll whether link is selected at the top | 4 | false |
Anchor Events
| Element | In R | Description |
|---|---|---|
change |
input$<id>, the value |
Callback when the step changes |
click |
input$<id>_click |
Triggered when the user clicks on the link |
Anchor Exposes
| Element | In R | Description |
|---|---|---|
scrollTo |
call_el(session, id, "scrollTo") |
Manually scroll to the specific position. |