@opensumi/ide-overlay NPM

title: 浮层模块

overlay 模块为 IDE 上的浮层模块，例如包含 Dialog（弹窗）、Message（消息）等模块。如果需要在 IDE 通知用户一条消息或者需要一个模态对话框和用户交互时，可以使用该模块。

Message

Message 会在 IDE 右下角弹出一个提示信息。

export interface IMessageService {
  info(message: string | React.ReactNode, buttons?: string[], closable?: boolean): Promise<string | undefined>;
  warning(message: string | React.ReactNode, buttons?: string[], closable?: boolean): Promise<string | undefined>;
  error(message: string | React.ReactNode, buttons?: string[], closable?: boolean): Promise<string | undefined>;
  open<T = string>(message: string | React.ReactNode, type: MessageType, buttons?: string[], closable?: boolean, from?: string): Promise<T | undefined>;
  hide<T = string>(value?: T): void;
}

以下参数以 info 为例

message 主要指定了消息体，可以是一个普通的文本消息，也可以是一个 React 组件

import { IMessageService } from '@opensumi/ide-overlay';

@Injectable()
export class MessageDemo {
  @Autowired(IMessageService)
  messageService: IMessageService;

  private showMessage() {
    this.messageService.info('复制成功');
  }
}

buttons 为弹窗右下角按钮，按照从左向右的顺序依次渲染，用户选择后会返回选择的结果

import { IMessageService } from '@opensumi/ide-overlay';

@Injectable()
export class MessageDemo {
  @Autowired(IMessageService)
  messageService: IMessageService;

  private async showMessage() {
    const res = await this.messageService.info('是否要更新插件', ['确定', '取消']);

    if (res === '确定') {
      //...
    }
  }
}

是否显示关闭按钮，默认为 true

info: 15 秒
warning: 18 秒
error: 20 秒

如果不想用默认消息图标，可以使用 open 接口自定义消息组件

export const CustomMessage = () => {
  const messageService = useInjectable(IMessageService)
  return (
    <div>
      <div>这是一个自定义消息</div>
      <button onClick={() => messageService.hide('确定')}>确定</button>
    </div>
  )
}

const res = await this.messageService.open(<CustomMessage />, MessageType.EMPTY);

if (res === '确定') {
  //...
}

Dialog

Dialog 接口与消息一致，不过弹窗为模态

import { IDialogService } from '@opensumi/ide-overlay';

@Injectable()
export class MessageDemo {
  @Autowired(IDialogService)
  dialogService: IDialogService;

  private async showMessage() {
    const res = await this.dialogService.info('这是一个模态弹窗');

    if (res === '确定') {
      //...
    }
  }
}

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

11 months ago

12 months ago

12 months ago

11 months ago

12 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

11 months ago

12 months ago

12 months ago

11 months ago

12 months ago

12 months ago

title: 浮层模块

Message

接口

参数说明

message

Example

buttons

Example

closable

常见问题

消息弹出时间是多久

如何自定义消息组件

Example

Dialog

Example