Search

Search results

  1. In this example, we're creating a custom slider component, inspired by this beautifully designed Fluid Slider by Virgil Pana. The last time we published custom sliders was in our Halftone effect example, so it's time for a re-do. With this new one we especially liked the gooey animation when the circle leaves the slider. Since we've introduced the Curve element in Fuse, we can make it work almost exactly like that. Let's dive in! Create the slider component We start out by creating a ux:Class...

    Custom control JavaScript Reusable components
  2. In this example we show how to create a drag-to-reorder behaviour on a list of items. This was made possible by the introduction of IdentityKey property on Each tag, which takes care of figuring out which items are where after a list has been modified. Making a component Since we want to have code that we can reuse in multiple places, we build a custom ux:Class component for our SortableList element. We will need to change the order of items that we pass in through ux:Property, so that list ha...

    Custom control JavaScript Reusable components Animation
  3. This example shows how we can create a segmented code input control with neat animations between focused and non-focused states. Design inspiration was taken from the clean and attractive Code input field concept by Samuel Kantala. Our SegmentedInput is a reusable component and contains both UX code for layout and JavaScript for the logic. Let's take a look at the basic structure of it: <StackPanel ux:Class="SegmentedInput" HitTestMode="LocalBounds"> <string ux:Property="Label" /> <str...

    Animation Custom control JavaScript Reusable components
  4. In this example we create a stopwatch native-module which we use to create a cool stopwatch app. While this is a good example of how to make custom UX components, it can also be pulled off using pure JavaScript logic. You can check out the JavaScript implementation of the app here. The Stopwatch module The Stopwatch class is used for the actual time measurement. It derives from NativeModule and defines four functions which we can call from JavaScript: public class Stopwatch : NativeModule { ...

    Uno Native module Custom trigger Reusable components
  5. In this example we will create a button that serves as a good alternative to a dropdown. We noticed this clever approach in the MailChimp mobile app and decided to recreate it in Fuse. That little button, when clicked, simply cycles through a list of modes unlike a dropdown menu that you select things from. Basic app structure Our MainView.ux holds the basic markup for our apps layout, as well as the top-level JavaScript data context responsible for showing the right numbers, depending on the...

    Custom control JavaScript Reusable components
  6. In this example we are using WhileActive and ActivatingAnimation to create a dynamic tab bar. The design was inspired by this awesome concept by Sergii Ganushchak. Icons are from Google's excellent Material Icons and the font is Roboto. The placeholder graphics is from Sergii's original Form prototype. The tab bar We use a regular PageControl for the navigation and make sure to set its TransitionEasing to BackOut. The tab bar itself is defined as follows: <Panel Dock="Top" Height="60" > ...

    Tabs Navigation Gesture Reusable components