Content Type: Widget

Categories: Mobile

I’ll be back! :-) Use this button to create your own header with a back button that resembles the platform default button.

<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">NativeBackButton</h2><a id="user-content-nativebackbutton" class="anchor" aria-label="Permalink: NativeBackButton" href="#nativebackbutton"><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">Mendix native back button</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>Shows button with icon similar to the real native back button</li> <li>Responds to device dark mode setting by default</li> <li>Allows fixing dark or light mode regardless of device dark mode</li> <li>Useful when the default header with navigation does not work for you.</li> <li>Normal Mendix action property</li> <li>No real native back functionality; it is just a button.</li> </ul> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Styling</h2><a id="user-content-styling" class="anchor" aria-label="Permalink: Styling" href="#styling"><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">Because the widget has separate styling for dark/light and android/ios, several style classes are involved. The example below shows the color and font settings. Note that empty styles could be left out, these are here as example only.</p> <p dir="auto">Copy the snippet to your native style and adjust to your needs.</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export const customBackButtonStyle = { iosContainer: { }, androidContainer: { }, androidDarkImage: { tintColor: &quot;#f3f3f3&quot;, }, androidLightImage: { tintColor: &quot;#0d0d0d&quot;, }, iosDarkImage: { tintColor: &quot;#f3f3f3&quot;, }, iosLightImage: { tintColor: &quot;#0d0d0d&quot;, }, darkCaption: { color: &quot;#f3f3f3&quot;, fontSize: 17 }, lightCaption: { color: &quot;#0d0d0d&quot;, fontSize: 17 } }; "><pre><span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-s1">customBackButtonStyle</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">iosContainer</span>: <span class="pl-kos">{</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">androidContainer</span>: <span class="pl-kos">{</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">androidDarkImage</span>: <span class="pl-kos">{</span> <span class="pl-c1">tintColor</span>: <span class="pl-s">"#f3f3f3"</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">androidLightImage</span>: <span class="pl-kos">{</span> <span class="pl-c1">tintColor</span>: <span class="pl-s">"#0d0d0d"</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">iosDarkImage</span>: <span class="pl-kos">{</span> <span class="pl-c1">tintColor</span>: <span class="pl-s">"#f3f3f3"</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">iosLightImage</span>: <span class="pl-kos">{</span> <span class="pl-c1">tintColor</span>: <span class="pl-s">"#0d0d0d"</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">darkCaption</span>: <span class="pl-kos">{</span> <span class="pl-c1">color</span>: <span class="pl-s">"#f3f3f3"</span><span class="pl-kos">,</span> <span class="pl-c1">fontSize</span>: <span class="pl-c1">17</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">lightCaption</span>: <span class="pl-kos">{</span> <span class="pl-c1">color</span>: <span class="pl-s">"#0d0d0d"</span><span class="pl-kos">,</span> <span class="pl-c1">fontSize</span>: <span class="pl-c1">17</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div> </article></div>