@channel.io/app-sdk-wam-ui (英语)

WAM特有UI基础设施及Channel.io apps预设.

使用这个软件包来进行WAM运行时的行为,例如主题检测,iframe高度同步, 导航,和常见的全页状态。 直接从 重新设计了Bezier子路径.

安装

npm install @channel.io/app-sdk-wam-ui
npm install react @channel.io/[email protected] @channel.io/[email protected] styled-components@^6

Bezier React 4 仍为预放出. 键 4.0.0-next.14 在应用程序锁文件中审查 升级前发布注释.

快开始

import { SendIcon } from "@channel.io/bezier-icons";
import { Button, HStack } from "@channel.io/bezier-react/beta";
import {
  HeightSynchronizer,
  InlineBanner,
  WamHeader,
  WamThemeProvider,
} from "@channel.io/app-sdk-wam-ui";

export function App() {
  return (
    <WamThemeProvider>
      <HeightSynchronizer maxHeight={480}>
        <WamHeader title="Example" />
        <HStack spacing={8} padding={16}>
          <Button label="Send" leadingContent={SendIcon} variant="filled" semantic="primary" />
        </HStack>
        <InlineBanner variant="info" content="Ready to send." />
      </HeightSynchronizer>
    </WamThemeProvider>
  );
}

贝塞尔用法

新的 WAM 接口应导入重新设计的组件 @channel.io/bezier-react/beta数字 :

import {
  Banner,
  Button,
  ConfirmModal,
  FormField,
  Search,
  Select,
  SettingsField,
  Switch,
  TextInput,
} from "@channel.io/bezier-react/beta";

不由β子路径输出的提供方和稳定的指使API仍然可用 @channel.io/bezier-react。从 /beta 并使用当前符号 API.

构成部分

WamThemeProvider

用贝泽尔的包装 WAM AppProvider 并重新设计 ToastProvider它探测出光线或 黑暗的外观来自 WAM 运行时间, 或者接受一个明确的覆盖 .

<WamThemeProvider>
  <MyWam />
</WamThemeProvider>

HeightSynchronizer

观察内容变化并同步当前iframe高度通过主机桥.

<HeightSynchronizer maxHeight={600}>
  <MyContent />
</HeightSynchronizer>

使用 excludePaths 与 pathname 当一个路径管理自己的大小.

WamHeader

提供WAM的回放和与Bezierβ图标按钮的相近行为. 通过 WAM SDK 导航和 当周围的应用程序控制了这些动作时,关闭回调.

<WamHeader title="Settings" showBackButton />

LoadingPage, (中文(简体) ), ErrorPage,以及 EmptyState

对小型WAM表面的一致整页状态.

if (loading) return <LoadingPage message="Loading data..." />;
if (error) return <ErrorPage error={error} onRetry={refetch} />;
return <EmptyState title="No results" description="Try a different search." />;

InlineBanner

语义上的成功、错误或信息预设在 Bezier β 上 Banner。 。 。 .

<InlineBanner variant="success" content="Saved successfully." />

ConfirmDialog

一个紧凑的确认预设在 Bezier β 之上 ConfirmModal。 。 。 .

<ConfirmDialog
  show={open}
  onHide={() => setOpen(false)}
  title="Delete this item?"
  description="This action cannot be undone."
  destructive
  confirmText="Delete"
  onConfirm={handleDelete}
/>

SkeletonBox, (中文(简体) ), SkeletonCircle,以及 BottomSheet

面向WAM的加载占位符和没有直接贝塞尔的紧凑上覆布局 等同的贝他. 给每个 BottomSheet a 一个 ariaLabel;它管理焦点、逃逸和滚动 打开时锁定 .

实例

• 类型脚本教程
• 去辅导

两个教程都使用 WAM 显示回放 @channel.io/app-sdk-wam 和这个包并列 语言专用应用程序服务器.

同伴依赖关系

仍在使用 Bezier 3 的应用软件应该继续使用 @channel.io/app-sdk-wam-ui 0.2.x. (中文(简体) ).

许可证

麻省理工学院