UX Guide

A guide on various phoenix UI/UX components.

Contents

1. Theme
   • Light Theme
   • Dark Theme
2. UI Widgets
   • Confirmation dialogue
   • Dialogue with Text
3. UX Elements
   • Button

Theme

For changing the Theme of your editor go to View-> Themes-> Current Theme-> choose any theme you want.

Light Theme

It's is by default Theme

Dark Theme

In current Themes choose "Phoenix Dark" and click on done.

UI Widgets

Confirmation dialogue

Dialogue with text

UX Elements

Buttons

Steps to be followed

1. ENTER Ctrl-Shift-(C), it will automatically open the developers tool.
2. Go and hover over the button component.
3. In the developers console you can see button component.
4. Code will look something like this , look at the highlighted part. 5.In the highlighted part you can wish to make the changes according to your requirements in future. 6.This is how you redirect your button to any of the functionality like save ,cancel etc.