Sender 输入框

用于聊天的输入框组件。
使用

何时使用#

需要构建一个对话场景下的输入框。

代码演示#

基础用法,受控进行状态管理。

      加载中
    

通过 nxGlowingBorder 开启流光边框。

      加载中
    

通过 nxSubmitType 控制换行与提交模式。

      加载中
    
Upload Sample
Drag file here (just demo)
Support pdf, doc, xlsx, ppt, txt, image file types

使用 nxHeader 自定义文件上传示例。

      加载中
    
"Tell more about Ng Zorro X"

使用 nxHeader 做引用效果。

      加载中
    
`Shift + Enter` to submit

标记 nx-sender-extend-action 属性以添加自定义操作按钮(保留默认按钮)。

      加载中
    

使用 nxActions 属性完全自定义操作按钮(这将不保留内置默认按钮)。

      加载中
    

语音输入,需要用户同意麦克风权限。

      加载中
    

自定义语音逻辑,从而实现调用三方库的语音识别功能。

      加载中
    

API#

nx-sender#

属性说明类型默认值
[ngModel]输入框值,可双向绑定string-
[nxDisabled]是否禁用booleanfalse
[nxLoading]是否加载中booleanfalse
[nxValue]输入框值string-
[nxPlaceholder]输入框占位提示文字string-
[nxReadonly]是否让输入框只读booleanfalse
[nxSubmitType]键盘提交模式,可选回车键或 shift 组合回车键'enter' | 'shiftEnter''enter'
[nxAllowSpeech]是否允许语音输入boolean | NxSpeechConfigfalse
[nxActions]自定义操作按钮。当不需要默认操作按钮时,可以设为 nullTemplateRef | null -
[nxHeader]头部面板TemplateRef-
[nxFooter]底部内容TemplateRef-
(nxSubmit)点击发送按钮的回调EventEmitter<void>-
(nxCancel)点击取消按钮的回调EventEmitter<void>-
(nxChange)输入框值改变的回调EventEmitter<string>-

[nx-sender-prefix]#

使用 nx-sender-prefix 指令自定义 Sender 组件的前缀内容。

[nx-sender-extend-action]#

使用 nx-sender-extend-action 指令自定义其他操作按钮,这些额外自定义的按钮将与内置操作按钮组合出现。

需要注意的是,此时 nxActions 不能设置为 null,否则将不会显示任何操作按钮。

Interfaces#

interface NxSpeechConfig {
  // 当设置 `recording` 时,内置的语音输入功能将会被禁用。
  // 交由开发者实现三方语音输入的功能。
  recording?: boolean;
  onRecordingChange?: (recording: boolean) => void;
}