Semantic UI
ctrl+k
Enter a search term above to see results...
On This Page
getCodeFromModifiers()
Generating HTML
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>