# 滚到底按钮

## 使用方法

一颗浮在底部的「滚到底」按钮，用户离开最新消息往上翻的时候才出现。平时是一个小圆点图标，淡入淡出；有新消息时会长出文字。`ChatLayout` 默认就会画它：想换掉，往 `scrollButton` 插槽塞自己的控件；想彻底不要，把 `showScrollButton` 设成 `false`。

```ts
import { ChatLayoutScrollButton } from '@astryx-vue/core/Chat'
```

## 示例

常见的用法、变化和状态。

### ChatLayoutScrollButton — 文案

同一个按钮配不同文案，分别对应不同的提醒：有新消息、有几条未读回复，或者只是一句通用的「滚到底」。

```vue
<script setup lang="ts">
import { ChatLayoutScrollButton } from '@astryx-vue/core/Chat'
import { VStack } from '@astryx-vue/core/Stack'
import { Text } from '@astryx-vue/core/Text'
</script>

<template>
  <VStack :gap="4">
    <Text type="supporting" color="secondary">
      Labels expand the button to give context
    </Text>
    <VStack :gap="3">
      <ChatLayoutScrollButton is-visible />
      <ChatLayoutScrollButton is-visible label="New messages" />
      <ChatLayoutScrollButton is-visible label="3 unread replies" />
    </VStack>
  </VStack>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `isVisible` | `boolean` | — | 必填。按钮显示不显示。隐藏时它仍然挂在页面上，好做淡出，同时带 `inert`，不会被聚焦到。 |
| `label` | `string` | 本地化的“Scroll to bottom” | 传给它会展开成一枚带文字的胶囊。不传就只是一个向下的箭头图标。 |

## 事件

| 事件 | 参数 | 说明 |
| --- | --- | --- |
| `click` | — | 按钮被按了。`ChatLayout` 用它来清掉新消息提示并滚到底。 |