Label #Full Guide #Specially for newibe to drag and drop

Import Label Component , This is how Label component looks like.

This is viewer

This is properties

  1. Background - Set the background colour of your label
  2. Clickable - Default enabled, If it’s enable it will raise onClicked event i.e [on click yellow block]
3. Custom font typeface uses .ttf files

4. Ellipside

image

Center

You can see … in center that is called ellipsize

Right


You can see … in right that is ellipsize

  1. Set text font bold enable or disable
  2. Set text italic enable or disable
  3. Set text font size
  4. Default font typeface this are in-built font typeface by Niotron
HtmlFormate , HasMargin, Height,Width,Margin,Padding

image

  1. You can use html to make your own text style font
  2. Label as a component has in-built margins you can enable or disable it.
  3. H - Height of label a. match_parent[fill] b. wrap_content[auto]
  4. M - Margin of label yes this is best feature , you can set margin of the component by self.
  5. P - Padding of label
JustifyContent , Long Clickable,Max Lines , Opacity,Selectable

image

1. JustifyContent

Screenshot A -


Screenshot B -

You can see difference between Screenshot A and B , A’s have uneven distance between text and B’s have perfectly.

  1. LongClickable if enable register event onLongClick [onLongClicked yellowBlock]
  2. Max Lines - This allows you set custom Lines you wanted to show to users
  3. Opacity - It’s same as making component transparent from lower to higher transparency rate
5. Selectable

If it’s enabled then looks like this -

image
image

Show Links,Text, TextAlignment, TextColor, Visible,Word Spacing
1.ShowLinks

If Show Links = “All” then it looks like this -


Note - ShowLinks Only works if you set data from blocks section

2. TextAlignment

It contains Left ,Right,Center

Left/Default by niotron

Center

Right

Note - this only works if the width of label if not auto

  1. TextColour - set the text colour you like
  2. Visible - you can enable if you want to set label visible else disable
  3. Word Spacing - Under Construction

Let’s have a look at some blocks that aren’t in designer section

Click on the label to open blocks of the component

Niotron has compressed block after equal to in label component

LineSpacing

image

Outcome -

Set the space between two lines

Thanks @tanishraj for this topic :slightly_smiling_face:

:mask: Stay Safe Stay Helathy :mask:

5 Likes

Again an Awesome Guide @Bharat_Android_App :grinning:

1 Like

if i set font awesom then why coming extra text like #$

1 Like

Awesome guide @Bharat_Android_App

1 Like

Can you post some more details ? Like .ttf file and text you are putting in label

1 Like

test with companion what happen

it,s coming issue not solve after compenion

Show the issue here…

Once change lable text to Niotron

Delete that lable and add another label

it does not matter please check u in you device

@Re-vision_point You have set the font to Font Awesome.
It is similar to Material Icons.
If you select Font Awesome, then type brush, stars, angle-left, chess-king, trophy etc…
See here - https://fontawesome.com/v6.0/icons.