SpSidebar 侧边栏-右

右侧侧边栏。工单、客户、来电弹屏等页面会用到此组件。一般会与布局组件 sp-with-sidebar 一同使用， 面板内的内容一般会与 sp-card 一同使用，并且 card 组件需要添加 :title-underline="false"

基础用法

<SpWithSidebar>
  <template #default>
    <SpCard title="工单管理"></SpCard>
  </template>
  <template #sidebar>
    <SpSidebar v-model="activeName">
      <SpSidebarPane icon="customer" tip="客户信息">
        <SpCard title="客户信息" :title-underline="false"> 客户信息内容</SpCard>
      </SpSidebarPane>
      <SpSidebarPane icon="application" tip="应用中心">2</SpSidebarPane>
      <SpSidebarPane icon="message" tip="消息队列">3</SpSidebarPane>
    </SpSidebar>
  </template>
</SpWithSidebar>

API

SpSidebar 属性

属性名	说明	类型	默认值
model-value / v-model	绑定值，选中选项卡的 name	string	第一个选项卡的 name

SpSidebar 插槽

插槽名	说明	子标签
default	默认插槽，务必使用 SpSidebarPane 组件	SpSidebarPane

SpSidebarPane 属性

属性名	说明	类型	默认值
icon	选项卡按钮图标，SpIcon 图标	SpIconName	—
tip	鼠标悬浮在选项卡图标上的提示信息	string	—
name	与选项卡绑定值 value 对应的标识符，表示选项卡别名	string	—
padding	面板的 padding	string	—

SpSidebarPane 插槽

插槽名	说明
default	默认插槽，面板内容