Tile UI Vue
Source code

Components

MessageScroller

Message scroller.

Use MessageScroller to scroll a message list with auto-anchoring.

Message1

Message2

Message3

Message4

Message5

Message6

Message7

Message8

import { MessageScrollerProvider, MessageScroller, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem, MessageScrollerButton } from '@tile-ui/vue';
 
export default function MessageScrollerDemo() {
	return (
		<MessageScrollerProvider>
			<MessageScroller style={{ maxHeight: '160px' }}>

Registry install

pnpm dlx shadcn@latest add @tile-ui/message-scroller

Package usage

import { MessageScroller, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem } from '@tile-ui/vue';
 
<MessageScroller>
	<MessageScrollerViewport>
		<MessageScrollerContent>
			<MessageScrollerItem>Message one</MessageScrollerItem>
		</MessageScrollerContent>
	</MessageScrollerViewport>
</MessageScroller>

Highlights

  • Viewport and content
  • Scroll anchor
  • Scroll buttons

Registry dependencies

Item Purpose
message-scroller Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

MessageScrollerItem

Prop Type Default
scrollAnchor boolean —

MessageScrollerButton

Prop Type Default
direction 'start' | 'end' —
PreviousMessageNextNativeSelect