Text (Alpha)

this feature is currently in its alpha stage of development as an early version, it may not include all planned functionalities and is subject to significant changes based on ongoing development and user feedback in this phase, the feature may contain bugs or behave unpredictably jigx recommends using standard, fully supported components until this feature has been fully tested and refined we encourage you to provide feedback and report any issues to help us improve and refine the feature for future releases the custom component text allows adding text inside custom components for example, adding text inside a card (alpha) docid 2xpezaoonprxlcoi5w5gv or view (alpha) docid\ i6qyq5zater2pnguoiwpu for steps on creating a custom component, see custom components (alpha) docid\ a 6fgd3xhjrzffzcmesvk configuration options you can use when and instanceid with component text , add the properties before the options property the available list of options is shown below options value align determine the text alignment, options are center left right color multiple, use intellisense to view the available list see jigx color palette https //docs jigx com/jigx color palette to view the different colors decoration line through underline emphasis change the text's brightness and boldness high low low medium medium numberoflines use a number to indicate the number of lines of text use an expression to determine the number of lines needed onpress multiple, use intellisense to view the list of available actions (buttons) docid\ nn4r7xekipj1fypcmpp 1 to call size adjust the size of the text, the following sizes are available extra large large medium regular small tiny value provide the text to be used you can use an expressions https //docs jigx com/expressions , as well as localization https //docs jigx com/localization weight determine how thick or bold the text must be, the following weights are available bold extra bold extra light light regular semi bold examples and code snippets the examples use a set of custom components called sections the sections are for titles, spacing, and context the sections code is available on github https //github com/jigx com/jigx samples/tree/main/quickstart/jigx samples/components/molecules organisms/sections text font sizes image\[]{src=" https //archbee image uploads s3 amazonaws com/0tqnkgjpswht3gqzqohdy dxyqts bnskpwjezxxb h 20241113 113134 png https //archbee image uploads s3 amazonaws com/0tqnkgjpswht3gqzqohdy dxyqts bnskpwjezxxb h 20241113 113134 png size="70" position="center" caption="text font size" alt="text font size"} this example shows the use of component text with various font sizes configured using the size property, all displayed within a card (alpha) docid 2xpezaoonprxlcoi5w5gv examples see the section component example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/components/molecules organisms/sections/section2 jigx see the custom component example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/components/basic elements/text/text 1 jigx see the jig example in github https //github com/jigx com/jigx samples/blob/d5eb38a64423482ed10703b0b2889709beee309c/quickstart/jigx samples/jigs/custom components/basic elements/text/text font sizes jigx text 1 jigx # components/text 1 jigx type component default children \ type component card options color color1 direction column children \ type component text options value extra large 123 \# configure the font size of the text size extra large \ type component text options value large 123 size large \ type component text options value medium 123 size medium \ type component text options value regular 123 size regular \ type component text options value small 123 size small \ type component text options value tiny 123 size tiny text font sizes jigx # jigs/text font sizes jigx title text (font sizes) type jig default icon text book children \# reference the custom component to display in the jig \# this custom component contains the view configuration to show the title \ type component custom component componentid section2 inputs title "font sizes" \# reference the custom component to display in the jig \ type component custom component componentid text 1 text with line through this example shows how to apply strikethrough formatting to font of various sizes by using the decoration line through property of the component text examples see the section component example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/components/molecules organisms/sections/section2 jigx see the custom component example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/components/basic elements/text/text 2 jigx see the jig example in github https //github com/jigx com/jigx samples/blob/d5eb38a64423482ed10703b0b2889709beee309c/quickstart/jigx samples/jigs/custom components/basic elements/text/text line through jigx text 2 jigx # components/text line through jigx type component default children \ type component card options color color2 direction column children \ type component text options value extra large size extra large \# decorate the text with a line through the text value decoration line through \ type component text options value large size large decoration line through \ type component text options value medium size medium decoration line through \ type component text options value regular size regular decoration line through \ type component text options value small size small decoration line through \ type component text options value tiny size tiny decoration line through # text line through jigx # jigs/text line through jigx title text (line through) type jig default icon text book children \# reference the custom component to display in the jig \# this custom component contains the view configuration to show the title \ type component custom component componentid section2 inputs title "line through" \# reference the custom component to display in the jig \ type component custom component componentid text 2 text with underlining this example shows how to underline text with various font sizes using the decoration underline property the text is contained in a yellow card (alpha) docid 2xpezaoonprxlcoi5w5gv examples see the custom component example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/components/basic elements/text/text 3 jigx see the jig example in github https //github com/jigx com/jigx samples/blob/d5eb38a64423482ed10703b0b2889709beee309c/quickstart/jigx samples/jigs/custom components/basic elements/text/text underline jigx see the section component example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/components/molecules organisms/sections/section2 jigx text 3 jigx # components/text 3 jigx type component default children \ type component card options color color3 direction column children \ type component text options value extra large size extra large \# underline text be using the decoration property decoration underline \ type component text options value large size large decoration underline \ type component text options value medium size medium decoration underline \ type component text options value regular size regular decoration underline \ type component text options value small size small decoration underline \ type component text options value tiny size tiny decoration underline # text underline jigx # jigs/text custom component jigx title text (underline) type jig default icon text book children \# reference the custom component to display in the jig \# this custom component contains the view configuration to show the title \ type component custom component componentid section2 inputs title "underline" \# reference the custom component to display in the underlined text in the jig \ type component custom component componentid text 3 text with emphasis this example shows the component text with various font sizes and emphasis styles, configured using the emphasis property, all displayed in a card (alpha) docid 2xpezaoonprxlcoi5w5gv examples see the custom component example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/components/basic elements/text/text 4 jigx see the jig example in github https //github com/jigx com/jigx samples/blob/d5eb38a64423482ed10703b0b2889709beee309c/quickstart/jigx samples/jigs/custom components/basic elements/text/text emphasis jigx see the section component example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/components/molecules organisms/sections/section2 jigx text 4 jigx # components/text 4 jigx type component default children \ type component card options color color4 direction column children \ type component text options value high size extra large \#add emphasis to text from bright to lighter emphasis high \ type component text options value medium size extra large emphasis medium \ type component text options value low medium size extra large emphasis low medium \ type component text options value low size extra large emphasis low text emphasis jigx # jigs/text emphasis jigx title text (emphasis) type jig default icon text book children \ type component custom component \# reference the custom component to display in the jig \# this custom component contains the view configuration to show the title componentid section2 inputs title "emphasis" \# reference the custom component to display text with emphasis in the jig \ type component custom component componentid text 4 text with alignment this example demonstrates various text alignments with varying font sizes using the align property, all displayed in a card (alpha) docid 2xpezaoonprxlcoi5w5gv examples see the custom component example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/components/basic elements/text/text 5 jigx see the jig example in github https //github com/jigx com/jigx samples/blob/d5eb38a64423482ed10703b0b2889709beee309c/quickstart/jigx samples/jigs/custom components/basic elements/text/text alignment jigx see the section component example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/components/molecules organisms/sections/section2 jigx text 5 jigx # components/text 5 jigx type component default children \ type component card options color color5 direction column children \ type component text options value extra large size extra large \# determine the alignment of the text value align right \ type component text options value large size large align right \ type component text options value medium size medium align center \ type component text options value regular size regular align center \ type component text options value small size small align left \ type component text options value tiny size tiny align left # text alignment jigx # jigs/text alignment jigx title text (alignment) type jig default icon text book children \# reference the custom component to display in the jig \# this custom component contains the view configuration to show the title \ type component custom component componentid section2 inputs title "alignment" \# reference the custom component to display text with alignment in the jig \ type component custom component componentid text 5 text over multiple lines this example demonstrates how to control the number of text lines displayed in component text using the numberoflines property, with the content displayed inside a card (alpha) docid 2xpezaoonprxlcoi5w5gv examples see the custom component example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/components/basic elements/text/text 6 jigx see the jig example in github https //github com/jigx com/jigx samples/blob/d5eb38a64423482ed10703b0b2889709beee309c/quickstart/jigx samples/jigs/custom components/basic elements/text/text number lines jigx see the section component example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/components/molecules organisms/sections/section2 jigx text 6 jigx # components/text 6 jigx type component default children \ type component card options direction column children \ type component text options value is designed to be inclusive, so remote team members truly feel like part of the group by being able to use your own device, everyone is seen and heard clearly — and no one ever sounds “far from the mic ” everyone stays engaged no one steals the spotlight size extra large \# determine how many lines of the text value can run over numberoflines 3 \ type component text options value is designed to be inclusive, so remote team members truly feel like part of the group by being able to use your own device, everyone is seen and heard clearly — and no one ever sounds “far from the mic ” everyone stays engaged no one steals the spotlight size large numberoflines 5 \ type component text options value is designed to be inclusive, so remote team members truly feel like part of the group by being able to use your own device, everyone is seen and heard clearly — and no one ever sounds “far from the mic ” everyone stays engaged no one steals the spotlight size medium numberoflines 3 \ type component text options value is designed to be inclusive, so remote team members truly feel like part of the group by being able to use your own device, everyone is seen and heard clearly — and no one ever sounds “far from the mic ” everyone stays engaged no one steals the spotlight size regular numberoflines 3 \ type component text options value is designed to be inclusive, so remote team members truly feel like part of the group by being able to use your own device, everyone is seen and heard clearly — and no one ever sounds “far from the mic ” everyone stays engaged no one steals the spotlight size small numberoflines 3 \ type component text options value is designed to be inclusive, so remote team members truly feel like part of the group by being able to use your own device, everyone is seen and heard clearly — and no one ever sounds “far from the mic ” everyone stays engaged no one steals the spotlight size tiny numberoflines 3 text number lines jigx # jigs/text number lines jigx title text (number lines) type jig default icon text book children \# reference the custom component to display in the jig \# this custom component contains the view configuration to show the title \ type component custom component componentid section2 inputs title "number of lines" \# reference the custom component to display text spread over multiple lnies in the jig \ type component custom component componentid text 6 text with color this example shows how to set the color of text of varying font sizes, and spread over a number of lines by using the color property, with the content displayed in a card (alpha) docid 2xpezaoonprxlcoi5w5gv examples see the custom component example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/components/basic elements/text/text 7 jigx see the jig example in github "https //github com/jigx com/jigx samples/blob/d5eb38a64423482ed10703b0b2889709beee309c/quickstart/jigx samples/jigs/custom components/basic elements/text/text colored jigx see the section component example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/components/molecules organisms/sections/section2 jigx text 7 jigx # components/text 7 jigx type component default children \ type component card options direction column children \ type component text options value is designed to be inclusive, so remote team members truly feel like part of the group size extra large numberoflines 3 \# change the color of the text value color primary \ type component text options value is designed to be inclusive, so remote team members truly feel like part of the group size large numberoflines 3 color color1 \ type component text options value is designed to be inclusive, so remote team members truly feel like part of the group size medium numberoflines 3 color color2 \ type component text options value is designed to be inclusive, so remote team members truly feel like part of the group size regular numberoflines 3 color color3 \ type component text options value is designed to be inclusive, so remote team members truly feel like part of the group size small numberoflines 3 color color4 \ type component text options value is designed to be inclusive, so remote team members truly feel like part of the group size tiny numberoflines 3 color color5 # text colored jigx # jigs/text colored jigx title text (colored) type jig default icon text book children \# reference the custom component to display in the jig \# this custom component contains the view configuration to show the title \ type component custom component componentid section2 inputs title "colored text" \# reference the custom component to display text in different colors in the jig \ type component custom component componentid text 7 text weights these examples demonstrate the various options for using text weights to ensure thickness and boldness of text combined with varying sizes, displayed in a card (alpha) docid 2xpezaoonprxlcoi5w5gv by combining the size , and weight properties, you can achieve the desired appearance examples see the custom component example in < github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/components/basic elements/text/text 11 jigx see the jig example in github https //github com/jigx com/jigx samples/blob/d5eb38a64423482ed10703b0b2889709beee309c/quickstart/jigx samples/jigs/custom components/basic elements/text/text regular weights jigx see the section component example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/components/molecules organisms/sections/section2 jigx text 11 jigx # components/text 11 jigx \# see the yaml for text 8 jigx to text 13 jigx in github, \# for the other weight examples, link provided above type component default children \ type component card options color color6 direction column children \ type component text options value extra bold size regular \# change the thickness and boldness of the text value weight extra bold \ type component text options value bold size regular weight bold \ type component text options value semi bold size regular weight semi bold \ type component text options value regular size regular weight regular \ type component text options value light size regular weight light \ type component text options value extra light size regular weight extra light # text regular weights jigx # jigs/text custom component jigx title text type jig default icon chat children \# reference the custom component to display in the jig \# this custom component contains the view configuration to show the title \ type component custom component componentid section2 inputs title extra large font weights \# reference the custom component to display in the jig \ type component custom component componentid text font weights extra large