[comp: anchor] add anchor component
See original GitHub issue- I have searched the issues of this repository and believe that this is not a duplicate.
What problem does this feature solve?
用于跳转到页面指定位置。
What does the proposed API look like?
- 可设置是否是固定模式。即是否将其固定在可视范围
- 可设置固定模式下是否显示小圆点
- 可指定滚动容器,默认window
- 可设置距离窗口顶部达到指定偏移量(offsetTop)后触发其高亮
- 可设置锚点滚动偏移量,默认同offsetTop
例子
<ix-anchor>
<ix-link href="#example" title="example" />
<ix-link href="#api" title="api">
<ix-link href="#props" title="props" />
<ix-link href="#emit" title="emit" />
</ix-link>
</ix-anchor>
API
ix-anchor
Props
名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
---|---|---|---|---|---|
affix |
是否是固定模式 | boolean | true |
- | - |
showInkInFixed |
固定模式是否显示小圆点 | boolean | false |
✅ | - |
target |
指定滚动的容器 | string|HTMLElement | window |
- | - |
offsetTop |
距离窗口顶部达到指定偏移量后触发激活 | number | - | - | - |
targetOffset |
锚点滚动偏移量,默认与 offsetTop 相同 | number | - | - | - |
Emits
名称 | 说明 | 参数 |
---|---|---|
click |
锚点元素点击事件 | e: Event, link: Object |
change |
监听锚点链接改变 | activeLink: string |
ix-link
Props
除以下表格外还支持原生
a
元素的所有属性。
名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
---|---|---|---|---|---|
href |
锚点链接 | string |
- | - | - |
title |
文字内容 | string |
- | - | - |
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:6 (5 by maintainers)
Top Results From Across the Web
How to Create an Anchor (Jump) Link
An anchor is a piece of HTML code that is used as a bookmark to create a link to a particular section within...
Read more >HTML Anchors: Here's How To Create Links For Fast ...
Learn how to create HTML hyperlinks. This guide covers the anchor element and all of it's attributes.
Read more >How to Add an Anchor Link to Jump to a Specific Part of a Page
Learn how to create an anchor link to jump to a specific section of a page, and how to link to the anchor...
Read more >Insert an Anchor Link - CT.gov
Inserting an anchor link requires two parts: creating the anchor and linking to the anchor. This is done through the Rich Text Editor....
Read more >CMS Basics: Using Link Anchors - University of Houston
Enter the ID (name) you want for the Anchor. Anchor IDs should not contain spaces, and should be unique within the page. You...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@danranVm 已更新api
#279