Giter Club home page Giter Club logo

sukiui's Introduction


Suki is the name of my dog :-)

✨ SukiUI

Desktop UI Library for AvaloniaUI !


⚠️ Mobile Controls will be removed in a future version and moved to a new mobile library named Cheryl UI

A lot of work has been done on mobile controls to create a 'serious' mobile solution for Avalonia in Cheryl UI. SukiUI will now focus only on desktop controls.


🎉 New 5.1.0 Release Notes
- Some new animations and slight style changes
- Switch animation smoother and reacting when long press before switching when released


- Trying to add features to existing controls to add rich interactions trough AttachedProperties and extensions methods.

New code involved :

ButtonSignIn.ShowProgress();   // Use ShowProgress Method on a Button to show Loading Circle
ButtonSignIn.HideProgress();   // Hide the Loading Circle

PasswordTextBox.Error("Wrong Password");   // Trigger the error animation with a custom message

Moreover, I want to create "quick animations" that can be triggered on any control via extension methods. For new there are :


AnyControl.Vibrate(TimeSpan.FromSeconds(1));   // Make the control vibrate during 1 second
AnyControl.Jump();   // Make the control do a double jump animation

AnyControl.Animate<double>(WidthProperty, 100, 200);    // animate the width of a control from 100 to 200


I want to focus the development of the library on these kind of interactions. I consider the style of the library almost definitive, and now it is important to make the controls rich and featureful. These kind of interactions are now the user projection of the quality of the software, so it is important to me to make it acessible for the desktop developers and included in the library.

So, please do not hesitate to suggest a micro interaction like this first example.
New Control : SettingsLayout

Orginazing a nice and elegant settings page has always been a kind of nightmare/mystery to me. How to organize these little TextBoxes and Switches in so much window space ? How to handle the window resizing ? ..

This is why I ended up with this control to try to solve that layout problem while trying to be elegant and responsive in the style of SukiUI. SettingsLayout Documentation

You have an idea ? A simple critic of the library ? Do not hesitate to send me an email to share your personal feedback.

👐 Demo

Desktop Controls

Some desktop design "sketch" using SukiUI 5.0.0 :

Desktop Controls Documentation

Mobile Controls

Mobile Controls Documentation

📦 Usage

Installation


Controls Documentation

sukiui's People

Contributors

dmitrygolubenkov avatar ebinjohn avatar kikipoulet avatar nixtar avatar r-yatian avatar wmchuang avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.