├── NeumorphicUIKit-IcedBlue_20220713224721.zip ├── LICENSE └── README.md /NeumorphicUIKit-IcedBlue_20220713224721.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristinekolodziejski/NeumorphicUIKitIcedBlue/HEAD/NeumorphicUIKit-IcedBlue_20220713224721.zip -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Kristine Kolodziejski 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NeumorphicUIKitIcedBlue 2 | Iced blue neumorphic UI kit for your Power Apps! 3 | 4 | ![icedblue](https://user-images.githubusercontent.com/86930618/178976443-c8b52136-246b-492c-96d8-2ceb0c6c041d.gif) 5 | 6 | 7 | Welcome to the new world of design in Power Apps! This toolkit has been curated using a fusion of out-of-the-box controls and code to extend the existing control set and take your Power Apps UI to the next level! 8 | 9 | The toolkit has a number of components which have various properties that you can customise without going into the code itself. If you do however wish to make any adjustments etc., you have the ability to edit the code directly within the application from the Components pane. Please note that this kit is packaged as a canvas app in a .zip file, so you'll need to import it as a Canvas App. Follow these steps to install: 10 | 11 | From the menu on the left, navigate to Apps 12 | 13 | ![image](https://user-images.githubusercontent.com/86930618/179360444-338db42a-25b2-404e-a645-090e225a0513.png) 14 | 15 | Then click on 'Import Canvas App' 16 | 17 | ![image](https://user-images.githubusercontent.com/86930618/179360459-e3cab90d-145b-4589-ae00-e1f5495069c6.png) 18 | 19 | Then click on Upload 20 | 21 | ![image](https://user-images.githubusercontent.com/86930618/179360474-1388c5f8-6211-4d53-9f4c-697e226145ca.png) 22 | 23 | Give it a minute or two to process 24 | 25 | ![image](https://user-images.githubusercontent.com/86930618/179360497-ce1f9eb9-d7b3-47ec-8e69-590ed5c486cb.png) 26 | 27 | And then click Import 28 | 29 | ![image](https://user-images.githubusercontent.com/86930618/179360506-3a6e5ff6-e270-4081-9c57-f1ff9c61b813.png) 30 | 31 | The toolkit comprises of two screens each – these screens allow you to pick the themes of all your controls without having to change them individually. The first screen has lineal gradients, and the second screen allows you to pick and mix. The values of those are kept in the AppOnStart collections including the Default theme which is stored in a variable. 32 | 33 | Please see below a breakdown of the toolkit - I hope you enjoy it and I'd love to hear your feedback! 😊 34 | 35 | Lineal gradient colour picker 36 | 37 | ![image](https://user-images.githubusercontent.com/86930618/178851940-34a4e8db-7f2e-439c-bf36-e64626afd59b.png) 38 | 39 | Pick’n’mix 40 | 41 | ![image](https://user-images.githubusercontent.com/86930618/178851945-1c564775-9775-4c63-a268-80b73a4694a0.png) 42 | 43 | 44 | Button 45 | 46 | ![image](https://user-images.githubusercontent.com/86930618/178851964-5b255ebf-3107-4e13-b134-cc329906bf93.png) 47 | ![image](https://user-images.githubusercontent.com/86930618/178851975-b0d768d9-02af-4227-9ec0-0e620527714a.png) 48 | ![image](https://user-images.githubusercontent.com/86930618/178851979-bedac40d-15b0-426e-8c5d-4a912d519f13.png) 49 | 50 | 51 | This control is fully scalable so you can extend them both ways. It has the following properties: 52 | - IconName – to make life easier and save you from having to find SVG code online, I have embedded 24most common icons into the button. So all you need to do in this property is type one of the following names of supported icons: 53 | calendar, 54 | bag, 55 | basket, 56 | clipboard, 57 | upload, 58 | download, 59 | email, 60 | home, 61 | user, 62 | print, 63 | phone, 64 | trash, 65 | cancel, 66 | edit, 67 | new, 68 | back, 69 | next, 70 | refresh, 71 | filter, 72 | settings, 73 | chart, 74 | notification, 75 | bookmark, 76 | alarm, 77 | 78 | - IconColorActive – this is the colour of the icon if you turn off the lineal gradient property, 79 | - IconColour – this is the colour of the icon when you haven’t pressed it, 80 | - LinealGradient – this is a Boolean property. If you toggle this to true, your icons will have lineal gradient applied to them. If you toggle it to false, they will only have a single tone. 81 | - LinealGradientColor1 – this is the first lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc). 82 | - LinealGradientColor2 – this is the second lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc). 83 | - BorderRadius – allows you to specify the border radius of your button 84 | - OnSelect – this is where you will put the OnSelect code 85 | 86 | Star Rating 87 | 88 | ![image](https://user-images.githubusercontent.com/86930618/178851988-e732f663-ca62-47cd-bd2f-611d4cc7ec50.png) 89 | ![image](https://user-images.githubusercontent.com/86930618/178851993-34d19dab-1d98-4cc7-942b-7be6b8479597.png) 90 | ![image](https://user-images.githubusercontent.com/86930618/178851999-818037f8-7b33-4664-9cd3-37aaff1c0bcd.png) 91 | 92 | 93 | 94 | This control has 5 input properties: 95 | - Rating – the number of selected stars, 96 | - MaxRating – this is a static number and at present this control only supports 5 stars. 97 | - BoxShadow – choose between inset and convex box shadow, 98 | - LinealGradient1 – this is the first lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc). 99 | - LinealGradient2 – this is the second lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc) 100 | 101 | This control has an output value just like the usual star rating. If you’d like to reference it or patch it to a data source, you do it the usual way – StarRating.Value. 102 | 103 | Date Picker 104 | 105 | ![image](https://user-images.githubusercontent.com/86930618/178852006-89f97dcc-ada2-4384-a2b9-61e42f94740e.png) 106 | ![image](https://user-images.githubusercontent.com/86930618/178852012-2bc28e19-7a11-4bfb-b3db-2b908eadd62d.png) 107 | ![image](https://user-images.githubusercontent.com/86930618/178852014-61f4e3cf-daad-4c39-9c7f-25d0f75caf21.png) 108 | 109 | 110 | This control has 2 input properties: 111 | - LinealGradient1 – this is the first lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc). 112 | - LinealGradient2 – this is the second lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc) 113 | It also has an output property called DateSelected. If you’d like to patch the selected date to a data source, you’ll do it the usual way – DatePicker.DateSelected. 114 | 115 | Toggle 116 | 117 | ![image](https://user-images.githubusercontent.com/86930618/178852022-509d69ee-1c5f-44ab-9a9f-7e93cbe783e9.png) 118 | ![image](https://user-images.githubusercontent.com/86930618/178852028-f8855972-0aad-439b-ba80-11dec75f7afe.png) 119 | ![image](https://user-images.githubusercontent.com/86930618/178852034-e64211fa-9e74-4868-bc8f-3c63f0113b6f.png) 120 | 121 | 122 | The toggle has 7 properties: 123 | - LinealGradientColour1 – this is the first lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc). 124 | - LinealGradientColour2 – this is the second lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc) 125 | - Label – Boolean value defining whether you want the on/off label to be visible, 126 | - LabelTrueText – just like the usual toggle, this is the true text, 127 | - LabelFalseText – same as above, this is the false text, 128 | - FontSize – define the size of the text in your label, 129 | - IconVisible – define whether you want the ‘power’ icon to be visible on the toggle 130 | 131 | The toggle has an output property called Value. If you’d like to patch the value of the toggle to a data source, you will use Toggle.Value. 132 | 133 | Checkbox 134 | 135 | ![image](https://user-images.githubusercontent.com/86930618/178852041-da3476d8-b9c3-4ad5-b745-771a2648dc8d.png) 136 | ![image](https://user-images.githubusercontent.com/86930618/178852045-51979731-b52f-4731-9bc3-152e479d56b7.png) 137 | ![image](https://user-images.githubusercontent.com/86930618/178852048-c42d7bd3-fe65-45de-8220-861e7b654789.png) 138 | 139 | 140 | Checkbox has the following 6 properties: 141 | 142 | - IconColorActive – this is the colour of the icon if you turn off the lineal gradient property, 143 | - IconColour – this is the colour of the icon when you haven’t pressed it, 144 | - LinealGradient – this is a Boolean property. If you toggle this to true, your icons will have lineal gradient applied to them. If you toggle it to false, they will only have a single tone. 145 | - LinealGradientColor1 – this is the first lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc). 146 | - LinealGradientColor2 – this is the second lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc). 147 | - OnSelect – this is where you will put the OnSelect code 148 | It also has an output property called Checked. If you’d like to patch the value of the checkbox to a data source, you will use Checkbox.Value. 149 | 150 | Pill progress bar – animated 151 | 152 | ![image](https://user-images.githubusercontent.com/86930618/178852054-dae95874-7214-4578-9fe7-5b7104c74b83.png) 153 | ![image](https://user-images.githubusercontent.com/86930618/178852062-bc6dbc20-2919-4157-a998-0e7dcd13f369.png) 154 | ![image](https://user-images.githubusercontent.com/86930618/178852068-e05743e4-633a-470a-b9a4-caad574d1151.png) 155 | 156 | 157 | This progress bar has the following 5 properties: 158 | - Value – define the progress that you want to show. This should be an integer without % - the control will automatically calculate the %. 159 | - MaxValue – this is the total value that you want to calculate the percentage against, 160 | - LinealGradientColor1 – this is the first lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc). 161 | - LinealGradientColor2 – this is the second lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc). 162 | - LabelSize – text size of the percentage label 163 | 164 | Slider 165 | 166 | ![image](https://user-images.githubusercontent.com/86930618/178852079-75c30ecc-fce8-4f8f-8911-c72f01a730e2.png) 167 | ![image](https://user-images.githubusercontent.com/86930618/178852081-03e0a4ec-a8ea-42f1-904e-7644c2ca5590.png) 168 | ![image](https://user-images.githubusercontent.com/86930618/178852085-7d9ddd18-0367-453f-97e7-0c2ea13c5cdf.png) 169 | 170 | 171 | This control has 4 properties: 172 | - Min – minimum value on the slider, 173 | - Max – max value on the slider, 174 | - LinealGradientColor1 – this is the first lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc). 175 | - LinealGradientColor2 – this is the second lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc). 176 | 177 | This control has an output property called Value. If you’d like to patch it to a data source, you will use Slider.Value. 178 | 179 | Text input 180 | 181 | ![image](https://user-images.githubusercontent.com/86930618/178852093-0b209467-50a2-4a6e-a710-03b0cf55858f.png) 182 | ![image](https://user-images.githubusercontent.com/86930618/178852100-630982a9-fec8-408b-a5c4-6c92a4453444.png) 183 | 184 | This control has 6 properties: 185 | - Font size – define the size of the text, 186 | - HintText – the text that will be visible before any text is entered, 187 | - Mode – define whether you want the text to be single line, multiline or password. Please use the TextMode function (e.g. TextMode.Multiline). 188 | - LinealGradientColor1 – this is the first lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc). 189 | - LinealGradientColor2 – this is the second lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc). 190 | 191 | 192 | Card convex, inset, transparent and transparent background 193 | 194 | ![image](https://user-images.githubusercontent.com/86930618/178852112-46c42774-a3d0-487f-addd-54095152a7f3.png) 195 | ![image](https://user-images.githubusercontent.com/86930618/178852116-51e32a9a-25c3-412c-ab62-b4a65dea7952.png) 196 | ![image](https://user-images.githubusercontent.com/86930618/178852123-28e6dc52-d511-4331-8e99-701d4f238457.png) 197 | 198 | These are decorative cards that allow you to group elements into a form etc. They only have one property – BorderRadius. They are fully scalable so you can expand them both ways. 199 | 200 | Pill progress bar – responsive 201 | 202 | ![image](https://user-images.githubusercontent.com/86930618/178852128-ab9419a4-fe49-4bea-b274-92f93c9a3c36.png) 203 | ![image](https://user-images.githubusercontent.com/86930618/178852132-4b0e4c7b-ae11-40b1-96fc-33849e2ef9f1.png) 204 | 205 | 206 | 207 | This control works the same as the animated pill bar, the difference is that although it is not animated, it is fully responsive and can be expanded both ways. 208 | - Value – define the progress that you want to show. This should be an integer without % - the control will automatically calculate the %. 209 | - MaxValue – this is the total value that you want to calculate the percentage against, 210 | - LinealGradientColor1 – this is the first lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc). 211 | - LinealGradientColor2 – this is the second lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc). 212 | 213 | Mobile navigation menu 214 | 215 | ![image](https://user-images.githubusercontent.com/86930618/178852139-2ee9d08b-3275-42cc-bbd7-70b348534858.png) 216 | ![image](https://user-images.githubusercontent.com/86930618/178852142-556fcfaf-0959-4542-bbd8-dde0df257246.png) 217 | ![image](https://user-images.githubusercontent.com/86930618/178852146-0a3c6716-44da-4cf9-a0cd-5788a7cb7de2.png) 218 | 219 | 220 | This component is based on another component I have previously built. Please follow the instructions here https://github.com/misskristine94/MobileNavigationMenuComponent. 221 | 222 | 223 | 224 | 225 | 226 | 227 | --------------------------------------------------------------------------------