spz-typist#

#When to use

spz-typist displays text with a typewriter effect, typing out characters one by one.

#Supported layout

• container
• logic

#Example

#Basic usage

<spz-typist content="Hello, World!" speed="50"></spz-typist>

#Dynamic text updates

<spz-typist id="my-typist" content="Initial text" speed="30"></spz-typist>

<button @tap="my-typist.setContent(content='Updated text content')">
  Update Text
</button>

#Using child elements

You can also place content directly as child elements:

<spz-typist layout="container" speed="50">
  Welcome to
  <strong>spz-typist</strong>
  component!
</spz-typist>

#Attributes

#Actions

#setContent

Sets the content programmatically. This will clear all previous state and restart typing from the beginning.

Parameters:

• content (string): The new content to display

Example:

<spz-typist id="my-typist" content="Hello"></spz-typist>
<button @tap="my-typist.setContent(content='Hello, World!')">
  Update Content
</button>

#Events

#Status attributes

#Behavior

• The component starts typing automatically when laid out.
• If the content attribute is updated, typing restarts from the beginning with the new content.
• Supports nested child elements and SPZ elements (waits for SPZ elements to complete before typing their content).
• Auto-scrolls to keep the current typing line visible.

#Notes

• This component does not expose a setSpeed action; to change speed dynamically, update the speed attribute directly.