Content Type: Widget

Categories: Mobile

Text which allows parts to be styled separately, allowing the text to break naturally at the end of the container.

<div id="readme" class="md" data-path="README.md"><article class="markdown-body entry-content container-lg" itemprop="text"><div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">NativeStyledText</h2><a id="user-content-nativestyledtext" class="anchor" aria-label="Permalink: NativeStyledText" href="#nativestyledtext"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">One text which allows parts to be styled separately. This will allow for the text to break naturally at the end of the container.</p> <p dir="auto">You can of course in Mendix place multiple text widgets after each other. However, if the content does not fit, one or more entire text widgets will go to the next line, probably causing unnatural line breaks.</p> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Features</h2><a id="user-content-features" class="anchor" aria-label="Permalink: Features" href="#features"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li>Specify multiple texts</li> <li>Optionally style each text</li> <li>Optionally limit the text to a specified number of lines</li> </ul> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Usage</h2><a id="user-content-usage" class="anchor" aria-label="Permalink: Usage" href="#usage"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li>Place the widget on the page</li> <li>Add the texts you want to display.</li> <li>For each text you can enter the name of the class to add to the text</li> <li>Each text inherits the default.</li> <li>Create the custom class in your theme.</li> </ul> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Custom style class</h2><a id="user-content-custom-style-class" class="anchor" aria-label="Permalink: Custom style class" href="#custom-style-class"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">You <strong>must</strong> create custom style classes for the widget to work correctly. (The widget cannot access the app theme so the app theme should overrule the widget default style.)</p> <p dir="auto">If the style classes are not created or are incorrect the widget will render all text in green.</p> <p dir="auto">The content below is an example.</p> <p dir="auto"><strong>The first export</strong> defines a default for all NativeStyledText widget instances.</p> <p dir="auto"><strong>The second export</strong> is an example that defines a <code>nameStyle</code> and an <code>appointmentTime</code> style. These names can be used as text class for the text items on the widget. The <code>nextAppointmentStyledText</code> should be placed as class on the widget. This an example only, you can define as many as you want.</p> <p dir="auto">For Mendix 9 use <code>font.colorParagraph</code> i.s.o <code>font.color</code>.</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { brand, font } from &quot;../custom-variables&quot;; // Take the default values from the native theme // eslint-disable-next-line camelcase export const itvisors_nativestyledtext_NativeStyledText = { container: {}, defaultTextStyle: { color: font.color, fontSize: font.size } }; // Custom text styles. // Add a block for each style. All TextStyle properties are allowed export const nextAppointmentStyledText = { container: {}, nameStyle: { color: brand.success }, appointmentTime: { color: brand.primary } }; "><pre class="notranslate"><code>import { brand, font } from "../custom-variables"; // Take the default values from the native theme // eslint-disable-next-line camelcase export const itvisors_nativestyledtext_NativeStyledText = { container: {}, defaultTextStyle: { color: font.color, fontSize: font.size } }; // Custom text styles. // Add a block for each style. All TextStyle properties are allowed export const nextAppointmentStyledText = { container: {}, nameStyle: { color: brand.success }, appointmentTime: { color: brand.primary } }; </code></pre></div> <p dir="auto">Place these in a separate JavaScript file. It is assumed the file is placed in a subfolder under <code>styles/native/app</code> Depending on your folder structure you may need to adjust the import statement</p> <p dir="auto">In custom.js, add your new file. Replace <code>app-custom</code> with the folder name you used to put the file in.</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export * from &quot;./app-custom/nativeStyledText&quot;;"><pre class="notranslate"><code>export * from "./app-custom/nativeStyledText"; </code></pre></div> <p dir="auto">An example can be found <a href="https://github.com/Itvisors/mendix-NativeStyledText/tree/main/test/theme/styles/native/app">in the GitHub repo</a>.</p> </article></div>