ADP-Chat-Client
组件介绍/基础组件/布局组件

SideLayout

侧边栏布局组件

SideLayout

侧边栏布局,包含应用列表、会话列表、用户信息和设置。

vue中使用

<template>
  <SideLayout
    :visible="sidebarVisible"
    :applications="applications"
    :current-application-id="currentAppId"
    :conversations="conversations"
    :current-conversation-id="currentConversationId"
    :user-name="userName"
    :user-avatar-url="userAvatar"
    @select-application="handleSelectApp"
    @select-conversation="handleSelectConversation"
  />
</template>

html/react或其他框架中使用

<div id="containerId"></div>
<script>
ADPChatComponent.SideLayout.mount('#containerId', {
  visible: true,
  applications: [],
  currentApplicationId: '',
  conversations: [],
  currentConversationId: '',
  userName: '用户名',
  userAvatarUrl: '/avatar.png',
  onSelectApplication: (app) => {},
  onSelectConversation: (conversation) => {}
})
</script>

API

Props

属性名类型默认值说明
visiblebooleantrue是否显示侧边栏
applicationsApplication[][]应用列表
currentApplicationIdstring''当前选中的应用ID
conversationsChatConversation[][]会话列表
currentConversationIdstring''当前选中的会话ID
userAvatarUrlstring''用户头像URL
userAvatarNamestring''用户头像文字
userNamestring''用户名称
theme'light' | 'dark''light'主题模式
languageOptionsLanguageOption[]中英文语言选项列表
isMobilebooleanfalse是否为移动端
maxAppLennumber4最大应用显示数量
i18nobject-国际化文本

Slots

插槽名说明
sider-logoLogo 区域

On this page