antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库,遵循 Ant Design 规范。
79 lines (57 loc) • 2.62 kB
Markdown
---
nav:
path: /copilot
group:
title: Express
order: 3
toc: 'content'
---
# Sender
## When to use
Used when user input is required and a message is sent. Support adaptive height, send status, custom slot and other functions.
## Code Sample
### Basic Usage
<code src='../../copilot-demo/pages/Sender/index'></code>
## API
### Property
| Property | Description | Type | Default Value |
| --- | --- | --- | --- |
| className | Class Name | string | - |
| style | Style | string | - |
| value | Value of the input box | string | - |
| placeholder | Input box placeholder | string | "You can ask me any question ~' |
| disabled | Disable | boolean | false |
| loading | Sending | boolean | false |
### Event
| Event Name | Description | Type |
| --- | --- | --- |
| onChange | Triggered when input box content changes | (value: string) => void |
| onSubmit | Triggered when the send button is clicked | (value: string) => void |
| onCancel | Triggered when the Cancel button is clicked (in loading state) | () => void |
### Slots
| Name | Description |
| --- | --- |
| header | Custom header content, typically used to place input suggestions and shortcuts |
| input-header | Customize the content above the input box, which can be used to place pictures, reference copy, etc. |
| prefix | Custom input box prefix content |
| suffix | Customize the suffix content of the input box |
| footer | Custom bottom content that can be used to host some shortcut functions |
### Theme customization
#### Style Variables
Component provides the following CSS variables, which can be used to customize styles. For more information, see ConfigProvider Components.
| Variable name | Default Value | Description |
| --- | --- | --- |
| --sender-background-color | #ffffff | Input box background color |
| --sender-text-color | #333333 | Input box text color |
| --sender-placeholder-color | rgba(0, 0, 0, 0.25) | Input box placeholder text color |
| --sender-send-color | #1677ff | Send Button Color |
| --sender-input-text-color | #000000 | Input box content text color |
| --sender-input-caret-color | #1677ff | Input box cursor color |
| --sender-focus-border-color | #1677ff | Border color when the input box is focused |
| --sender-max-height | 192rpx | Maximum height of input box |
## FAQ
### 1. How do I handle the sending status?
Component provides the loading properties and onCancel events for handling send status:
- Send button appears loaded when loading = true
- Clicking the button in the loading state will trigger the onCancel event
- It is recommended to set the loading to false after sending