末尾渐变

shad 使用移动渐变，让末尾文字逐渐显现。已经显示的内容保持不变，最后几个字符随着流式输出慢慢变得清晰。

使用方式

选择对应框架查看代码。Core 示例中的 mappers 传入 Core 输入，并显式启用 mapper；组件通过 streaming.effect 启用相同效果，并内置视觉渲染器。

import type { MapperPluggable } from '@fluxdown/core';
import { Smooth } from '@fluxdown/core-plugins/plugins/mapper/smooth';
import { Shad } from '@fluxdown/core-plugins/plugins/mapper/shad';

const mappers: MapperPluggable[] = [
  [Smooth, { enabled: true }],
  [Shad, { enabled: true }],
];

import { Fluxdown } from 'fluxdown';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return <Fluxdown streaming={{ effect: 'shad' }} text={text} />;
}

<script setup lang="ts">
import { Fluxdown } from '@fluxdown/vue';

defineProps<{ text: string }>();
</script>

<template>
  <Fluxdown :streaming="{ effect: 'shad' }" :text="text" />
</template>

<script lang="ts">
  import { Fluxdown } from '@fluxdown/svelte';

  type MessageProps = {
    text: string;
  };

  let { text }: MessageProps = $props();
</script>

<Fluxdown streaming={{ effect: 'shad' }} {text} />

import type { StreamingConfig } from '@fluxdown/angular';

import { Component, input } from '@angular/core';
import { Fluxdown } from '@fluxdown/angular';

@Component({
  selector: 'app-message',
  imports: [Fluxdown],
  template: `<fluxdown [streaming]="streaming" [text]="text()" />`,
})
export class Message {
  readonly text = input.required<string>();

  readonly streaming: StreamingConfig = { effect: 'shad' };
}

import { Fluxdown } from '@fluxdown/react-native';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return <Fluxdown streaming={{ effect: 'shad' }} text={text} />;
}

import { Fluxdown } from '@fluxdown/lynx';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return <Fluxdown streaming={{ effect: 'shad' }} text={text} />;
}

import { Fluxdown } from '@fluxdown/solid';

type MessageProps = {
  text: string;
};

export function Message(props: MessageProps) {
  return <Fluxdown streaming={{ effect: 'shad' }} text={props.text} />;
}

import { Fluxdown } from '@fluxdown/taro';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return <Fluxdown streaming={{ effect: 'shad' }} text={text} />;
}

平滑化默认启用。按排版需要调整末尾字符数与渐变宽度：

import type { MapperPluggable } from '@fluxdown/core';
import { Smooth } from '@fluxdown/core-plugins/plugins/mapper/smooth';
import { Shad } from '@fluxdown/core-plugins/plugins/mapper/shad';

const mappers: MapperPluggable[] = [
  [Smooth, { enabled: true }],
  [Shad, { enabled: true, length: 3, maskWidth: 18 }],
];

import { Fluxdown } from 'fluxdown';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      streaming={{ effect: ['shad', { length: 3, maskWidth: 18 }] }}
      text={text}
    />
  );
}

<script setup lang="ts">
import { Fluxdown } from '@fluxdown/vue';

defineProps<{ text: string }>();
</script>

<template>
  <Fluxdown
    :streaming="{ effect: ['shad', { length: 3, maskWidth: 18 }] }"
    :text="text"
  />
</template>

<script lang="ts">
  import { Fluxdown } from '@fluxdown/svelte';

  type MessageProps = {
    text: string;
  };

  let { text }: MessageProps = $props();
</script>

<Fluxdown
  streaming={{ effect: ['shad', { length: 3, maskWidth: 18 }] }}
  {text}
/>

import type { StreamingConfig } from '@fluxdown/angular';

import { Component, input } from '@angular/core';
import { Fluxdown } from '@fluxdown/angular';

@Component({
  selector: 'app-message',
  imports: [Fluxdown],
  template: `<fluxdown [streaming]="streaming" [text]="text()" />`,
})
export class Message {
  readonly text = input.required<string>();

  readonly streaming: StreamingConfig = {
    effect: ['shad', { length: 3, maskWidth: 18 }],
  };
}

import { Fluxdown } from '@fluxdown/react-native';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      streaming={{ effect: ['shad', { length: 3, maskWidth: 18 }] }}
      text={text}
    />
  );
}

import { Fluxdown } from '@fluxdown/lynx';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      streaming={{ effect: ['shad', { length: 3, maskWidth: 18 }] }}
      text={text}
    />
  );
}

import { Fluxdown } from '@fluxdown/solid';

type MessageProps = {
  text: string;
};

export function Message(props: MessageProps) {
  return (
    <Fluxdown
      streaming={{ effect: ['shad', { length: 3, maskWidth: 18 }] }}
      text={props.text}
    />
  );
}

import { Fluxdown } from '@fluxdown/taro';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      streaming={{ effect: ['shad', { length: 3, maskWidth: 18 }] }}
      text={text}
    />
  );
}

配置

以下字段属于 ['shad', config] 中的 shad 配置对象。

enabled 可选

类型： boolean

默认值： true

是否开启末尾渐变。

length 可选

类型： number

默认值： 10

参与渐变的末尾字符数。小数向下取整，负数和非有限值按 0 处理。

maskWidth 可选

类型： number

默认值： 15

渐变遮罩宽度，单位为像素。0 隐藏遮罩，负数按 0 处理，非有限值使用默认宽度。

#末尾渐变

#使用方式

#配置

#enabled 可选

#length 可选

#maskWidth 可选

末尾渐变

使用方式

配置

enabled 可选

length 可选

maskWidth 可选