Search

Search results

  1. 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
  2. This example illustrates how you can build a custom radio button control using Selection and Selectable. When Selected, each button sets the value of an Attractor, which in turn changes the background color. The Attractor is used to make a smooth transition between colors. <App> <iOS.StatusBarConfig Style="Light" /> <Rectangle ux:Class="SelectableRectangle" Width="35" Height="35" CornerRadius="2" Color="{Property SelectionColor}"> <string ux:Property="ID" /> <float4 ux:...

    Custom control Selection
  3. In this example we'll implement a custom switch control by using the ToggleControl, with separate forward and backward animations. The design was inspired by this awesome piece by Ramakrishna V (which was later animated by Tsuriel). In this example, we will: * Define our own ToggleControl with our own custom animation * Utilize the BackwardAnimation attribute on TriggerAnimation in order to get separate activating and deactivating animations * Have animations with several steps, using Key...

    Custom control Gesture Animation
  4. This example shows how to create an immersive swipeable cards experience. The screen pops with color and you can even interact with the products shown! Inspiration: this good-looking cards animation by Artem Miskevich. All images are taken from unsplash.com. Animated folder and vinyl The products in our application are represented as "cards", so we start out by creating a reusable ux:Class component for them. Although the Card class holds the whole layout for a product, we'll take a look at h...

    Animation Basics Cards Custom control Layout Navigation Transition
  5. We discovered a blog post by MaterialUp with a nice list of UX designs and felt like taking on the challenge of turning it into code. Here is an implementation of their material up-vote design. Update: watch a video of Jake going through this example. The structure The structure can be split into three parts. The button, the background and the animation. The inner circles The actual button is composed of two filled circles. They each contain a Scaling with Factor="0" which gives them a size...

    Custom control Animation
  6. 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
  7. In this example, we are making a button with a fancy loading animation. The icons used in this example are from Font Awesome. Note: Although this example contains a complete app screen for context, the focus of this article is only on the button itself. Making the button We begin by declaring our SendButton component. It has a boolean property, IsLoading, which controls the animation. The animation begins when IsLoading becomes true, and plays until it becomes false. From here on, we'll refe...

    Animation Custom control
  8. 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
  9. Fuse has a flexible and powerful system to help you style your own and existing controls. Let's look at how it works by styling a ToggleControl control inspired by this example by Ramotion. In this example, we'll be using: * Subclassing of the ToggleControl to create our own control that has multiple states (in this case, on and off) * Allowing the user of the control to choose between swiping the thumb using SwipeGesture, or clicking the control to toggle the state The main things we are ...

    Custom control Gesture
  10. 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
  11. In this example, we make a custom toggle control using SwipeGesture and SwipingAnimation. <App> <Panel ux:Class="MyToggle" Width="80" Height="34" PrimaryColor="#9b59b6" SecondaryColor="#fff"> <float4 ux:Property="PrimaryColor" /> <float4 ux:Property="SecondaryColor" /> <bool ux:Property="IsActive" /> <SwipeGesture ux:Name="swipe" Length="46" Direction="Right" Type="Active" IsActive="{Property IsActive}" /> <SwipingAnimation Source="swipe"> ...

    Custom control Swipe gesture
  12. This example shows how you can make your own transitions for pages within a PageControl. The trick is setting Transition="None" on the PageControl, which removes the default page animations. This lets you add your own EnteringAnimation and ExitingAnimation to each page, which controls how they animate in and out. <App Background="#222"> <Page ux:Class="MyPage"> <EnteringAnimation> <Move X="-1" RelativeTo="ParentSize" /> </EnteringAnimation> <ExitingAnima...

    Navigation Custom control
  13. Using the JavaScript Camera API, we create a small app that lets you take pictures with a halftone effect. The effect parameters can then be tweaked with some custom styled slider controls. Taking a picture We create a function in JavaScript called takePicture which we bind to from UX. var picture = Observable('Icons/background.jpg'); var filterApplied = Observable(false); function takePicture(){ Camera.takePicture(1000, 1200).then(function(file){ picture.value = file; fi...

    Effects Custom control Camera
  14. This example shows how to make a neat loading button with different success and error states. The button The button uses a StateGroup to animate between four states: defaultState, loadingState, success and error. The check and error icons are contained inside WhileTrue triggers, which are activated by their respective states. The loading animation is achieved by animating the StartAngleDegrees and EndAngleDegrees properties of an Arc. <Panel ux:Class="LoadButton" Width="150" Height="60"> ...

    Custom control Animation