On This Page
getCodeFromModifiers()
Methods for generating HTML code from semantic modifiers.
getCodeFromModifiers()
Generates HTML code from semantic modifiers. Converts semantic attribute descriptions into complete HTML markup.
Syntax
reader.getCodeFromModifiers(modifiers, settings)Parameters
| Name | Type | Description |
|---|---|---|
| modifiers | string | Space-separated semantic modifiers |
| settings | Object | Code generation settings |
| settings.html | string | Inner HTML content |
| settings.plural | boolean | Generate plural component |
| settings.dialect | string | HTML dialect to use |
Returns
String containing the generated HTML.
Usage
import { SpecReader } from '@semantic-ui/specs';import buttonSpec from './button.spec.js';
const reader = new SpecReader(buttonSpec);const html = reader.getCodeFromModifiers('primary large', { html: 'Save',});
console.log(html);// <ui-button primary large>Save</ui-button>Generate with verbose dialect:
const html = reader.getCodeFromModifiers('primary large', { html: 'Save', dialect: 'verbose',});
console.log(html);// <ui-button emphasis="primary" size="large">Save</ui-button>Generate plural component:
const html = reader.getCodeFromModifiers('small', { html: '<ui-button>One</ui-button><ui-button>Two</ui-button>', plural: true,});
console.log(html);// <ui-buttons small>// <ui-button>One</ui-button>// <ui-button>Two</ui-button>// </ui-buttons>