Rolling Notification

⭐Star

👑Pioneer

TuiRollingNotification is used to display announcements, notifications, or news flashes. It is built on the TuiRolling engine and supports seamless vertical scrolling. The component intelligently handles text wrapping and truncation, and in single-item display mode, it can automatically switch the background color based on the semantic type of the current message to provide a strong visual alert.

Basic Usage

Multiple Item Display

By default, the component can display multiple notifications simultaneously.

• visibleLength: Controls the number of items displayed simultaneously within the visible area.
• interval: The time interval between scrolls (ms).

<script setup>
const list = [
  { icon: 'ti-home', text: 'System Notification: The server will undergo maintenance tonight.' },
  { icon: 'ti-star', text: 'Congratulations to the R&D department for achieving quarterly goals!' },
  { icon: 'ti-bell', text: 'You have a new approval pending; please handle it promptly.' }
];
</script>

<template>
  <TuiRollingNotification :visibleLength="2" :interval="3000">
    <TuiRollingNotificationItem 
      v-for="(item, i) in list" 
      :key="i"
      :index="i"
      :icon="`tui-icon ${item.icon}`"
    >
      {{ item.text }}
    </TuiRollingNotificationItem>
  </TuiRollingNotification>
</template>

Text Lines and Tooltips

The component features a built-in text overflow processing mechanism.

• itemLines: Sets the maximum number of lines to display for each notification. Content exceeding this limit is automatically truncated with an ellipsis (...).
• Automatic Tooltip: When text is truncated, hovering over the item will automatically trigger a Tooltip to display the full content (implemented based on the internal tipConfig).

<template>
  <TuiRollingNotification :itemLines="2" :visibleLength="1">
    <TuiRollingNotificationItem :index="0">
      This is a very long test text used to test automatic line wrapping and scrolling effects. 
      We hope this text has a certain length so that we can test the automatic wrapping of the text...
    </TuiRollingNotificationItem>
  </TuiRollingNotification>
</template>

Single Item Focus Mode

When visibleLength is set to 1, the component enters Focus Mode. In this state, the background color of the outer container dynamically changes to match the type (semantic type) of the current item, more effectively communicating the status of the message.

• tone: Controls the intensity of the background color tone. Options include base (Standard), strong (High intensity), weak (Low intensity), etc.

<template>
  <TuiRollingNotification :visibleLength="1" tone="base">
    
    <TuiRollingNotificationItem type="primary" :index="0">
      General Notification: System is running normally.
    </TuiRollingNotificationItem>
    
    <TuiRollingNotificationItem type="danger" :index="1">
      Emergency Alarm: Disk space is below 5%!
    </TuiRollingNotificationItem>
    
    <TuiRollingNotificationItem type="success" :index="2">
      Task Completed: Data backup has finished.
    </TuiRollingNotificationItem>

  </TuiRollingNotification>
</template>

Visual Styles

Supports frosted glass and motion blur effects to suit modern UI styles.

• transparent: Enables background semi-transparency.
• backgroundBlur: Enables background blur (frosted glass effect).
• motionBlur: Enables dynamic blur during scrolling to convey speed.

<TuiRollingNotification 
  transparent 
  backgroundBlur 
  motionBlur
  tone="weak"
>
  ...
</TuiRollingNotification>

Dynamic Data

The component fully supports dynamic data responsiveness. You can push or splice data in the list at any time, and the scrolling flow will update automatically.

// Example: Dynamically adding a new notification
const addNotice = () => {
  notiData.value.push({ type: 'warning', text: 'New notification added...' });
};

API Reference

TuiRollingNotification Props

Property	Type	Default	Description
visibleLength	Number	1	Number of items displayed in the visible area. When set to 1, background takeover mode is enabled.
itemLines	Number	1	Maximum number of lines for a single item. Content exceeding this is truncated and enables Tooltips.
interval	Number	-	Automatic scroll interval (ms).
duration	Number	0.2	Duration of a single scroll animation (s).
tone	String	'base'	Color tone style in single-item mode. Options: weak, base, strong, strongInvert, extremeInvert.
transparent	Boolean	false	Whether to enable semi-transparent background.
backgroundBlur	Boolean	true	Whether to enable background blur (Backdrop Filter).
motionBlur	Boolean	true	Whether to enable scrolling motion blur.
showControl	Boolean	true	Whether to show the right-side control bar (pause/page flip).
seamless	Boolean	true	Whether to enable seamless looping.
tipConfig	Object	-	Configuration object for the hover tooltip.
tagConfig	Object	-	Configuration object for the internal serial number Tag.
resizeObserver	String	'global'	Size monitoring strategy.

TuiRollingNotificationItem Props

Property	Type	Default	Description
index	Number	-	Index value (recommended to assist in animation calculation).
type	String	'default'	Semantic type. Options: primary, success, warning, danger, info, invert.
icon	String	'tui-icon ti-bell'	Class name for the left-side icon.

Emits

Event Name	Description	Callback Parameters
start	Triggered when scrolling starts.	-
rolling	Triggered continuously during the scrolling process.	(offset)