跳转到主要内容
LI.FI 组件有三种变体 - compact（紧凑型）、wide（宽型）和 drawer（抽屉型）。变体允许自定义组件的外观，如报价的侧边栏或抽屉。还有几个子变体 - default（默认）、split（分离）和 custom（自定义）。它们有助于自定义内部外观和功能。

​
变体

变体提供了一种方法来优化组件的呈现样式，以适应您应用程序中的可用空间。
查看我们的 LI.FI 演示平台 以体验变体。
要使用其中一个变体，请在配置中设置 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 结账和存款。
default-subvariant

默认子变体

nft_checkout

自定义子变体（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,
  }
}
chain-sidebar

enableChainSidebar: true

compact-chain-selector

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'
  }
};
split-subvariant

分离子变体（默认）

swap-subvariant

分离子变体（交换选项）