spz-anchor 锚点

支持布局: container

何时使用

  • 当有一个滚动的长内容元素,其中可以分为多个部分提取标题时。
  • 当内容与标题需要双向交互、定位的时候。

代码演示

基本用法

最基础的用法。使用需要遵循以下规范:

  • 需要有role="anchor-links"的元素表示承载标题列表的容器。
    • data-anchor-link="锚点名称"的元素表示标题, 点击时可跳转至内容里的锚点。
  • 需要有role="anchor-scrollable-container"的滚动元素承载主体内容部分。
    • 在内容中使用data-anchor-part="锚点名称"的元素作为锚点,滚动时与标题交互。
<spz-anchor class="anchor" layout="container">
    <ul class="anchor-tabs" role="anchor-links">
      <li data-anchor-link="vendor">Vendor</li>
      <li data-anchor-link="availability">Availability</li>
      <li data-anchor-link="color">Color</li>
      <li data-anchor-link="height">Height</li>
    </ul>
    <ul class="anchor-scrollable-container" role="anchor-scrollable-container">
      <li>Somethings...</li>
      <li data-anchor-part="vendor">
        <h3 style="margin: 0 0 16px;">Vendor</h3>
        <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In, repellendus. Adipisci at, veniam libero, facilis, hic tenetur sed earum corporis provident magnam rerum laboriosam voluptate quam laborum. Sunt, quidem nihil.Lorem ipsum dolor sit, amet consectetur adipisicing elit. In, repellendus. Adipisci at, veniam libero, facilis, hic tenetur sed earum corporis provident magnam rerum laboriosam voluptate quam laborum. Sunt, quidem nihil.</div>
      </li>
      <li data-anchor-part="availability">
        <h3 style="margin: 0 0 16px;">Avaibility</h3>
        <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In, repellendus. Adipisci at, veniam libero, facilis, hic tenetur sed earum corporis provident magnam rerum laboriosam voluptate quam laborum. Sunt, quidem nihil.Lorem ipsum dolor sit, amet consectetur adipisicing elit. In, repellendus. Adipisci at, veniam libero, facilis, hic tenetur sed earum corporis provident magnam rerum laboriosam voluptate quam laborum. Sunt, quidem nihil.Lorem ipsum dolor sit, amet consectetur adipisicing elit. In, repellendus. Adipisci at, veniam libero, facilis, hic tenetur sed earum corporis provident magnam rerum laboriosam voluptate quam laborum. Sunt, quidem nihil.</div>
      </li>
      <li data-anchor-part="color">
        <h3 style="margin: 0 0 16px;">Color</h3>
        <div>
          <div>Red</div>
          <div>Blue</div>
          <div>Orange</div>
          <div>Purple</div>
          <div>Green</div>
        </div>
      </li>

      <li data-anchor-part="height">
        <h3 style="margin: 0 0 16px;">Height</h3>
      </li>
    </ul>
  </spz-anchor>

属性

属性名说明类型
active当前选中的锚点对应的data-anchor-linkdata-anchor-part元素会自动添加-
manual当存在此属性时,元素不会在初始化时绑定事件-

方法

reset

重新初始化元素的事件。

参数名说明类型默认值是否必需
activeValue重新初始化时指定激活的锚点string方法调用时激活的锚点

freeze

解除组件上的事件监听,无需参数。

AI 摘要(LLM Ready)

  • 组件标识spz-anchor
  • 用途一句话:用于滚动的长内容元素各部分节点与章节标题对应
  • 可识别属性条目:2
  • 可识别方法小节:2
  • 可识别事件小节:0
  • 关键属性名(Top)activemanual
  • 关键方法名(Top)resetfreeze
  • 关键事件名(Top):无(待补充)
  • 阅读顺序建议:先看「何时使用」与「代码演示」,再核对属性/方法/事件。
  • 关联文档/guide/actions-and-events//guide/layouts/