Anchor 锚点

使用场景#

需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。

示例#

独立使用#

inline

<Anchor style={{ marginLeft: 12 }}>
  <Anchor.Item title="使用场景" href="#test_usage">
    <Anchor.Item title="注意事项" href="#test_caution" />
    <Anchor.Item title="拓展功能" href="#test_extensions" />
    <Anchor.Item title="虚拟滚动" href="#test_virtual" />
  </Anchor.Item>
  <Anchor.Item title="用法示例" href="#test_examples">
    <Anchor.Item title="基本表格" href="#test_basic" />
    <Anchor.Item title="表格样式" href="#test_style" />
    <Anchor.Item title="数据加载状态数据加载状态" href="#test_loading" />
    <Anchor.Item title="树形表格" href="#test_tree" />
  </Anchor.Item>
  <Anchor.Item title="API" href="#test_api" />
</Anchor>

<Anchor style={{ marginLeft: 12 }}>
  <Anchor.Item title="使用场景" href="#test_usage">
    <Anchor.Item title="注意事项" href="#test_caution" />
    <Anchor.Item title="拓展功能" href="#test_extensions" />
    <Anchor.Item title="虚拟滚动" href="#test_virtual" />
  </Anchor.Item>
  <Anchor.Item title="用法示例" href="#test_examples">
    <Anchor.Item title="基本表格" href="#test_basic" />
    <Anchor.Item title="表格样式" href="#test_style" />
    <Anchor.Item title="数据加载状态数据加载状态" href="#test_loading" />
    <Anchor.Item title="树形表格" href="#test_tree" />
  </Anchor.Item>
  <Anchor.Item title="API" href="#test_api" />
</Anchor>

页面内跳转#

使用场景

ProTable 负责将数据渲染为 HTML 表格，其核心功能是将结构化的数据用表格的方式展现在页面中，并以组件 props 的形式提供了丰富的表格功能，例如排序，过滤，滚动，锁列，行多选等。
在实现层面，ProTable 是对 ali-react-table 的封装，除了保留基础的表格特性之外，ProTable 也默认集成了大量表格功能拓展。

注意事项

盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。

拓展功能

虚拟滚动

用法示例

基本表格

表格样式

数据加载状态

树形表格

API

盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。

数据加载状态数据加载状态数据加载状态数据加载状态

树形表格

API

noInline

const StyledH2 = styled.h2`
  &:target {
    background: #ccc;
    color: red;
  }
`;

const StyledH3 = styled.h3`
  &:target {
    background: #ccc;
    color: red;
  }
`;

const hippo =
  '盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。';

const Contentful = ({ repeat = 2 }) => {
  return <p style={{ fontSize: 14, color: 'var(--rex-colors-emphasis-60)' }}>{hippo.repeat(repeat)}</p>;
};

function Basic2() {
  return (
    <div
      style={{
        display: 'flex',
        height: 400,
        overflow: 'auto',
        outline: '1px dashed var(--rex-colors-emphasis-40)',
      }}
    >
      <div style={{ flex: 'auto' }}>
        <StyledH2 id="test_usage">使用场景</StyledH2>
        <p style={{ fontSize: 14, color: 'var(--rex-colors-emphasis-60)' }}>
          ProTable 负责将数据渲染为 HTML 表格，其核心功能是将结构化的数据用表格的方式展现在页面中，并以组件 props
          的形式提供了丰富的表格功能，例如排序，过滤，滚动，锁列，行多选等。
          <br />
          在实现层面，ProTable 是对 ali-react-table 的封装，除了保留 基础的表格特性 之外，ProTable 也默认集成了
          大量表格功能拓展 。
        </p>
        <StyledH3 id="test_caution">注意事项</StyledH3>
        <Contentful />
        <StyledH3 id="test_extensions">拓展功能</StyledH3>
        <Contentful />
        <StyledH3 id="test_virtual">虚拟滚动</StyledH3>
        <Contentful />

        <StyledH2 id="test_examples">用法示例</StyledH2>
        <StyledH3 id="test_basic">基本表格</StyledH3>
        <Contentful />
        <Contentful />
        <StyledH3 id="test_style">表格样式</StyledH3>
        <Contentful />
        <Contentful />
        <StyledH3 id="test_loading">数据加载状态</StyledH3>
        <Contentful />
        <Contentful />
        <StyledH3 id="test_tree">树形表格</StyledH3>
        <Contentful />
        <Contentful />

        <StyledH2 id="test_api">API</StyledH2>
        <Contentful repeat={5} />
        <Contentful repeat={5} />
        <Contentful repeat={5} />
      </div>

      <Anchor style={{ marginLeft: 12, flex: '0 0 120px', alignSelf: 'flex-start' }}>
        <Anchor.Item title="使用场景" href="#test_usage">
          <Anchor.Item title="注意事项" href="#test_caution" />
          <Anchor.Item title="拓展功能" href="#test_extensions" />
          <Anchor.Item title="虚拟滚动" href="#test_virtual" />
        </Anchor.Item>
        <Anchor.Item title="用法示例" href="#test_examples">
          <Anchor.Item title="基本表格" href="#test_basic" />
          <Anchor.Item title="表格样式" href="#test_style" />
          <Anchor.Item title="数据加载状态数据加载状态数据加载状态数据加载状态" href="#test_loading" />
          <Anchor.Item title="树形表格" href="#test_tree" />
        </Anchor.Item>
        <Anchor.Item title="API" href="#test_api" />
      </Anchor>
    </div>
  );
}

render(<Basic2 />)

const StyledH2 = styled.h2`
  &:target {
    background: #ccc;
    color: red;
  }
`;

const StyledH3 = styled.h3`
  &:target {
    background: #ccc;
    color: red;
  }
`;

const hippo =
  '盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。';

const Contentful = ({ repeat = 2 }) => {
  return <p style={{ fontSize: 14, color: 'var(--rex-colors-emphasis-60)' }}>{hippo.repeat(repeat)}</p>;
};

function Basic2() {
  return (
    <div
      style={{
        display: 'flex',
        height: 400,
        overflow: 'auto',
        outline: '1px dashed var(--rex-colors-emphasis-40)',
      }}
    >
      <div style={{ flex: 'auto' }}>
        <StyledH2 id="test_usage">使用场景</StyledH2>
        <p style={{ fontSize: 14, color: 'var(--rex-colors-emphasis-60)' }}>
          ProTable 负责将数据渲染为 HTML 表格，其核心功能是将结构化的数据用表格的方式展现在页面中，并以组件 props
          的形式提供了丰富的表格功能，例如排序，过滤，滚动，锁列，行多选等。
          <br />
          在实现层面，ProTable 是对 ali-react-table 的封装，除了保留 基础的表格特性 之外，ProTable 也默认集成了
          大量表格功能拓展 。
        </p>
        <StyledH3 id="test_caution">注意事项</StyledH3>
        <Contentful />
        <StyledH3 id="test_extensions">拓展功能</StyledH3>
        <Contentful />
        <StyledH3 id="test_virtual">虚拟滚动</StyledH3>
        <Contentful />

        <StyledH2 id="test_examples">用法示例</StyledH2>
        <StyledH3 id="test_basic">基本表格</StyledH3>
        <Contentful />
        <Contentful />
        <StyledH3 id="test_style">表格样式</StyledH3>
        <Contentful />
        <Contentful />
        <StyledH3 id="test_loading">数据加载状态</StyledH3>
        <Contentful />
        <Contentful />
        <StyledH3 id="test_tree">树形表格</StyledH3>
        <Contentful />
        <Contentful />

        <StyledH2 id="test_api">API</StyledH2>
        <Contentful repeat={5} />
        <Contentful repeat={5} />
        <Contentful repeat={5} />
      </div>

      <Anchor style={{ marginLeft: 12, flex: '0 0 120px', alignSelf: 'flex-start' }}>
        <Anchor.Item title="使用场景" href="#test_usage">
          <Anchor.Item title="注意事项" href="#test_caution" />
          <Anchor.Item title="拓展功能" href="#test_extensions" />
          <Anchor.Item title="虚拟滚动" href="#test_virtual" />
        </Anchor.Item>
        <Anchor.Item title="用法示例" href="#test_examples">
          <Anchor.Item title="基本表格" href="#test_basic" />
          <Anchor.Item title="表格样式" href="#test_style" />
          <Anchor.Item title="数据加载状态数据加载状态数据加载状态数据加载状态" href="#test_loading" />
          <Anchor.Item title="树形表格" href="#test_tree" />
        </Anchor.Item>
        <Anchor.Item title="API" href="#test_api" />
      </Anchor>
    </div>
  );
}

render(<Basic2 />)

API#

Anchor#

字段	描述
offsetTop	`number` = 12 锚点具体滚动容器顶部的距离
useJS	`boolean` 是否启用 JavaScript 定位
className	`string`
style	`CSSProperties`