Docs
You are viewing an older version (0.0.5).
Go to the latest.
Text Transform
Change the capitalization of text content at render time without modifying the source string.
WText('upper case', className: 'uppercase');
WText('LOWER CASE', className: 'lowercase');
WText('capitalize this text', className: 'capitalize');
WText('No transformation here.', className: 'none');
Basic Usage
Apply a transform class in the className of any text widget. The transformation runs at render time; the original data string is never mutated:
WText('button label', className: 'uppercase font-semibold text-white');
WText('[email protected]', className: 'lowercase text-gray-700 dark:text-gray-300');
WText('first word only', className: 'capitalize');
Quick Reference
| Class | Transformation | Description |
|---|---|---|
uppercase |
toUpperCase() |
Converts all characters to uppercase. |
lowercase |
toLowerCase() |
Converts all characters to lowercase. |
capitalize |
First char upper, rest lower | Capitalizes the first character of the text. |
none |
No change | Leaves the text unchanged. |
Responsive Design
Combine with breakpoint prefixes to apply a transform only at certain screen sizes:
WText('label text', className: 'none md:uppercase');
Related Documentation
- Font Size — set text size.
- Text Color — apply color to text.
- Text Decoration — underline, overline, and strikethrough.
- WText — the primary text widget.