Semantic UI
ctrl+k
Enter a search term above to see results...
Semantic UI Component Structure
While inline templates and styles work well for small components, larger ones benefit from separate files. This lesson shows how to organize your component code across multiple files for better maintainability.
File Organization
A typical component consists of three files:
component.js- Component definition and logiccomponent.html- HTML templatecomponent.css- Component styles
This separation makes your code more maintainable and allows for better tooling support.
Loading Templates and Styles
The getText function loads external files at build time as shown in component.js. Although in practice with a build tool like Vite you can import the files directly using import statements.
- We import both
defineComponentandgetText - External files are loaded with
await getText('./filename') - The loaded content is passed to the component definition
Understanding Templates
The component.html file contains our markup with expressions:
- User data is accessed with expressions like
{user.name} - Attributes can contain expressions:
src="{user.avatar}" - The template is completely separate from the JavaScript logic
Component Styling
In component.css, we define styles that are scoped to our component:
- All your CSS is scoped via Shadow DOM to your component, so you can use simple selectors (like
.profile,.name) without needing prefixes. - CSS variables like
var(--standard-5)enable theming - Remember styles are encapsulated so use them however you want.
Try It Yourself
Extend the user profile to include additional information like email and location.
Hint:
- Add the new properties to the user object in
defaultState - Update the HTML template to display the new information
- Add appropriate styles for the new elements
Test