页脚 - 小
这是脚印的小版本. 这个页脚属于网页的下部.
属性
动态
如果您想要控制一个用户点击一个语言- 或免责项目时会发生什么, 请添加此布尔属性 .
在Language Click上 [反应独家]
添加一个在语言链接被点击后立即运行的回调方法.
[反应独家] 在DisclaimerClick上
添加一个在免责链接被点击后立即运行的回调方法.
实例
反应
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">© 2019 AXA Insurance Ltd.</span>
</AXAFooterSmallReact>
</div>
);
};
纯 HTML 页面
静态做法
如果您想要一个带有静态链接的页脚, 这将自动路径到任何地方 href 属性指向 :
<!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">© 2019 AXA Insurance Ltd.</span>
</axa-footer-small>
<script src="node_modules/@axa-ch/footer-small/dist/index.js"></script>
</body>
</html>
动态方法
如果用户点击链接, 此方法不会自动重定向用户, 而是启动一个事件 。 如果你想听 这些事件,通过附加 dynamic 布尔属性并设置您的听众
<!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 = '© 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">