样式定制
通过宿主 class、CSS variables 和 part 选择器覆盖 LinkFox 组件样式。
样式模型
LinkFox Web Components 不需要额外的 className 参数。直接给自定义元素添加 class，然后通过暴露的 part 和 CSS variables 覆盖样式即可。
示例
<linkfox-widget
class="my-linkfox"
slug="game-father"
api-key="your-linkfox-api-key"
title="Recommended Sites"
></linkfox-widget>
<style>
.my-linkfox {
--lf-background: transparent;
--lf-border: transparent;
--lf-shell-padding: 0;
--lf-card-padding: 0;
--lf-gap: 8px;
}
.my-linkfox::part(shell) {
box-shadow: none;
}
.my-linkfox::part(title) {
font-size: 20px;
font-weight: 700;
}
</style>可用 parts
shellheadertitlewidgetgridlistrowcardcard-topnavbarpillinlineinline-linkcopytextdescriptionlink
可用 CSS 变量
--lf-background--lf-text--lf-muted--lf-border--lf-radius--lf-card-radius--lf-pill-radius--lf-shell-padding--lf-card-padding--lf-gap