Custom Component: Navigation with border

Hello, is there a way I can create this component myself in wireframe sketcher? I would like to be able to set the available options as well as all different colors, for example the color of the small border when it is selected etc. Any options not required for this component I would like to hide them if possible. For example the border will never be rounded, so I want to fix it so people using it cannot change it.

https://codepen.io/platc2/pen/yLYOeLE

Hi Casimir,

I would recommend just using the standard List widget for this. If you really need a custom border color then you'll have to combine 2 widgets, for example a Panel and a List with no border. Any other details (properties) like this, that are not available in standard widgets, will have to be emulated by overlaying different widgets.

Generally speaking WireframeSketcher widgets expose by design as few properties as possible to prevent the user to concentrate to much on design details. So this is why there is generally no border color customization.

Hi Peter

What I was intending to do is create this custom widget somewhere in my asset folder, somehow like a library for our own widgets. It would be nice if I could simply select the correct entry in the property view and have the entry selected as well as the border colored. I don't mind touching some code if that is what I need to make this.

Basically I am trying to make it more confortable for the people designing a UI, not for the final result.

Another example could be a list widget where you can interactively (in the editor) click on a "+" to add another entry instead of editing the "text" value.

Casimir,

In this case you can try going through this guide for skinning widgets: https://wireframesketcher.com/skinning.html

Note however that you do not really create new widgets from scratch. You start with an existing widget that has the closest functionality for the desired widget, and then code a custom skin to change its rendering. You can not add or hide properties, just make existing properties work differently. So you wouldn't be able to add a "plus" button to change the way the text is edited. But you can create the custom look that is more close to your needs.

You can check our stencils for some code examples.