question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[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:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
bunnybunny3commented, Feb 26, 2021

@danranVm 已更新api

0reactions
danranVmcommented, Jul 13, 2021
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found