Documentation Index
Fetch the complete documentation index at: https://docs.li.fi/llms.txt
Use this file to discover all available pages before exploring further.
LI.FI 组件有三种变体 - compact（紧凑型）、wide（宽型）和 drawer（抽屉型）。变体允许自定义组件的外观，如报价的侧边栏或抽屉。还有几个子变体 - default（默认）、split（分离）和 custom（自定义）。它们有助于自定义内部外观和功能。
变体提供了一种方法来优化组件的呈现样式，以适应您应用程序中的可用空间。
要使用其中一个变体，请在配置中设置 variant 选项。
import { LiFiWidget, WidgetConfig } from '@lifi/widget';
const widgetConfig: WidgetConfig = {
// 可以是 compact、wide 或 drawer
variant: 'wide',
};
export const WidgetPage = () => {
return (
<LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
);
};
紧凑型变体
当您页面空间有限或处理较小屏幕尺寸时，紧凑型变体是一个很好的选择。它具有您在紧凑视图中进行桥接和交换所需的一切，并允许您将组件集成到 Web 应用程序页面的任何位置。
宽型变体
宽型变体允许您利用更大的页面和屏幕尺寸，在您可能有更多可用屏幕空间的地方，提供更全面的可用路由概览，在侧边栏中显示，带有流畅的动画。
抽屉型变体
抽屉型变体允许您根据用户交互显示或隐藏组件。它可以很好地适应页面的侧面，具有与紧凑型变体相同的布局。
如何控制抽屉？
抽屉没有预构建的按钮来打开和关闭它。要控制抽屉，您需要创建并分配一个 ref 给组件。
以下是使用 ref 控制抽屉的示例：
export const WidgetPage = () => {
const drawerRef = useRef<WidgetDrawer>(null);
const toggleWidget = () => {
drawerRef.current?.toggleDrawer();
};
return (
<div>
<button onClick={toggleWidget}>打开 LI.FI 组件</button>
<LiFiWidget
ref={drawerRef}
config={{
variant: 'drawer',
}}
integrator="drawer-example"
/>
</div>
);
}
子变体
子变体允许您为用户呈现不同的工作流程。
默认 子变体在紧凑视图中具有相同的桥接和交换功能。
分离 子变体分离了心理模型，在主页面上有整齐的标签，为桥接和交换体验提供了略有不同的视图。
自定义 子变体提供了全新的外观，允许您显示自定义组件（如 NFT 组件），并为您提供工具包来构建全新的流程，包括 NFT 结账和存款。
有关 分离 子变体的配置详细信息，请参见分离子变体选项。
要使用其中一个子变体，请在配置中设置 subvariant 选项。
import { LiFiWidget, WidgetConfig } from '@lifi/widget';
const widgetConfig: WidgetConfig = {
// 可以是 compact、wide 或 drawer
variant: 'wide',
// 可以是 default、split 或 custom
subvariant: 'split',
};
export const WidgetPage = () => {
return (
<LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
);
};
启用链侧边栏
如果您使用 wide 变体并希望有链侧边栏而不是紧凑的链选择器，请在 subvariantOptions 中将 enableChainSidebar 设置为 true：
subvariantOptions: {
wide: {
enableChainSidebar: true,
}
}
enableChainSidebar: false
wide 变体中的链侧边栏默认禁用。
分离子变体选项
对于 subvariant: 'split'，subvariantOptions 配置控制是否显示”交换”和”桥接”标签或单个界面。
- 默认（无选项）：显示”桥接”和”交换”标签
split: 'bridge'：仅显示桥接界面（无标签）split: 'swap'：仅显示交换界面（无标签）
import { LiFiWidget, WidgetConfig } from '@lifi/widget';
// 默认 - 显示标签
const widgetConfig: WidgetConfig = {
subvariant: 'split',
};
// 纯桥接界面
const bridgeConfig: WidgetConfig = {
subvariant: 'split',
subvariantOptions: {
split: 'bridge'
}
};
// 纯交换界面
const swapConfig: WidgetConfig = {
subvariant: 'split',
subvariantOptions: {
split: 'swap'
}
};
