Styling labels with borders

[Ian]

Hi,
I'm trying to work out how to add a border with rounded edges around a label in NativeScript. It's a fairly common way to decorate or emphasis text in apps and, in HTML/CSS, would be achieved with the following markup:

HTML
<div class="withBorder"><span>Label name</span></div>

CSS
.withBorder {
   border: solid 1px #f00;
   border-radius: 3px;
}

I guess adding support for border and border-radius CSS selectors in NativeScript would be one suggestion. Or is there a way to do it already using panels and geometry properties?

Regards, Ian

[Alex]

Hello Ian,
Thanks for the feedback.
Currently, NativeScript does not support border CSS property and there is no Border content view that can be used to add borders around UI views. We will probably implement one of those approaches in the future to support borders in NativeScript apps.

Regards,
Alex
Telerik

 

 

[Ian]

Hi Alex,
Thanks for the update. Can you suggest any current options for achieving a display as illustrated in the screenclip below - I thought I'd try porting part of an existing KendoUI Mobile app over to NativeScript and wanted to show a time inside a coloured background.

If you are considering future options for this type of requirement, I'd imagine a method such as using CSS border/border-radius attributes would be best as that would presumably generate a vector-based background shape that would scale automatically to different phone resolutions. The prospect of having to create lots of image files for different handsets would be rather tedious.
Regards, Ian

[Vlad]

Hello Ian,

We've added Border component and you will be able to use it in the next version. Here is an example:

<Border cornerRadius="10" borderWidth="2" borderColor="#FF0000" style="background-color: blue">
     <Label text="Some text"  />
</Border>

Regards,
Vlad
Telerik

 

 

[Ian]

Hi Vlad,
That's great news - a very useful enhancement.

Thanks, Ian

[Ian]

Hi Vlad,
Apologies for opening up this post again but I had a question about your proposed support for the border cornerRadius property you're planning to introduce.

As well as coding something like cornerRadius="5", will it be possible to specify four separate values (as you do now on the margin selector) so that you could have different radius values for the top-right, bottom-right, bottom-left and top-left corners? 

This would allow you to easily style horizontal or vertical button groups where only some of the corners need to be rounded as illustrated in the attached screenclip. The corresponding XML might be something like:
    <Border cornerRadius="0 0 5 5" ... />
    <Border cornerRadius="5 5 0 0" ... />

Will that be possible? 

Best regards, Ian

[Erjan Gavalji]

Hi Ian,

No need for apologies!

It's a really nice suggestion which we will do our best to have in a short time (hopefully in a release or two). The telerik points in your account got increased as a sign of appreciation.

Kind regards,
Erjan Gavalji
Telerik