# @axa-ch/footer-small 中文文档

规范地址：https://npmcn.com/package/%40axa-ch/footer-small/

版本：7\.0\.11
npm 元数据更新时间：2026-08-06T09:11:30.317Z
中文译文更新时间：2026-11-07T19:44:14.514Z
软件包许可：Copyright 2019 AXA Versicherungen AG

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40axa-ch/footer-small
原文对照：https://npmcn.com/package/%40axa-ch/footer-small/?lang=original
项目主页：https://github.com/axa-ch-webhub-cloud/pattern-library/blob/develop/src/components/20-molecules/footer-small/README.md
源码仓库：https://github.com/axa-ch-webhub-cloud/pattern-library

弃用说明：Please use the new scope @axa-ch-webhub-cloud

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：53.6 kB，7 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：2 个
- 首次发布：2019-04-26T11:49:59.709Z
- 最新版本发布：2023-03-06T14:09:33.736Z
- 近 30 天下载量：2867（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：88（近 12 个月 0 个）

## 中文简介

AXA 图案库的页脚小组件

## 安装

```sh
npm install @axa-ch/footer-small
```

也可以使用：`pnpm add @axa-ch/footer-small`、`yarn add @axa-ch/footer-small`、`bun add @axa-ch/footer-small`

## README

# 页脚 - 小

这是脚印的小版本. 这个页脚属于网页的下部.

## 属性

### 动态

如果您想要控制一个用户点击一个语言- 或免责项目时会发生什么, 请添加此布尔属性 .

### 在Language Click上 \[反应独家\]

添加一个在语言链接被点击后立即运行的回调方法.

### \[反应独家\] 在DisclaimerClick上

添加一个在免责链接被点击后立即运行的回调方法.

## 实例

### 反应

```js
import React, { createElement, useState } from 'react';
import createAXAFooterSmallReact from '@axa-ch/footer-small/lib/index.react';

const AXAFooterSmallReact = createAXAFooterSmallReact(createElement);

const DemoFooterSmall = () => {
  const [activeLanguage, setActiveLanguageIndex] = useState('-');

  const [disclaimerChange, setDisclaimerIndex] = useState('-');

  const handleAXAFooterLanguageClicked = (language) => {
    setActiveLanguageIndex(language);
  };

  const handleAXAFooterDisclaimerClicked = (disclaimer) => {
    setDisclaimerIndex(disclaimer);
  };

  return (
    <div>
      <p>Language - Index Clicked: {activeLanguage}</p>
      <p>Disclaimer - Index Clicked: {disclaimerChange}</p>
      <AXAFooterSmallReact
        onLanguageClick={handleAXAFooterLanguageClicked}
        onDisclaimerClick={handleAXAFooterDisclaimerClicked}
        dynamic
      >
        <a
          slot="language-item"
          className="m-footer-small__link--active"
          href="https://axa.ch/de/privatkunden.html"
        >
          DE
        </a>
        <a slot="language-item" href="https://axa.ch/fr/particuliers.html">
          FR
        </a>
        <a slot="language-item" href="https://axa.ch/it/clienti-privati.html">
          IT
        </a>
        <a slot="language-item" href="https://axa.ch/en/private-customers.html">
          EN
        </a>
        <a
          slot="disclaimer-item"
          href="https://axa.ch/en/information/terms-of-use.html"
        >
          Terms of use
        </a>
        <a
          slot="disclaimer-item"
          href="https://axa.ch/en/information/data-protection.html"
        >
          Data protection
        </a>
        <span slot="copyright">&copy; 2019 AXA Insurance Ltd.</span>
      </AXAFooterSmallReact>
    </div>
  );
};
```

### 纯 HTML 页面

#### 静态做法

如果您想要一个带有静态链接的页脚, 这将自动路径到任何地方 `href` 属性指向 :

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Your awesome title</title>
  </head>
  <body>
    <axa-footer-small>
      <a
        slot="language-item"
        href="https://axa.ch/de/privatkunden.html"
        class="m-footer-small__link--active"
      >
        DE
      </a>
      <a slot="language-item" href="https://axa.ch/fr/particuliers.html">
        FR
      </a>
      <a slot="language-item" href="https://axa.ch/it/clienti-privati.html">
        IT
      </a>
      <a slot="language-item" href="https://axa.ch/en/private-customers.html">
        EN
      </a>
      <a
        slot="disclaimer-item"
        href="https://axa.ch/en/information/terms-of-use.html"
      >
        Terms of use
      </a>
      <a
        slot="disclaimer-item"
        href="https://axa.ch/en/information/data-protection.html"
      >
        Data protection
      </a>
      <span slot="copyright">&copy; 2019 AXA Insurance Ltd.</span>
    </axa-footer-small>

    <script src="node_modules/@axa-ch/footer-small/dist/index.js"></script>
  </body>
</html>
```

#### 动态方法

如果用户点击链接, 此方法不会自动重定向用户, 而是启动一个事件 。 如果你想听 这些事件,通过附加 `dynamic` 布尔属性并设置您的听众

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Your awesome title</title>
  </head>
  <body>
    <script>
      const wrapper = document.createElement('div');
      const activeLanguage = document.createElement('p');
      activeLanguage.id = 'active-language';
      activeLanguage.innerText = `Language - Index Clicked: ${selectedLanguageKey}`;
      const clickedDisclaimer = document.createElement('p');
      clickedDisclaimer.id = 'clicked-disclaimer';
      clickedDisclaimer.innerText = `Disclaimer - Index Clicked: -`;

      const footerSmall = document.createElement('axa-footer-small');
      footerSmall.dynamic = true;

      const deLanguageLink = document.createElement('a');
      deLanguageLink.slot = 'language-item';
      deLanguageLink.href = 'https://axa.ch/de/privatkunden.html';
      deLanguageLink.classList.add('m-footer-small__link--active');
      deLanguageLink.textContent = 'DE';

      const frLanguageLink = document.createElement('a');
      frLanguageLink.slot = 'language-item';
      frLanguageLink.href = 'https://axa.ch/de/privatkunden.html';
      frLanguageLink.textContent = 'FR';

      const itLanguageLink = document.createElement('a');
      itLanguageLink.slot = 'language-item';
      itLanguageLink.href = 'https://axa.ch/de/privatkunden.html';
      itLanguageLink.textContent = 'IT';

      const enLanguageLink = document.createElement('a');
      enLanguageLink.slot = 'language-item';
      enLanguageLink.href = 'https://axa.ch/de/privatkunden.html';
      enLanguageLink.textContent = 'EN';

      const termsOfUseLink = document.createElement('a');
      termsOfUseLink.slot = 'disclaimer-item';
      termsOfUseLink.href = 'https://axa.ch/en/information/terms-of-use.html';
      termsOfUseLink.textContent = 'Terms of use';

      const dataProtectionLink = document.createElement('a');
      dataProtectionLink.slot = 'disclaimer-item';
      dataProtectionLink.href =
        'https://axa.ch/en/information/data-protection.html';
      dataProtectionLink.textContent = 'Data protection';

      const copyRightText = document.createElement('span');
      copyRightText.slot = 'copyright';
      copyRightText.textContent = '&copy; 2019 AXA Insurance Ltd.';

      footerSmall.appendChild(deLanguageLink);
      footerSmall.appendChild(frLanguageLink);
      footerSmall.appendChild(itLanguageLink);
      footerSmall.appendChild(enLanguageLink);
      footerSmall.appendChild(termsOfUseLink);
      footerSmall.appendChild(dataProtectionLink);
      footerSmall.appendChild(copyRightText);

      wrapper.appendChild(activeLanguage);
      wrapper.appendChild(clickedDisclaimer);
      wrapper.appendChild(footerSmall);

      footerSmall.addEventListener('axa-language-click', (languageEvent) => {
        const languageResult = document.getElementById('active-language');
        languageResult.innerText = `Language - Index Clicked: ${languageEvent.detail}`;
      });

      footerSmall.addEventListener(
        'axa-disclaimer-click',
        (disclaimerEvent) => {
          const clickedDisclaimers =
            document.getElementById('clicked-disclaimer');
          clickedDisclaimers.innerText = `Disclaimer - Index Clicked: ${disclaimerEvent.detail}`;
        }
      );

      document.querySelector('body').appendChild(wrapper);
    </script>

    <script src="node_modules/@axa-ch/footer-small/dist/index.js"></script>
  </body>
</html>
```

## 如何选择

**突出显示语言( 标记为 `active`{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢?**

设置类 `.m-footer-small__link--active` 转到要突出显示的语句“孩子”。 示例

`<a slot="language-item" href="https://axa.ch/de/privatkunden.html" class="m-footer-small__link--active">`

## 常见问题

### @axa-ch/footer-small 是什么？

AXA 图案库的页脚小组件注意：该包已被作者标记为弃用——Please use the new scope @axa-ch-webhub-cloud

### 如何安装 @axa-ch/footer-small？

在项目目录运行 npm install @axa-ch/footer-small，或使用 pnpm add / yarn add / bun add。

### @axa-ch/footer-small 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/axa-ch\_\_footer-small 是否存在。

### @axa-ch/footer-small 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @axa-ch/footer-small 可以商用吗？

@axa-ch/footer-small 使用 Copyright 2019 AXA Versicherungen AG 许可。声明的许可为 Copyright 2019 AXA Versicherungen AG，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @axa-ch/footer-small 的下载量有多少？

根据 npm 官方下载统计，@axa-ch/footer-small 在 2026/10/08 – 2026/11/06 这 30 天内被下载 2,867 次，日均约 96 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @axa-ch/footer-small 还在维护吗？

最新版本 7\.0\.11 发布于 2023/03/06（3 年前）；至今共发布 88 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/04/26。作者已将其标记为弃用，新项目建议寻找替代方案。

