@teamix/lead

引导组件

云效引导相关业务组件，从 @alife/devops-ui 引入。

本组件封装了多种类型的产品引导组件，包括：

• 产品介绍弹窗-ProductDialog
• 功能上新弹窗-ChangelogDialog
• 页面缺省引导-PagePlaceHolder
• 新版页面级空态引导-EmptyLead
• 全屏引导-FullScreenLead
• 气泡-highlight
  • Highlight Single Element
  • Highlight With Popover
  • Highlight With Steps

API

ProductDialog

参数名	说明	必填	类型	默认值	备注
visible	是否显示	否	boolean
logo	左上角logo图片地址	是	string		height: 20px
title	标题	是	string
subTitle	副标题	否	string
buttons	按钮props	是	array		参考示例
slides	幻灯片数据	是	array		参考示例
onClose	关闭按钮回调	否	func
dotsVisible	是否显示进度条	否	boolean	true

import { Lead } from '@alife/devops-ui';
const { ProductDialog } = Lead;

props: {
  visible: boolean 
  logo: string // 左上角logo
  title: string // 大标题
  subTitle: string // 副标题
  buttons: {  // 标题下按钮
    text: string
    type: 'primary' | 'normal' | 'secondary' 
    dance?: boolean  // 按钮是否跳动
    onClick(): void
  }[]
  slides: { // 幻灯片
    src: string;
    text: string;
  }[]
  onClose(): void
}

ChangelogDialog

参数名	说明	必填	类型	默认值	备注
visible	是否显示	是	boolean
okText	确定按钮文案	否	string	'我知道了'
cancelText	取消按钮文案	否	string	'取消'
dialogProps	弹窗 props	否	object
hasClose	是否有右上角的关闭按钮	否	boolean	true
showSidebar	是否展示侧边栏	否	boolean	false	true情况的样式未修改，不建议使用
dataSource	展示数据	否	dataSourceType[]
okButtonVisible	是否展示确定按钮	否	boolean
cancelButtonVisible	是否展示取消按钮	否	boolean	false
className	弹窗classname	否	string
nextText	下一步按钮文案	否	string	'下一步'	按钮类型normal
prevText	上一步按钮文案	否	string	'上一步'	按钮类型normal
currentKey	当前展示的key	否	string
getActiveKey	获取当前展示key	否	func(key:string)
onOk	确定按钮回调	否	func
onCancel	取消按钮回调	否	func
onClose	关闭按钮回调	否	func

interface dataSourceType {
  key: string; // 当前展示页的key，根据key值显示”上一步“和“下一步”
  headerBackground: string; // 当前展示页的图片url
  title: string; // 当前展示页的标题
  contentDataSource: {
    title: string; 
    subtitle: string;
    substance: string;
  }[]; // 当前展示页的具体文案
  version?: string; // 当前版本号，仅在showSideBar类型下使用
  date?: string; // 当前上新日期，仅在showSideBar类型下使用
  description?: string; // 描述，仅在showSideBar类型下使用
  contentDataType?: string; // 数据类型，仅在showSideBar类型下使用
  sidebarTitle?: string; // sideBar中显示的title，仅在showSideBar类型下使用
}

EmptyLead

参数名	说明	必填	类型	默认值	备注
title	主标题文案	是	string
desc	辅助说明文案	否	string/Element
options	产品能力点说明	否	string[]		每个能力点前有一个“√”的icon
extraDesc	次级辅助文案	否	string		出现在辅助文案下方
type	图片、文案和操作区的页面结构	否	'normal'/'topImg'/'bottomImg'
imgList	图片列表	是	imgType[]
isBigPicture	是否是大图	否	boolean	false	平常的图片大小为200X200，大图为1000X560，仅在‘bottomImg’类型下生效
imgListHasArrow	多张图片之间是否带有箭头'>'	否	boolean	false
backgroundGradient	是否需要背景色渐变	否	boolean	false
buttonNumber	按钮数量	否	number	1	最少1个按钮，最多3个按钮
okText	确认按钮文案	是	string		button type 为 primary
secondButtonText	第2个normal按钮文案	否	string		button type 为 normal
thirdButtonText	第3个normal按钮文案	否	string		button type 为 normal
okDisabled	确认按钮禁用态	否	boolean	false
secondeButtonDisabled	第2个normal按钮禁用态	否	boolean	false
thirdButtonDisabled	第3个normal按钮禁用态	否	boolean	false
extra	操作按钮区	否	Element	false	优先级高于button相关参数，为了保证规范，只建议在特殊场景下使用
onOk	确认按钮点击事件	是	() => void
secondButtonClick	第2个按钮点击事件	否	() => void
thirdButtonClick	第3个按钮点击事件	否	() => void

imgType: {
  imgUrl: string; // 图片地址
  imgTitle?: string; // 图片主标题
  imgDesc?: string | Element; // 图片辅助文案
  topDesc?: string; // 图片顶部的辅助文案
};

FullScreenLead

import { Lead } from '@alife/devops-ui';
const { FullScreenLead } = Lead;

props: {
  title: string; // 标题
  prevButtonText?: string;
  nextButtonText?: string;
  prevButtonVisible?: boolean;
  nextButtonVisible?: boolean;
  prevButtonProps?: any; // 按钮接收的参数
  nextButtonProps?: any;
  onPrevButtonClick?: (e: Event) => void;
  onNextButtonClick?: (e: Event) => void;
  tabHeaderTitle?: string; // Tabs 上方的标题
  useCardTab?: boolean; // 是否启用卡片类型的 Tab
  defaultSelectId?: number; // 默认选择的 id
  dataSource: dataSourceType[];
  onSelect: (selectedId: number | string) => void;
  useLoop?: boolean; // 是否启用轮播
  speed?: number; // 轮播速度，默认 3000
  className?: string;
  stopLoopingWhenHover?: boolean; // 是否在点击 Tab 后停止轮播，默认为 true
  customContent?: any; // 自定义内容，将不展示卡片
}

dataSourceType: {
  id: number,
  tabTitle: string,
  tabDesc?: string, // 仅在 useCardTypeTab 为 true 时生效
  img: string,
  imgDesc: string | ReactNode,
}

NotifyCard

卡片通知

参数名	说明	必填	类型	默认值	备注
visible	是否显示	是	boolean	无
title	标题	是	string	无
titleAlign	标题的对齐方式	否	string	left
footer	底部	否	React.ReactNode	无
btns	底部的按钮	否	IBtns[]	无
width	宽度	否	string/number	320
top	距离顶部值	否	string/number	16
right	距离右边值	否	string/number	24
onClose	关闭回调	是	func	无
animation	卡片弹出方向	否	'right', 'left'	'right'

气泡

Lead Definition

const lead = new Lead.TeamixLead({
  className: 'scoped-class', // className to wrap popover
  animate: true,             // Animate while changing highlighted element
  opacity: 0,              // Background opacity (0 means only popovers and without overlay)
  padding: 5,               // Distance of element from around the edges
  allowClose: false,          // Whether clicking on overlay should close or not
  overlayClickNext: true,   // Should it move to next step on overlay click
  nextBtnText: '下一步',      // Next button text for this step
  prevBtnText: '上一步',      // Previous button text for this step
  doneBtnText: '完成',        // Text on the final button
  closeBtnText: '跳过引导',    // Text on the close button for this step
  showButtons: true,          // Do not show control buttons in footer
  keyboardControl: true,      // Allow controlling through keyboard (escape to close, arrow keys to move)
  container: document.body,   // 引导 DOM 挂载节点， 如果要引导的 DOM 是被定位包裹的元素， 尝试使用改api， 一般用不着
  scrollIntoViewOptions: {},  // We use `scrollIntoView()` when possible, pass here the options for it if you want any
  onHighlightStarted: (Element) => {},                     // Called when element is about to be highlighted
  onHighlighted: (Element) => {},                          // Called when element is fully highlighted
  onDeselected: (Element) {},                              // Called when element has been deselected
  onReset: (Element) => {console.log('close', Element)},   // Called when overlay is about to be cleared
  onNext: (Element) => {console.log('next', Element)},     // Called when moving to next step on any step
  onPrevious: (Element) => {console.log('pre', Element)},  // Called when moving to next step on any step
});

参数名	说明	必填	类型	默认值	备注
className	className to wrap popover	否	string	null
animate	Animate while changing highlighted element	否	boolean	true
opacity	Background opacity (0 means only popovers and without overlay)	否	number	0
padding	Distance of element from around the edges	否	number	5
allowClose	Whether clicking on overlay should close or not	否	boolean	false
overlayClickNext	Should it move to next step on overlay click	否	boolean	true
nextBtnText	Next button text for this step	否	string	"Next ->"
prevBtnText	Previous button text for this step	否	string	"<- Prev"
doneBtnText	Text on the final button	否	string	"Done"
closeBtnText	Text on the close button for this step	否	string	"Close"
showButtons	Do not show control buttons in footer	否	boolean	true
keyboardControl	Allow controlling through keyboard (escape to close, arrow keys to move)	否	boolean	true
scrollIntoViewOptions	We use scrollIntoView() when possible, pass here the options for it if you want any	否	{}	{}
onHighlightStarted	Called when element is about to be highlighted	否	func	(Element) => {}
onHighlighted	Called when element is fully highlighted	否	func	(Element) => {}
onDeselected	Called when element has been deselected	否	func	(Element) => {}
onReset	Called when overlay is about to be cleared	否	func	(Element) => {}
onNext	Called when moving to next step on any step	否	func	(Element) => {}
onPrevious	Called when moving to next step on any step	否	func	(Element) => {}

Step Definition

Here are the set of options that you can pass while defining steps defineSteps or the object that you pass to highlight method:

const stepDefinition = {
  element: '#some-item',        // Query selector string or Node to be highlighted
  stageBackground: '#ffffff',   // This will override the one set in lead
  popover: {                    // There will be no popover if empty or not given
    className: 'popover-class', // className to wrap this specific step popover in addition to the general className in lead options
    img: 'https://xxxxxx.png',  // Img on the popover 
    title: 'Title',             // Title on the popover
    description: 'Description', // Body of the popover
    showButtons: false,         // Do not show control buttons in footer
    doneBtnText: 'Done',        // Text on the last button
    closeBtnText: 'Close',      // Text on the close button
    nextBtnText: 'Next',        // Next button text
    prevBtnText: 'Previous',    // Previous button text
  },
  onNext: () => {},             // Called when moving to next step from current step
  onPrevious: () => {},         // Called when moving to previous step from current step
};

For example, here is how it would look when highlighting a single element:

const lead = new Lead.TeamixLead(leadOptions);
lead.highlight(stepDefinition);

When creating a step by step guide:

const lead = new Lead.TeamixLead(leadOptions);
lead.defineSteps([
    stepDefinition1,
    stepDefinition2,
    stepDefinition3,
    stepDefinition4,
]);

API Methods

const lead = new Lead.TeamixLead(options);

// Checks if the lead is active or not
if (lead.isActivated) {
    console.log('Lead is active');
}

// In case of the steps guide, you can call below methods
lead.defineSteps([ stepDefinition1, stepDefinition2, stepDefinition3 ]);
lead.start(stepNumber = 0);  // Starts leading through the defined steps
lead.moveNext();             // Moves to next step in the steps list
lead.movePrevious();         // Moves to previous step in the steps list
lead.hasNextStep();          // Checks if there is next step to move to
lead.hasPreviousStep();      // Checks if there is previous step to move to

// Prevents the current move. Useful in `onNext` or `onPrevious` if you want to
// perform some asynchronous task and manually move to next step
lead.preventMove();

// Highlights the element using query selector or the step definition
lead.highlight(string|stepDefinition);

// Reposition the popover and highlighted element
lead.refresh();

// Resets the overlay and clears the screen
lead.reset();

// Additionally you can pass a boolean parameter
// to clear immediately and not do the animations etc
// Could be useful when you, let's say, want to run
// a different instance of lead while one was running
lead.reset(clearImmediately = false);

// Checks if there is any highlighted element
if(lead.hasHighlightedElement()) {
    console.log('There is an element highlighted');
}

// Gets the currently highlighted element on screen
// It would be an instance of `/src/core/element.js`
const activeElement = lead.getHighlightedElement();

// Gets the last highlighted element, would be an instance of `/src/core/element.js`
const lastActiveElement = lead.getLastHighlightedElement();

activeElement.getCalculatedPosition(); // Gets screen co-ordinates of the active element
activeElement.hidePopover();           // Hide the popover
activeElement.showPopover();           // Show the popover

activeElement.getNode();  // Gets the DOM Element behind this element

Note

Do not forget to add e.stopPropagation() to the click binding that triggers lead.

Demos