On This Page
getTagName()
getComponentName()
formatDescription()
Utility methods for accessing component metadata and formatting descriptions.
getTagName()
Returns the HTML tag name for the component.
Syntax
reader.getTagName(options)Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| plural | boolean | this.plural | Return plural tag name |
| lang | string | ‘html’ | Output language |
Returns
String containing the tag name.
Usage
import { SpecReader } from '@semantic-ui/specs';import buttonSpec from './button.spec.js';
const reader = new SpecReader(buttonSpec);console.log(reader.getTagName()); // 'ui-button'
const pluralReader = new SpecReader(buttonSpec, { plural: true });console.log(pluralReader.getTagName()); // 'ui-buttons'getComponentName()
Returns the JavaScript export name for the component.
Syntax
reader.getComponentName(options)Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| plural | boolean | this.plural | Return plural export name |
| lang | string | ‘html’ | Output language |
Returns
String containing the export name.
Usage
import { SpecReader } from '@semantic-ui/specs';import buttonSpec from './button.spec.js';
const reader = new SpecReader(buttonSpec);console.log(reader.getComponentName()); // 'Button'
const pluralReader = new SpecReader(buttonSpec, { plural: true });console.log(pluralReader.getComponentName()); // 'Buttons'formatDescription()
Formats a description with the proper article and component name. Automatically prepends “A button can” or “An icon can” based on the component name.
Syntax
reader.formatDescription(description, options)Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| description | string | Description text to format | |
| plural | boolean | this.plural | Use plural component name |
Returns
String with formatted description.
Usage
import { SpecReader } from '@semantic-ui/specs';import buttonSpec from './button.spec.js';
const reader = new SpecReader(buttonSpec);console.log(reader.formatDescription('be emphasized'));// 'A button can be emphasized.'
const iconReader = new SpecReader(iconSpec);console.log(iconReader.formatDescription('indicate status'));// 'An icon can indicate status.'