3.4.5 • Published 8 months ago

@opensumi/ide-overlay v3.4.5

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

id: overlay

title: 浮层模块

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

Message

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

npm.io

接口

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

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

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

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

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

buttons

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

Example
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 === '确定') {
      //...
    }
  }
}

closable

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

常见问题

消息弹出时间是多久

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

如何自定义消息组件

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

Example
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 接口与消息一致,不过弹窗为模态

npm.io

Example

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 === '确定') {
      //...
    }
  }
}
3.4.5

8 months ago

3.4.4

9 months ago

3.4.0

9 months ago

3.4.3

9 months ago

3.4.2

9 months ago

3.4.1

9 months ago

3.3.3

10 months ago

3.3.2

10 months ago

3.3.1

10 months ago

3.3.0

10 months ago

3.2.5

10 months ago

3.1.3

1 year ago

3.1.2

1 year ago

3.1.1

1 year ago

3.1.0

1 year ago

3.1.4

1 year ago

3.2.2

11 months ago

3.2.1

11 months ago

3.2.0

11 months ago

3.2.4

11 months ago

3.2.3

11 months ago

3.0.4

1 year ago

3.0.3

1 year ago

3.0.2

1 year ago

3.0.1

1 year ago

3.0.0

1 year ago

3.0.0-alpha.0

1 year ago

2.27.2

1 year ago

2.26.7

2 years ago

2.26.6

2 years ago

2.26.8

2 years ago

2.26.3

2 years ago

2.26.2

2 years ago

2.26.5

2 years ago

2.26.4

2 years ago

2.26.1

2 years ago

2.26.0

2 years ago

2.27.1

2 years ago

2.27.0

2 years ago

2.25.4

2 years ago

2.25.3

2 years ago

2.25.2

2 years ago

2.25.0

2 years ago

2.25.1

2 years ago

2.24.5

2 years ago

2.24.4

2 years ago

2.24.6

2 years ago

2.24.3

2 years ago

2.24.2

2 years ago

2.23.6

2 years ago

2.23.5

2 years ago

2.23.2

2 years ago

2.23.1

2 years ago

2.23.4

2 years ago

2.23.3

2 years ago

2.22.7

2 years ago

2.22.6

2 years ago

2.22.9

2 years ago

2.22.8

2 years ago

2.22.5

2 years ago

2.22.10

2 years ago

2.22.11

2 years ago

2.24.1

2 years ago

2.24.0

2 years ago

2.23.0

2 years ago

2.22.3

2 years ago

2.22.2

2 years ago

2.22.4

2 years ago

2.22.1

2 years ago

2.22.0

2 years ago

2.21.8

3 years ago

2.21.7

3 years ago

2.21.9

3 years ago

2.21.11

3 years ago

2.21.10

3 years ago

2.21.13

2 years ago

2.21.12

3 years ago

2.21.2

3 years ago

2.21.4

3 years ago

2.21.3

3 years ago

2.21.6

3 years ago

2.21.5

3 years ago

2.20.13

3 years ago

2.20.12

3 years ago

2.21.0

3 years ago

2.21.1

3 years ago

2.20.3

3 years ago

2.20.8

3 years ago

2.20.9

3 years ago

2.20.6

3 years ago

2.20.7

3 years ago

2.20.4

3 years ago

2.20.5

3 years ago

2.20.10

3 years ago

2.20.11

3 years ago

2.20.2

3 years ago

2.20.0

3 years ago

2.20.1

3 years ago

2.19.9

3 years ago

2.19.13

3 years ago

2.19.14

3 years ago

2.19.10

3 years ago

2.19.11

3 years ago

2.19.12

3 years ago

2.19.8

3 years ago

2.19.6

3 years ago

2.19.7

3 years ago

2.19.4

3 years ago

2.19.5

3 years ago

2.19.2

3 years ago

2.19.3

3 years ago

2.19.0

3 years ago

2.19.1

3 years ago

2.18.9

3 years ago

2.18.7

3 years ago

2.18.8

3 years ago

2.18.5

3 years ago

2.18.6

3 years ago

2.18.4

3 years ago

2.18.17

3 years ago

2.18.12

3 years ago

2.18.13

3 years ago

2.18.14

3 years ago

2.18.15

3 years ago

2.18.10

3 years ago

2.18.11

3 years ago

2.17.12

3 years ago

2.18.3

3 years ago

2.18.1

3 years ago

2.18.2

3 years ago

2.18.0

3 years ago

2.16.15

3 years ago

2.16.14

3 years ago

2.16.13

3 years ago

2.17.8

3 years ago

2.17.9

3 years ago

2.17.6

3 years ago

2.17.7

3 years ago

2.17.4

3 years ago

2.17.5

3 years ago

2.17.2

3 years ago

2.17.3

3 years ago

2.17.11

3 years ago

2.17.10

3 years ago

2.14.5

3 years ago

2.16.11

3 years ago

2.16.10

3 years ago

2.16.12

3 years ago

2.17.0

3 years ago

2.17.1

3 years ago

2.16.9

3 years ago

2.16.7

3 years ago

2.16.8

3 years ago

2.16.5

3 years ago

2.16.6

3 years ago

2.16.3

3 years ago

2.16.4

3 years ago

2.16.1

3 years ago

2.16.2

3 years ago

2.15.8

3 years ago

2.15.9

3 years ago

2.15.6

3 years ago

2.15.7

3 years ago

2.15.4

3 years ago

2.15.5

3 years ago

2.15.3

3 years ago

2.16.0

3 years ago

2.13.10

3 years ago

2.13.8

4 years ago

2.13.9

3 years ago

2.13.6

4 years ago

2.13.7

4 years ago

2.15.2

3 years ago

2.13.5

4 years ago

2.15.0

3 years ago

2.15.1

3 years ago

2.14.3

3 years ago

2.14.4

3 years ago

2.14.1

3 years ago

2.14.2

3 years ago

2.14.0

3 years ago

2.13.5-next.0

4 years ago

2.12.1-next.166

4 years ago

2.13.4

4 years ago

2.13.3

4 years ago

2.13.2

4 years ago

2.13.1

4 years ago

2.13.0

4 years ago