wok-ui-text

Name: wok-ui-text
Availability: InStock
Author: peak

Render consistent text in wok-ui UIs with Text presets and chainable methods.

Updated Sep 14, 2023

Search Tags:#typography #typescript #text #ui-library #text-component #wok-ui #preset-text

Ready to run

npx skills add https://github.com/PeakTai/wok-ui --skill wok-ui-text

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: wok-ui-text
Source: https://github.com/PeakTai/wok-ui/tree/main/skills/wok-ui-text
Command: npx skills add https://github.com/PeakTai/wok-ui --skill wok-ui-text

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

wok-ui 的 Text 基础文本类与预设文本类型提供一致的排版和风格，降低文本呈现的心智负担。

Core Features & Use Cases

PrimaryBodyText: 主要正文，默认字号
SecondaryBodyText: 次要正文，灰色
SmallSecondaryBodyText: 小号次要正文
Text: 基本文本类，支持自定义标签、文本、颜色、字号、粗体等
链式方法: setText、setColor、setSize、setBold、onClick 等，便于快速组合与样式调整
使用场景：在页面中快速实现一致的文本风格、多态文本展示和可自定义的文本组件

Quick Start

通过示例创建 Text 与预设文本类型，并使用链式方法调整样式以实现页面文本展示。

Frequently Asked Questions about wok-ui-text

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I render consistent typography in a TypeScript web UI?▼

Render consistent typography by using a Text component with preset types like PrimaryBodyText and SecondaryBodyText, which provide unified styling and reduce configuration overhead across your web UI.

How do I apply custom text color and font size in a UI library?▼

Apply custom text color and font size by chaining methods like setColor and setSize on a Text instance, allowing quick style adjustments without modifying underlying CSS or component templates.

What are preset text types for standard text elements in front-end development?▼

Preset text types are predefined configurations like SecondaryBodyText for gray text and SmallSecondaryBodyText for smaller fonts, designed to maintain consistent visual hierarchy across standard text elements.

Can I attach click events to a text component using a chainable API?▼

Yes, attach click events to a text component by using the onClick chainable method, directly binding interaction logic to the text instance alongside style methods like setBold and setText.

Does this text component work without external dependencies?▼

The text component works without external dependencies, requiring no additional library installations or environment setup beyond your existing TypeScript wok-ui project structure.