[Docs] How to create custom components?

[ezaca]

Hello, Semantic-UI community!

Question 1: How is the correct flow to extend the Semantic UI with a new component? The "Menu" and "Sidebar" components are not suitable for my case, so I tried to find a documentation about creating new components, but no lucky! If there is no docs for that, I suggest to create it. Or this is not the way you are working?

Question 2: As said, I am trying to create a custom "navbar" component that fits my case (there is no component with this name, so I used it).

• I have a fresh custom installation, following the docs. Everything seems good.
• First, I created a directory and file: /src/definitions/ezaca/navbar.less inspired by button.less
• After that, I updated tasks/config/defaults.js to include my navbar

gulp build worked, but my component was not included.

• Going to deeper levels, I found tasks/config/admin/realease.js with a list of components. Same result!
• After a while, I found tasks/config/project/install.js with the list of components I selected in the custom installation, so I added { name: "navbar", checked: true }

gulp build worked, but my component is never included.

I have tested other places, but it seems I have changed the entire Semantic project, but my file keeps being cruelly ignored. After some hours I realized I'm stuck and on need of community help.

How should I include a custom component in Semantic UI?

Thanks,
Eliakim.

[awgv]

Hi @ezaca, take a look at Semantic-UI#4212 that adds a component, the list of changed files should give you an idea on what needs to be changed or added.

[ezaca]

I have started a clean install. Now I added "bacon" in "elements", because Semantic loves bacon, for sure!
(And it will be side-by-side to "button" element).

• Step 1: I ran gulp build to build the new install.
• Step 2: added file src/definitions/elements/bacon.less (copied from button.less)
• Step 3: added src/site/elements/bacon.overrides and bacon.variables (empty)
• Step 4: added src/themes/default/elements/bacon.overrides and bacon.variables (empty)
• Step 5: updated src/semantic.less to import bacon (line duplicated from button)
• Step 6: updated src/theme.config to include bacon (line duplicated from button)
• Step 7: updated /tasks/config/admin/release.js to include bacon
• Step 8: updated /tasks/config/project/install.js to check bacon
• Step 9: updated /tasks/config/defaults.js to include bacon
• Step 10: ran gulp build again.
• Step 11: checked dist/components/bacon.*

OK. That's it! I think I have messed the things with the previous trial. It worked!
This is the step-by-step to include CSS (Javascript requires one more step on globals to load).
But steps 3 and 4 are optional. I don't know if there are more optional steps, but it seems that everyone have their own jobs.

I hope this helps others with the same problem (and to build the docs)!

Thank you for the help, Banandrew!

(Powered by Google Translator :D )

[ezaca]

Hmmmm, I think I got something here, but I don't know what it could be!

When I make an automatic installation, everything works perfectly, like I said before!

But I have chosen the custom setup and repeated the process, plus adding the component to semantic.json, and the custom component is not generated after build...

Some hint?

[siriwatknp]

@ezaca I follow your step but still not working.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[guylabbe]

@ezaca Thank you for instructions, I adjusted files in the same way and my new component is created and CSS added to semantic.css.