Salesforce学习 Lightning（一）LightningComponentTabs的创建

Lightning标准画面上的tab，一般情况下有home和各个object，有时需要表示自定义画面，这种情况下如何实现。

例：下图是salesforce自带的一些tab。

做成方法分享：

1.新建一个LightningWebComponent

代码语言：javascript复制

<template>
  <lightning-tabset active-tab-value="accountTab" class="sdsc-tabset">
      <lightning-tab label="お客様" value="accountTab" class="slds-var-p-vertical_xxx-small">
        お客様123456
      </lightning-tab>
      <lightning-tab label="行動" value="eventTab" class="slds-var-p-vertical_xxx-small">
        行動456789
      </lightning-tab>
  </lightning-tabset>
</template>

代码语言：javascript复制

import { LightningElement } from 'lwc';
export default class DreamHouseAccountEventTabs extends LightningElement {
  
}

代码语言：javascript复制

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__Tab</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
</LightningComponentBundle>

2.创建LightningComponentTabs

Content栏选择上边新创建的lwc

3.编辑想要表示的App manager

找到自己的app在倒三角那里点击编辑

在Navigation Items里边把新创建的Tab拖到右边想表示的位置。

效果展示：

app navigation object salesforce web

0 人点赞