├── materialdesign components ├── sourcecode │ ├── ComponentReferences.json │ ├── Connections │ │ └── Connections.json │ ├── Src │ │ ├── TextInput.fx.yaml │ │ ├── App.fx.yaml │ │ ├── Screen1.fx.yaml │ │ ├── Calendar.fx.yaml │ │ ├── Bottom Navigation.fx.yaml │ │ ├── ContrastChecker.fx.yaml │ │ ├── EditorState │ │ │ ├── App.editorstate.json │ │ │ ├── TextInput.editorstate.json │ │ │ ├── Screen1.editorstate.json │ │ │ └── ContrastChecker.editorstate.json │ │ ├── Components │ │ │ ├── cmp_MD_Gallery.json │ │ │ ├── cmp_MD_SideSheet.fx.yaml │ │ │ ├── cmp_MD_Checkbox.fx.yaml │ │ │ ├── cmp_MD_ProgressIndicator.fx.yaml │ │ │ ├── cmp_MD_Toggle.fx.yaml │ │ │ ├── cmp_MD_Toggle.json │ │ │ ├── cmp_MD_ContrastChecker.fx.yaml │ │ │ ├── cmp_MD_SideSheet.json │ │ │ ├── cmp_MD_RadioButton.fx.yaml │ │ │ ├── cmp_MD_AppBar_top.fx.yaml │ │ │ ├── cmp_MD_Bottom_Navigation.json │ │ │ ├── cmp_MD_RadioButton.json │ │ │ ├── cmp_MD_Snackbar.fx.yaml │ │ │ ├── cmp_MD_AppBar_top.json │ │ │ ├── cmp_MD_Dialog.fx.yaml │ │ │ ├── cmp_MD_Gallery.fx.yaml │ │ │ ├── cmp_MD_Slider.json │ │ │ ├── cmp_MD_Slider.fx.yaml │ │ │ ├── cmp_MD_Bottom_Navigation.fx.yaml │ │ │ ├── cmp_MD_Dropdown.json │ │ │ └── cmp_MD_Banner.fx.yaml │ │ ├── SVG-Icons.fx.yaml │ │ ├── Snackbar.fx.yaml │ │ ├── NavigateTo.fx.yaml │ │ ├── Buttons.fx.yaml │ │ └── SetupPage.fx.yaml │ ├── DataSources │ │ ├── 2.K3Mf9I2ZSkCceYWHGMs9oQ%3d%3d.colItems.json │ │ ├── 15.K3Mf9I2ZSkCceYWHGMs9oQ%3d%3d.colItems.json │ │ ├── RadioSample.json │ │ ├── DropDownSample.json │ │ └── CustomGallerySample.json │ ├── Other │ │ └── References │ │ │ └── NamedValues.json │ ├── Assets │ │ └── SampleImage.json │ ├── CanvasManifest.json │ ├── Entropy │ │ └── checksum.json │ └── pkgs │ │ ├── rectangle_2.3.0.xml │ │ └── circle_2.3.0.xml ├── assets │ ├── template.png │ ├── cmp_MD_Slider.gif │ ├── cmp_MD_Toggle.gif │ ├── cmp_MD_banner.gif │ ├── cmp_MD_button.png │ ├── cmp_MD_dialog.gif │ ├── cmp_MD_Checkbox.gif │ ├── cmp_MD_Snackbar.gif │ ├── cmp_MD_Snackbar.png │ ├── cmp_MD_backdrop.gif │ ├── cmp_MD_backdrop.png │ ├── cmp_MD_snackbar.gif │ ├── cmp_MD_SideSheet.png │ ├── cmp_MD_appBarTop.gif │ ├── cmp_MD_appBarTop.png │ ├── cmp_MD_textinput.gif │ ├── cmp_MD_textinput.png │ ├── cmp_MD_timepicker.gif │ ├── cmp_MD_BottomNavigation.png │ ├── cmp_MD_button_examples.png │ ├── cmp_MD_contrastchecker.png │ ├── cmp_MD_navigationdrawer.gif │ ├── cmp_MD_bottom_navigation.png │ ├── cmp_MD_genericInputFrame.gif │ ├── cmp_MD_progressindicator.gif │ └── cmp_MD_textInputExamples.png ├── solution │ ├── MD_Template_v1_1.msapp │ ├── MD_Template_v1_2_experimental.msapp │ ├── MaterialDesignCustomPage_1_0_0_3.zip │ └── MaterialDesignComponentLibrary_1_0_0_8.zip ├── docs │ ├── ContrastChecker.md │ ├── Toggle.md │ ├── ProgressIndicator.md │ ├── Slider.md │ ├── SideSheet.md │ ├── BottomNavigation.md │ ├── Checkbox.md │ ├── Timepicker.md │ ├── GenericInputFrame.md │ ├── AppBarTop.md │ ├── Dialog.md │ ├── NavigationDrawer.md │ ├── Snackbar.md │ ├── Banner.md │ ├── Button.md │ ├── TextInput.md │ └── Template.md └── intro.md ├── docs ├── accessibility.md └── design-consistency.md ├── LICENSE └── README.md /materialdesign components/sourcecode/ComponentReferences.json: -------------------------------------------------------------------------------- 1 | [] -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Connections/Connections.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/TextInput.fx.yaml: -------------------------------------------------------------------------------- 1 | TextInput As screen: 2 | 3 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/App.fx.yaml: -------------------------------------------------------------------------------- 1 | App As appinfo: 2 | BackEnabled: =false 3 | 4 | -------------------------------------------------------------------------------- /materialdesign components/assets/template.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/template.png -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Screen1.fx.yaml: -------------------------------------------------------------------------------- 1 | Screen1 As screen: 2 | Fill: =defaults.elementBackgroundColor 3 | Width: =1500 4 | 5 | -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_Slider.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_Slider.gif -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_Toggle.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_Toggle.gif -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_banner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_banner.gif -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_button.png -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_dialog.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_dialog.gif -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_Checkbox.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_Checkbox.gif -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_Snackbar.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_Snackbar.gif -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_Snackbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_Snackbar.png -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_backdrop.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_backdrop.gif -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_backdrop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_backdrop.png -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_snackbar.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_snackbar.gif -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_SideSheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_SideSheet.png -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_appBarTop.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_appBarTop.gif -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_appBarTop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_appBarTop.png -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_textinput.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_textinput.gif -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_textinput.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_textinput.png -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_timepicker.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_timepicker.gif -------------------------------------------------------------------------------- /materialdesign components/solution/MD_Template_v1_1.msapp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/solution/MD_Template_v1_1.msapp -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_BottomNavigation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_BottomNavigation.png -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_button_examples.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_button_examples.png -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_contrastchecker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_contrastchecker.png -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_navigationdrawer.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_navigationdrawer.gif -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_bottom_navigation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_bottom_navigation.png -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_genericInputFrame.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_genericInputFrame.gif -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_progressindicator.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_progressindicator.gif -------------------------------------------------------------------------------- /materialdesign components/assets/cmp_MD_textInputExamples.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/assets/cmp_MD_textInputExamples.png -------------------------------------------------------------------------------- /materialdesign components/solution/MD_Template_v1_2_experimental.msapp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/solution/MD_Template_v1_2_experimental.msapp -------------------------------------------------------------------------------- /materialdesign components/solution/MaterialDesignCustomPage_1_0_0_3.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/solution/MaterialDesignCustomPage_1_0_0_3.zip -------------------------------------------------------------------------------- /materialdesign components/solution/MaterialDesignComponentLibrary_1_0_0_8.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pnp/powerapps-designtoolkit/HEAD/materialdesign components/solution/MaterialDesignComponentLibrary_1_0_0_8.zip -------------------------------------------------------------------------------- /materialdesign components/sourcecode/DataSources/2.K3Mf9I2ZSkCceYWHGMs9oQ%3d%3d.colItems.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "IsComponentScoped": true, 4 | "IsSampleData": false, 5 | "IsWritable": true, 6 | "Name": "2.K3Mf9I2ZSkCceYWHGMs9oQ==.colItems", 7 | "Type": "CollectionDataSourceInfo" 8 | } 9 | ] -------------------------------------------------------------------------------- /materialdesign components/sourcecode/DataSources/15.K3Mf9I2ZSkCceYWHGMs9oQ%3d%3d.colItems.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "IsComponentScoped": true, 4 | "IsSampleData": false, 5 | "IsWritable": true, 6 | "Name": "15.K3Mf9I2ZSkCceYWHGMs9oQ==.colItems", 7 | "Type": "CollectionDataSourceInfo" 8 | } 9 | ] -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Calendar.fx.yaml: -------------------------------------------------------------------------------- 1 | Calendar As screen: 2 | 3 | cmp_MD_Calendar_1 As cmp_MD_Calendar: 4 | ZIndex: =1 5 | 6 | Label4 As label: 7 | Height: =70 8 | Size: =21 9 | Text: =cmp_MD_Calendar_1.selectedDate 10 | Width: =560 11 | X: =27 12 | Y: =987 13 | ZIndex: =2 14 | 15 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Bottom Navigation.fx.yaml: -------------------------------------------------------------------------------- 1 | "'Bottom Navigation' As screen": 2 | 3 | Button2 As button: 4 | Fill: |- 5 | =ColorFade(ColorValue("#6200EE"), 50%) 6 | Height: =70 7 | Size: =24 8 | Text: ="Button" 9 | Width: =280 10 | X: =40 11 | Y: =40 12 | ZIndex: =2 13 | 14 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Other/References/NamedValues.json: -------------------------------------------------------------------------------- 1 | { 2 | "NamedValues": [ 3 | { 4 | "Kind": "Page", 5 | "Name": "Custom Page Template", 6 | "Value": "custompage:cat_custompagetemplate_231d0" 7 | }, 8 | { 9 | "Kind": "Page", 10 | "Name": "Page Kindergarten", 11 | "Value": "custompage:r2p_pagekindergarten_8cd51" 12 | } 13 | ] 14 | } -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Assets/SampleImage.json: -------------------------------------------------------------------------------- 1 | { 2 | "Content": "Image", 3 | "FileName": "/ctrllib/image/images/SampleImage.svg", 4 | "IsSampleData": true, 5 | "IsWritable": false, 6 | "Name": "SampleImage", 7 | "Path": "/ctrllib/image/images/SampleImage.svg", 8 | "ResourceKind": "Uri", 9 | "RootPath": "ms-appx:///ctrllib/image/images/SampleImage.svg", 10 | "Schema": "i", 11 | "Type": "ResourceInfo" 12 | } -------------------------------------------------------------------------------- /materialdesign components/sourcecode/DataSources/RadioSample.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "Data": "[{\"Value\":1},{\"Value\":2}]", 4 | "IsSampleData": true, 5 | "IsWritable": false, 6 | "Name": "RadioSample", 7 | "OrderedColumnNames": [ 8 | "Value" 9 | ], 10 | "OriginalName": "RadioSample", 11 | "OriginalSchema": "*[Value:n]", 12 | "Schema": "*[Value:n]", 13 | "Type": "StaticDataSourceInfo" 14 | } 15 | ] -------------------------------------------------------------------------------- /materialdesign components/sourcecode/DataSources/DropDownSample.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "Data": "[{\"Value\":\"1\"},{\"Value\":\"2\"},{\"Value\":\"3\"}]", 4 | "IsSampleData": true, 5 | "IsWritable": false, 6 | "Name": "DropDownSample", 7 | "OrderedColumnNames": [ 8 | "Value" 9 | ], 10 | "OriginalName": "DropDownSample", 11 | "OriginalSchema": "*[Value:s]", 12 | "Schema": "*[Value:s]", 13 | "Type": "StaticDataSourceInfo" 14 | } 15 | ] -------------------------------------------------------------------------------- /docs/accessibility.md: -------------------------------------------------------------------------------- 1 | # Accessibility 2 | 3 | - is not a not a luxury, but the foundation of good user experience. 4 | - needs to be top of mind when developing applications 5 | - almost everyone has situational, temporary or permanent accessibility needs: [Inclusive Design]( https://www.microsoft.com/design/inclusive) 6 | - Requirements to fulfill special access needs are opportunities to to creatively solve challenges instead of thinking in constraints 7 | - Accessibility first fosters a culture that serves many as a result 8 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/ContrastChecker.fx.yaml: -------------------------------------------------------------------------------- 1 | ContrastChecker As screen: 2 | 3 | cmp_MD_ContrastChecker_1 As cmp_MD_ContrastChecker: 4 | backgroundColorHex: =varBackgroundColorHex 5 | Fill: =ColorValue(cmp_MD_ContrastChecker_1.backGroundColor) 6 | Height: =480 7 | primaryColorHex: =varPrimaryColorHex 8 | Y: =42 9 | 10 | cmp_MD_ContrastChecker_2 As cmp_MD_ContrastChecker: 11 | backgroundColorHex: =defaults.elementBackgroundColorHex 12 | Fill: =ColorValue(cmp_MD_ContrastChecker_2.backGroundColor) 13 | Height: =480 14 | Y: =576 15 | ZIndex: =2 16 | 17 | -------------------------------------------------------------------------------- /materialdesign components/docs/ContrastChecker.md: -------------------------------------------------------------------------------- 1 | # Contrast Checker 2 | 3 | ## Description 4 | 5 | The contrast checker is not for active use in your app, but to make sure, that your color choices match W3.org accessability criteria. 6 | 7 | ## Demo 8 | 9 | ![ContrastChecker](../assets/cmp_MD_contrastchecker.png) 10 | 11 | ## Custom properties 12 | 13 | None 14 | 15 | ## Tips and Tricks 16 | 17 | * see Reference-link for further info 18 | * use this also to check other color combinations you use in your app 19 | 20 | ## Known limitations 21 | 22 | None 23 | 24 | ## Version 25 | 26 | | Version | description | 27 | | --- | --- | 28 | | 1.0.0 | First version | 29 | 30 | ## Reference 31 | 32 | https://www.m365princess.com/blogs/color-contrast-ratio-checker/ 33 | -------------------------------------------------------------------------------- /docs/design-consistency.md: -------------------------------------------------------------------------------- 1 | # Design Consistency 2 | 3 | One of the core principles of User Interface design is consistency. Consistency in UI design is concerned with making sure elements in a user interface are uniform. They’ll look and behave the same way. This helps constantly prove a user’s assumptions about the user interface right, creating a sense of control, familiarity, and reliability. 4 | 5 | ## positive implications 6 | 7 | - less friction 8 | - looks coherent 9 | - works harmoniously 10 | - helps with usability and learnability 11 | - seamless user experience 12 | - increases user satisfaction 13 | - improves DevX 14 | - enhances reusability 15 | 16 | Overall, design consistency help people using software intuitively. 17 | 18 | ## Visual Design consistency 19 | 20 | is achieved by matching 21 | 22 | - colors 23 | - typography 24 | - image styles 25 | - UI elements 26 | 27 | and more. 28 | -------------------------------------------------------------------------------- /materialdesign components/docs/Toggle.md: -------------------------------------------------------------------------------- 1 | # Toggle 2 | 3 | ## Description 4 | 5 | Toggles allow users to select one or more items from a set. Toggles can turn an option on or off. 6 | 7 | ## Demo 8 | 9 | ![Button](../assets/cmp_MD_Toggle.gif) 10 | 11 | ## Custom properties 12 | 13 | | property | description | 14 | | --- | --- | 15 | | default | `bool` default state of the checkbox | 16 | | onSelect | `behavioural property` formulas you want to execute when selecting the checkbox | 17 | | outsideMargin | `int` in px - margin to all sides of the checkbox, which allows easy spacing with other elements | 18 | | toggleSize | `int` in px - size of the toggle circle | 19 | | lineSize | `int` in px - width of the line | 20 | 21 | ## Tips and Tricks 22 | 23 | * It's a toggle - it toggles things, not more, not less! 24 | 25 | ## Known limitations 26 | 27 | * none 28 | 29 | ## Version 30 | 31 | | Version | description | 32 | | --- | --- | 33 | | 1.0.0 | First version | 34 | -------------------------------------------------------------------------------- /materialdesign components/docs/ProgressIndicator.md: -------------------------------------------------------------------------------- 1 | # Progress Indicator 2 | 3 | ## Description 4 | 5 | The Progress indicator expresses an unspecified wait time. 6 | 7 | ## Demo 8 | 9 | ![ProgressIndicator](../assets/cmp_MD_progressindicator.gif) 10 | 11 | ## Custom properties 12 | 13 | | property | description | 14 | | --- | --- | 15 | | transitionStart| `bool` put your Visible-variable or `Self.Visible` in here to start the animation | 16 | 17 | ## Tips and Tricks 18 | 19 | * if you have functions, that take a few seconds to process use this indicator to show the user something is going on in the background 20 | * at the start of your code, set the indicator to visible, in the end set it to invisible 21 | * place the indicator right beneath your top bar 22 | 23 | ## Known limitations 24 | 25 | None 26 | 27 | ## Version 28 | 29 | | Version | description | 30 | | --- | --- | 31 | | 1.0.0 | First version | 32 | 33 | ## Reference 34 | 35 | https://m2.material.io/components/progress-indicators 36 | -------------------------------------------------------------------------------- /materialdesign components/docs/Slider.md: -------------------------------------------------------------------------------- 1 | # Slider 2 | 3 | ## Description 4 | 5 | Sliders allow users to make selections from a range of values. 6 | 7 | ## Demo 8 | 9 | ![Slider](../assets/cmp_MD_Slider.gif) 10 | 11 | ## Custom properties 12 | 13 | | property | description | 14 | | --- | --- | 15 | | valueDefault | `int` default position of the slider | 16 | | valueMin | `int` minimum selectable value | 17 | | valueMax | `int` maximum selectable value | 18 | | toggleSize | `int` in px - size of the toggle circle | 19 | | lineSize | `int` in px - strength of the line | 20 | | outsideMargin | `int` in px - margin to all sides of the button, which allows easy spacing with other elements (don't use 0, otherwise ) | 21 | | showInputLabel | `bool` show additional label to input text via keyboard | 22 | | showLabel | `bool` display current value on a label on top of the toggle | 23 | 24 | ## Known limitations 25 | 26 | * none 27 | 28 | ## Version 29 | 30 | | Version | description | 31 | | --- | --- | 32 | | 1.0.0 | First version | 33 | 34 | ## Reference 35 | 36 | https://m2.material.io/components/sliders 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Microsoft 365 Community 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 | -------------------------------------------------------------------------------- /materialdesign components/docs/SideSheet.md: -------------------------------------------------------------------------------- 1 | # Side sheet 2 | 3 | ## Description 4 | 5 | Side sheets are surfaces containing supplementary content that are anchored to the right edge of the screen. 6 | You have to provide the content, buttons/text/input elements are not part of the component. 7 | 8 | ## Demo 9 | 10 | ![SideSheet](../assets/cmp_MD_SideSheet.png) 11 | 12 | ## Custom properties 13 | 14 | | property | description | 15 | | --- | --- | 16 | | onClose | `behavioural property` formulas you want to execute when clicking on the close icon | 17 | | iconSize | `int` in px - size of the close icon | 18 | | title | `string` title on top | 19 | | adjustPaddingLeft | `int` in px - use to adjust, if Icon & Text are off-center. You can use negative numbers to move everything left | 20 | 21 | ## Tips and Tricks 22 | 23 | * add your own content underneath the title 24 | * pack component & content into a container 25 | 26 | ## Known limitations 27 | 28 | * none 29 | 30 | ## Version 31 | 32 | | Version | description | 33 | | --- | --- | 34 | | 1.0.0 | First version | 35 | 36 | ## Reference 37 | 38 | https://m2.material.io/components/sheets-side 39 | -------------------------------------------------------------------------------- /materialdesign components/docs/BottomNavigation.md: -------------------------------------------------------------------------------- 1 | # Bottom Navigation 2 | 3 | ## Description 4 | 5 | Navigate between screens on mobile devices. 6 | 7 | ## Demo 8 | 9 | ![BottomNavigation](../assets/cmp_MD_BottomNavigation.png) 10 | 11 | ## Custom properties 12 | 13 | | property | description | 14 | | --- | --- | 15 | | items | A `table` with the fields `id` (int), `svgIcon` (svg-Code as string), `title` (string) and `screen` (if you want to navigate) | 16 | | iconSize | `int` in px - size of the svg-Icons | 17 | | navigate | `bool` to control if a click on the menu items navigate to the specified screen | 18 | | onSelect | Everything else that should happen on the click of the menu item, best used with `Switch(ThisItem.id, 1, FirstButtonOnSelectAction, 2, ...)` | 19 | 20 | ## Tips and Tricks 21 | 22 | * switch between Navigation Drawer and Bottom Navigation on size breakpoints, when building responsive apps 23 | * don't use more than five items 24 | 25 | ## Known limitations 26 | 27 | * none 28 | 29 | ## Version 30 | 31 | | Version | description | 32 | | --- | --- | 33 | | 1.0.0 | First version | 34 | 35 | ## Reference 36 | 37 | https://m2.material.io/components/bottom-navigation 38 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/DataSources/CustomGallerySample.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "Data": "[{\"SampleHeading\":\"Lorem ipsum 1\",\"SampleImage\":\"/ctrllib/image/images/SampleImage.svg\",\"SampleText\":\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"},{\"SampleHeading\":\"Lorem ipsum 2\",\"SampleImage\":\"/ctrllib/image/images/SampleImage.svg\",\"SampleText\":\"Suspendisse enim metus, tincidunt quis lobortis a, fringilla dignissim neque.\"},{\"SampleHeading\":\"Lorem ipsum 3\",\"SampleImage\":\"/ctrllib/image/images/SampleImage.svg\",\"SampleText\":\"Ut pharetra a dolor ac vehicula.\"},{\"SampleHeading\":\"Lorem ipsum 4\",\"SampleImage\":\"/ctrllib/image/images/SampleImage.svg\",\"SampleText\":\"Vestibulum dui felis, fringilla nec mi sed, tristique dictum nisi.\"}]", 4 | "IsSampleData": true, 5 | "IsWritable": false, 6 | "Name": "CustomGallerySample", 7 | "OrderedColumnNames": [ 8 | "SampleImage", 9 | "SampleHeading", 10 | "SampleText" 11 | ], 12 | "OriginalName": "CustomGallerySample", 13 | "OriginalSchema": "*[SampleHeading:s, SampleImage:i, SampleText:s]", 14 | "Schema": "*[SampleHeading:s, SampleImage:i, SampleText:s]", 15 | "Type": "StaticDataSourceInfo" 16 | } 17 | ] -------------------------------------------------------------------------------- /materialdesign components/docs/Checkbox.md: -------------------------------------------------------------------------------- 1 | # Checkbox 2 | 3 | ## Description 4 | 5 | Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off. 6 | 7 | ## Demo 8 | 9 | ![Button](../assets/cmp_MD_Checkbox.gif) 10 | 11 | ## Custom properties 12 | 13 | | property | description | 14 | | --- | --- | 15 | | default | `bool` default state of the checkbox | 16 | | onSelect | `behavioural property` formulas you want to execute when selecting the checkbox | 17 | | outsideMargin | `int` in px - margin to all sides of the checkbox, which allows easy spacing with other elements | 18 | | svgIconFull | `string` icon in checked state - provide svg-code without fill, will be in primaryColor when checked | 19 | | svgIconEmpty | `string` icon in unchecked state - provide svg-code without fill, will be in disabledColor when unchecked | 20 | 21 | ## Tips and Tricks 22 | 23 | * the regular checkbox also looks pretty nice with the template 24 | * also use this for other icons (see examples above) - many icons have an outline version 25 | 26 | ## Known limitations 27 | 28 | * default-value doesn't work in demo app, but works in new projects 🤷 29 | 30 | ## Version 31 | 32 | | Version | description | 33 | | --- | --- | 34 | | 1.0.0 | First version | 35 | 36 | ## Reference 37 | 38 | https://m2.material.io/components/checkboxes 39 | -------------------------------------------------------------------------------- /materialdesign components/docs/Timepicker.md: -------------------------------------------------------------------------------- 1 | # Timepicker 2 | 3 | ## Description 4 | 5 | Time pickers allow users to enter a specific time value. They can be used for a wide range of scenarios. 6 | 7 | Common use cases include: 8 | 9 | * Setting an alarm 10 | * Scheduling a meeting 11 | * Mobile time pickers are displayed in dialogs and can be used to select hours, minutes, and a period of time. 12 | 13 | ## Demo 14 | 15 | ![Timepicker](../assets/cmp_MD_timepicker.gif) 16 | 17 | ## Custom properties 18 | 19 | | property | description | 20 | | --- | --- | 21 | | header | `string` title above the timepicker | 22 | | action1/2text | `string` available actions, Material Design puts these in CAPITAL LETTERS, button width auto adjusts | 23 | | action1/2onSelect | `behavioural Property` - onSelect actions of the 2 buttons | 24 | | format | `int` enter `12` for AM/PM or `24` for a 24h input format | 25 | | defaultTime | `time` initial time displayed on the picker | 26 | | boxShadow | `bool` displays a subtle boxShadow around the picker | 27 | | selectedTime (output) | `time` outputs the selected time | 28 | 29 | ## Tips and Tricks 30 | 31 | * primarily for mobile use, but also helps on desktop 32 | 33 | ## Known limitations 34 | 35 | * none 36 | 37 | ## Version 38 | 39 | | Version | description | 40 | | --- | --- | 41 | | 1.0.0 | First version | 42 | 43 | ## Reference 44 | 45 | https://m2.material.io/components/time-pickers 46 | -------------------------------------------------------------------------------- /materialdesign components/docs/GenericInputFrame.md: -------------------------------------------------------------------------------- 1 | # Generic Input Frame 2 | 3 | ## Description 4 | 5 | This is an element to create your own forms. This has to be paired with other input elements, that will sit on top of it. 6 | The input frame matches the outlined text input. 7 | 8 | ## Demo 9 | 10 | ![GenericInputFram](../assets/cmp_MD_genericInputFrame.gif) 11 | 12 | ## Custom properties 13 | 14 | | property | description | 15 | | --- | --- | 16 | | labelText | `string` text in the top left corner of the outline - displayed in primaryColor | 17 | | helperText | `string` text underneath the outline - displayed in disabledColor | 18 | | errorText | `string` text displayed in case of isError - displayed in errorColor | 19 | | outsideMargin | `int` in px - margin to all sides of the button, which allows easy spacing with other elements (don't use 0, otherwise ) | 20 | | borderRadius | `int` in px - border radius of the outline | 21 | | isError | `bool` specify error condition in here | 22 | | showErrors | `bool` several colors turn to the specified errorColor, if isError AND showErrors are true | 23 | 24 | ## Tips and Tricks 25 | 26 | * use the isError property to store your error-condition and reuse in other parts of your app if necessary 27 | * set showErrors initially to `false` and only start showing, after the first blocked submit, so nobody is greeted by red fields 28 | * match the error-color to your input control (see example) 29 | 30 | ## Known limitations 31 | 32 | * none 33 | 34 | ## Version 35 | 36 | | Version | description | 37 | | --- | --- | 38 | | 1.0.0 | First version | 39 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/EditorState/App.editorstate.json: -------------------------------------------------------------------------------- 1 | { 2 | "ControlStates": { 3 | "App": { 4 | "AllowAccessToGlobals": true, 5 | "ControlPropertyState": [ 6 | "MinScreenHeight", 7 | "MinScreenWidth", 8 | "ConfirmExit", 9 | "SizeBreakpoints", 10 | "BackEnabled" 11 | ], 12 | "IsAutoGenerated": false, 13 | "IsComponentDefinition": false, 14 | "IsDataControl": true, 15 | "IsFromScreenLayout": false, 16 | "IsGroupControl": false, 17 | "IsLocked": false, 18 | "LayoutName": "", 19 | "MetaDataIDKey": "", 20 | "Name": "App", 21 | "ParentIndex": 0, 22 | "PersistMetaDataIDKey": false, 23 | "Properties": [ 24 | { 25 | "Category": "Data", 26 | "PropertyName": "ConfirmExit", 27 | "RuleProviderType": "Unknown" 28 | }, 29 | { 30 | "Category": "Data", 31 | "PropertyName": "BackEnabled", 32 | "RuleProviderType": "Unknown" 33 | }, 34 | { 35 | "Category": "Design", 36 | "PropertyName": "MinScreenHeight", 37 | "RuleProviderType": "Unknown" 38 | }, 39 | { 40 | "Category": "Design", 41 | "PropertyName": "MinScreenWidth", 42 | "RuleProviderType": "Unknown" 43 | }, 44 | { 45 | "Category": "ConstantData", 46 | "PropertyName": "SizeBreakpoints", 47 | "RuleProviderType": "Unknown" 48 | } 49 | ], 50 | "StyleName": "", 51 | "Type": "ControlInfo" 52 | } 53 | }, 54 | "TopParentName": "App" 55 | } -------------------------------------------------------------------------------- /materialdesign components/docs/AppBarTop.md: -------------------------------------------------------------------------------- 1 | # App bar top 2 | 3 | ## Description 4 | 5 | The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions. 6 | 7 | ## Demo 8 | 9 | ![AppBar](../assets/cmp_MD_appBarTop.gif) 10 | 11 | ## Custom properties 12 | 13 | | property | description | 14 | | --- | --- | 15 | | titleText | `string` displayed text | 16 | | svgIcon1/2/3/4 | `string` but in svg-code from ` to ` or `null` - use every svg, without setting the fill properties, it will automatically add color, if you leave an icon blank it will be invisible and the other icons adjust their position | 17 | | onSelectIcon1/2/3/4 | `behavioural property` formulas you want to execute on the icons (left to right) | 18 | | tooltipIcon1/2/3/4 | `string` tooltip of the icons | 19 | | iconSize | `int` in px - size of all the icons | 20 | 21 | ## Tips and Tricks 22 | 23 | * use the included icons from the template 24 | * use icon1 for a menu or back button 25 | * you can stack 2 bars on top of eachother to provide additional actions in a changed context (see gif) 26 | * don't use the top bar at all if there is no benefit at all from using it 😉 27 | 28 | ## Known limitations 29 | 30 | * Because there is a box shadow, you have to overlap this 10 px to the next control to the bottom. 31 | * Default-width is set to `App.DesignWidth`. Set to `Parent.Width` for repsonsive apps can't set this as a default, because this will cause "phantom errors" in the editor 32 | 33 | ## Version 34 | 35 | | Version | description | 36 | | --- | --- | 37 | | 1.0.0 | First version | 38 | 39 | ## Reference 40 | 41 | https://m2.material.io/components/app-bars-top 42 | -------------------------------------------------------------------------------- /materialdesign components/docs/Dialog.md: -------------------------------------------------------------------------------- 1 | # Dialog 2 | 3 | ## Description 4 | 5 | We've all spent too much time building confirmation dialogs in Power Apps, so here is the ultimate component for that purpose. Following Material Design guidelines this always presents 2 options. The dialog centers itself in both directions and automatically adjusts the height to its content. 6 | 7 | ## Demo 8 | 9 | ![Dialog](../assets/cmp_MD_dialog.gif) 10 | 11 | ## Custom properties 12 | 13 | | property | description | 14 | | --- | --- | 15 | | header | `string` optional, if not used the component adjusts in height | 16 | | text | `string` main text of the dialog | 17 | | action1/2text | `string` available actions, Material Design puts these in CAPITAL LETTERS, button width auto adjusts | 18 | | action1/2onSelect | `behavioural Property` onSelect actions of the 2 buttons | 19 | | dialogWidth | `int` in px - width of the dialog, height auto adjusts | 20 | | boxShadow | `bool` places a subtle box shadow around the dialog | 21 | | focusedButton | `int` which button should be focused, when the dialog is set to visible 1 / 2 or 0 for no button | 22 | 23 | 24 | ## Tips and Tricks 25 | 26 | * put the visible property of the component to a local variable 27 | * don't forget to put the visibility to false on both buttons 28 | * use the dialog only when immediate action has to be taken by the user - other options are the snackbar and the banner, see the Material Design reference for more guidance how to use each of them 29 | 30 | ## Known limitations 31 | 32 | none 33 | 34 | ## Version 35 | 36 | | Version | description | 37 | | --- | --- | 38 | | 1.0.0 | First version | 39 | 40 | ## Reference 41 | 42 | https://m2.material.io/components/dialogs 43 | -------------------------------------------------------------------------------- /materialdesign components/docs/NavigationDrawer.md: -------------------------------------------------------------------------------- 1 | # Navigation Drawer 2 | 3 | ## Description 4 | 5 | An expandable sidebar with your menu items, that can be repeated on every screen. If retracted only the icons show. 6 | 7 | ## Demo 8 | 9 | ![Navigation Drawer](../assets/cmp_MD_navigationdrawer.gif) 10 | 11 | ## Custom properties 12 | 13 | | property | description | 14 | | --- | --- | 15 | | items | A `table` with the fields `id` (int), `svgIcon` (svg-Code as string), `title` (string) and `screen` (if you want to navigate) | 16 | | expandSidebar | A `bool` that controls if you want to expand (show icon and text) or retract (show only icon) the drawer | 17 | | topMargin | `int` for the space you want before the menu items start. Can be used creatively, to place a container in the expanded state (see example) 18 | | navigate | `bool` to control if a click on the menu items navigate to the specified screen | 19 | | onSelect | Everything else that should happen on the click of the menu item, best used with `Switch(ThisItem.id, 1, FirstButtonOnSelectAction, 2, ...)` | 20 | 21 | ## Tips and Tricks 22 | 23 | * The top bar in the example with the button to expand/retract is not part of the component 24 | * if you want to use the `topMargin` only in expanded mode, look at the demo app how it is set up, don't hesitate to directly add it to your version of the component 25 | * you can also add a section with options beneath the navigation items (see the reference link for examples) 26 | * get creative! 27 | 28 | ## Known limitations 29 | 30 | None 31 | 32 | ## Version 33 | 34 | | Version | description | 35 | | --- | --- | 36 | | 1.0.0 | First version | 37 | 38 | ## Reference 39 | 40 | https://m2.material.io/components/navigation-drawer 41 | -------------------------------------------------------------------------------- /materialdesign components/docs/Snackbar.md: -------------------------------------------------------------------------------- 1 | # Snackbar 2 | 3 | ## Description 4 | 5 | Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear. 6 | 7 | ## Demo 8 | 9 | ![Snackbar](../assets/cmp_MD_snackbar.gif) 10 | 11 | ## Custom properties 12 | 13 | | property | description | 14 | | --- | --- | 15 | | text | `string` main text of the snackbar | 16 | | twoButtons | `bool` true will show both buttons | 17 | | actionBeneath | `bool` true will show the buttons beneath the text (better for mobile apps) | 18 | | actionText | `string` available actions, Material Design puts these in CAPITAL LETTERS, button width auto adjusts | 19 | | actionOnSelect | `behavioural Property` - onSelect actions of the button | 20 | | onHide | `behavioural Property` - is triggered, as soon as the banner hides (optional) | 21 | | transitionAnimation| `bool` true will show an animation (putting this off can also be used for debug reasons) | 22 | | transitionTime| `int` duration of transition in milliseconds | 23 | | duration| `int` duration of the snackbar in milliseconds | 24 | | timerStart| `bool` put your Visible-variable or `Self.Visible` in here to start the animation | 25 | | textPaddingLeft | `int` in px - use to adjust the position of icon & text | 26 | 27 | ## Tips and Tricks 28 | 29 | * this is the only component, where the colors are inverted - the standards should work out 30 | * use this to undo actions by the user (e.g. delete something) 31 | * only one action is allowed 32 | * set visibility to false on `onHide` to prevent it overlapping anything 33 | 34 | ## Known limitations 35 | 36 | * none 37 | 38 | ## Version 39 | 40 | | Version | description | 41 | | --- | --- | 42 | | 1.0.0 | First version | 43 | 44 | ## Reference 45 | 46 | https://m2.material.io/components/snackbars 47 | -------------------------------------------------------------------------------- /materialdesign components/intro.md: -------------------------------------------------------------------------------- 1 | # PowerApps - Material Design 2 | 3 | UI Toolkit for Microsoft Power Apps that aims to represent the look & feel of [Google Material Design](https://material.io/components). 4 | 5 | ## Components 6 | 7 | - [App bar](docs/AppBarTop.md) 8 | - [Banner](docs/Banner.md) 9 | - [Bottom Navigation](docs/BottomNavigation.md) 10 | - [Button](docs/Button.md) 11 | - [Checkbox](docs/Checkbox.md) 12 | - [Contrast Checker](docs/ContrastChecker.md) 13 | - [Dialog](docs/Dialog.md) 14 | - [Generic Input Frame](docs/GenericInputFrame.md) 15 | - [Navigation Drawer](docs/NavigationDrawer.md) 16 | - [Progress Indicator](docs/ProgressIndicator.md) 17 | - [Side Sheet](docs/SideSheet.md) 18 | - [Slider](docs/Slider.md) 19 | - [Snackbar](docs/Snackbar.md) 20 | - [Text Input](docs/TextInput.md) 21 | - [Time Picker](docs/Timepicker.md) 22 | - [Toggle](docs/Toggle.md) 23 | 24 | ## Setup 25 | 26 | Video explaining the setup process is following soon! 27 | 28 | 1. Import [Solution file](solution/MaterialDesignComponentLibrary_1_0_0_8.zip) to all environments you want to develop canvas apps using the components 29 | 2. Download [template file](solution/MD_Template_v1_1.msapp) 30 | 3. Read documentation of the [template](docs/Template.md) 31 | 4. Open msapp-template-file (create -> Dataverse -> open -> select file) 32 | 5. Select on Plus sign (Insert). 33 | 6. At the bottom of the screen , find option **Get more components** 34 | 7. Choose **MaterialDesign component library**. (This gets added from solution import done in step 1) 35 | 8. Material Design controls should appear under **Library components** (Under insert button) 36 | 9. Change the **OnStart**-properties to match your company branding 37 | 10. Build stunning apps in no time! 38 | 39 | ## Reference app 40 | 41 | The solution includes a demo app that features use cases and ideas for all components. Try it out! 42 | Don't start from the demo app, otherwise you probably won't be able to update components in the future. 43 | 44 | ## Update library & apps 45 | 46 | Import the newest solution to your environment. When editing your canvas apps a prompt should show up to review the update process. 47 | -------------------------------------------------------------------------------- /materialdesign components/docs/Banner.md: -------------------------------------------------------------------------------- 1 | # Banner 2 | 3 | ## Description 4 | 5 | A banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed. 6 | 7 | ## Demo 8 | 9 | ![Banner](../assets/cmp_MD_banner.gif) 10 | 11 | ## Custom properties 12 | 13 | | property | description | 14 | | --- | --- | 15 | | text | `string` main text of the dialog | 16 | | twoButtons | `bool` true will show both buttons | 17 | | actionBeneath | `bool` true will show the buttons beneath the text (better for mobile apps) | 18 | | action1/2text | `string` available actions, Material Desing puts these in CAPITAL LETTERS, button width auto adjusts | 19 | | action1/2onSelect | `behavioural Property` - onSelect actions of the 2 buttons | 20 | | onHide | `behavioural Property` - is triggered, as soon as the banner hides (optional) | 21 | | transitionAnimation| `bool` true will show an animation (putting this off can also be used for debug reasons) | 22 | | transitionTime| `int` duration of transition in milliseconds | 23 | | timerStart| `bool` put your Visible-variable or `Self.Visible` in here to start the animation | 24 | | svgIcon | `string` but in svg-code from ` to ` or `null` - use every svg, without setting the fill properties, it will automatically add color, if you put nothing in there it will automatically center the text | 25 | | textPaddingLeft | `int` in px - use to adjust the position of icon & text | 26 | | yPostion (output property) | `int` this changes during transition and allows you to move the content down during transition | 27 | 28 | ## Tips and Tricks 29 | 30 | * use the included icons from the template 31 | * don't stack banners 32 | * put the content of the page in a container and use the `yPostion`-property to get a transition effect 33 | * don't forget to reset the variable for the `Visible`-property on the `action1/2onSelect` 34 | 35 | ## Known limitations 36 | 37 | none 38 | 39 | ## Version 40 | 41 | | Version | description | 42 | | --- | --- | 43 | | 1.0.0 | First version | 44 | 45 | ## Reference 46 | 47 | https://m2.material.io/components/banners 48 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/EditorState/TextInput.editorstate.json: -------------------------------------------------------------------------------- 1 | { 2 | "ControlStates": { 3 | "TextInput": { 4 | "AllowAccessToGlobals": true, 5 | "ControlPropertyState": [ 6 | "Fill", 7 | "ImagePosition", 8 | "Height", 9 | "Width", 10 | "Size", 11 | "Orientation", 12 | "LoadingSpinner", 13 | "LoadingSpinnerColor" 14 | ], 15 | "IsAutoGenerated": false, 16 | "IsComponentDefinition": false, 17 | "IsDataControl": false, 18 | "IsFromScreenLayout": false, 19 | "IsGroupControl": false, 20 | "IsLocked": false, 21 | "LayoutName": "", 22 | "MetaDataIDKey": "", 23 | "Name": "TextInput", 24 | "ParentIndex": 0, 25 | "PersistMetaDataIDKey": false, 26 | "Properties": [ 27 | { 28 | "Category": "Design", 29 | "PropertyName": "Width", 30 | "RuleProviderType": "Unknown" 31 | }, 32 | { 33 | "Category": "Design", 34 | "PropertyName": "Height", 35 | "RuleProviderType": "Unknown" 36 | }, 37 | { 38 | "Category": "Design", 39 | "PropertyName": "ImagePosition", 40 | "RuleProviderType": "Unknown" 41 | }, 42 | { 43 | "Category": "Design", 44 | "PropertyName": "Fill", 45 | "RuleProviderType": "Unknown" 46 | }, 47 | { 48 | "Category": "Design", 49 | "PropertyName": "LoadingSpinner", 50 | "RuleProviderType": "Unknown" 51 | }, 52 | { 53 | "Category": "Design", 54 | "PropertyName": "LoadingSpinnerColor", 55 | "RuleProviderType": "Unknown" 56 | }, 57 | { 58 | "Category": "Design", 59 | "PropertyName": "Size", 60 | "RuleProviderType": "Unknown" 61 | }, 62 | { 63 | "Category": "Design", 64 | "PropertyName": "Orientation", 65 | "RuleProviderType": "Unknown" 66 | } 67 | ], 68 | "StyleName": "defaultScreenStyle", 69 | "Type": "ControlInfo" 70 | } 71 | }, 72 | "TopParentName": "TextInput" 73 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Power Apps Design Toolkit 2 | 3 | > The Power Apps Design Toolkit is a curated repository of Power Apps UI Guidance and Components that you can plug and play into your apps to transform your design. 4 | 5 | Our objective is to make it easier for makers to build design-consistent, performant and accessible Power Apps. To help you achieve this, you'll find 6 | 7 | - Curated high-quality component-libraries providing you with a complete set of UI elements ready to be used in your own canvas apps that follow a consistent design pattern 8 | - Guidance on industry standard design practices to advance your own development skills 9 | - See the art of the possible and get inspiration from different UI's 10 | 11 | ## Why does it matter? 12 | 13 | > Low Code should not mean low standards! 14 | 15 | We collected information on our main design goals: 16 | 17 | - [Accessibility](docs/accessibility.md) 18 | - [Design consistency](docs/design-consistency.md) 19 | 20 | ## Overview of component libraries 21 | 22 | - [Material Design component library](materialdesign%20components/../materialdesign%20components/intro.md) - built by [Luise Freese](https://twitter.com/LuiseFreese) | @LuiseFreese and [Robin Rosengrün](https://twitter.com/power_r2) | @power_r2 23 | - [AppBar](materialdesign%20components/docs/AppBarTop.md) 24 | - [Banner](materialdesign%20components/docs/Banner.md) 25 | - [Bottom Navigation](materialdesign%20components/docs/BottomNavigation.md) 26 | - [Button](materialdesign%20components/docs/Button.md) 27 | - [Checkbox](materialdesign%20components/docs/Checkbox.md) 28 | - [Contrast Checker](materialdesign%20components/docs/ContrastChecker.md) 29 | - [Dialog](materialdesign%20components/docs/Dialog.md) 30 | - [Generic Input Frame](materialdesign%20components/docs/GenericInputFrame.md) 31 | - [Navigation Drawer](materialdesign%20components/docs/NavigationDrawer.md) 32 | - [Progress Indicator](materialdesign%20components/docs/ProgressIndicator.md) 33 | - [Side Sheet](materialdesign%20components/docs/SideSheet.md) 34 | - [Slider](materialdesign%20components/docs/Slider.md) 35 | - [Snackbar](materialdesign%20components/docs/Snackbar.md) 36 | - [TextInput](materialdesign%20components/docs/TextInput.md) 37 | - [Toggle](materialdesign%20components/docs/Toggle.md) 38 | 39 | - More component libraries to come! 40 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_Gallery.json: -------------------------------------------------------------------------------- 1 | { 2 | "ComponentAllowCustomization": true, 3 | "ComponentChangedSinceFileImport": true, 4 | "ComponentManifest": { 5 | "AllowAccessToGlobals": false, 6 | "AllowCustomization": true, 7 | "Description": "", 8 | "Name": "cmp_MD_Gallery", 9 | "TemplateGuid": "1c509e00ff0f495fb39806fd53d653e4" 10 | }, 11 | "ComponentType": "CanvasComponent", 12 | "CustomGroupControlTemplateName": "", 13 | "CustomProperties": [ 14 | { 15 | "Category": 0, 16 | "DisplayName": "galleryContent", 17 | "Hidden": false, 18 | "Name": "galleryContent", 19 | "PropertyDataTypeKey": "Table", 20 | "Tooltip": "A custom property", 21 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Table\",\"EnumString\":\"\",\"Type\":[{\"Name\":\"id\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]},{\"Name\":\"image\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]},{\"Name\":\"width\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}]}}" 22 | }, 23 | { 24 | "Category": 0, 25 | "DisplayName": "singleImageWidth", 26 | "Hidden": false, 27 | "Name": "singleImageWidth", 28 | "PropertyDataTypeKey": "Number", 29 | "Tooltip": "A custom property", 30 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 31 | }, 32 | { 33 | "Category": 0, 34 | "DisplayName": "imagePadding", 35 | "Hidden": false, 36 | "Name": "imagePadding", 37 | "PropertyDataTypeKey": "Number", 38 | "Tooltip": "A custom property", 39 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 40 | } 41 | ], 42 | "FirstParty": true, 43 | "Id": "http://microsoft.com/appmagic/Component", 44 | "IsComponentLocked": false, 45 | "IsComponentTemplate": true, 46 | "IsCustomGroupControlTemplate": false, 47 | "IsPcfControl": false, 48 | "IsPremiumPcfControl": false, 49 | "IsWidgetTemplate": false, 50 | "LastModifiedTimestamp": "638006856266401714", 51 | "Name": "1c509e00ff0f495fb39806fd53d653e4", 52 | "OverridableProperties": {}, 53 | "TemplateOriginalName": "c35d1e44b38a40df8cba786355cd3d10", 54 | "Version": "637971118065816948" 55 | } -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/SVG-Icons.fx.yaml: -------------------------------------------------------------------------------- 1 | "'SVG-Icons' As screen": 2 | 3 | Gallery3 As gallery.galleryVertical: 4 | Height: =653 5 | Items: =Filter(MaterialDesignIcons, TextInput1.Text in name Or IsBlank(TextInput1.Text)) 6 | Layout: =Layout.Vertical 7 | TemplateFill: =If(ThisItem.IsSelected, ColorValue(defaults.primaryColorTransparentHex)) 8 | TemplateSize: =90 9 | Y: =111 10 | ZIndex: =2 11 | 12 | Label5 As label: 13 | Color: =If(ThisItem.IsSelected, defaults.primaryColor, RGBA(0, 0, 0, 1)) 14 | Height: =68 15 | OnSelect: =Select(Parent) 16 | Size: =21 17 | Text: =ThisItem.name 18 | Width: =476 19 | Y: =9 20 | ZIndex: =1 21 | 22 | Image4_2 As image: 23 | BorderColor: =Transparent 24 | DisabledBorderColor: =Transparent 25 | DisabledFill: =Transparent 26 | Height: =90 27 | Image: |- 28 | ="data:image/svg+xml;utf8, " & EncodeUrl( 29 | //Set Map svg text 30 | If(ThisItem.IsSelected, Substitute(ThisItem.svgPath, " 28 | " 29 | PaddingBottom: =0 30 | PaddingLeft: =0 31 | PaddingRight: =0 32 | PaddingTop: =0 33 | Width: =16 34 | ZIndex: =2 35 | 36 | lbl_heading As label: 37 | Color: =cmp_MD_SideSheet.textColor 38 | Font: =cmp_MD_SideSheet.font 39 | FontWeight: =cmp_MD_SideSheet.fontWeight 40 | Height: =70 41 | Role: =TextRole.Heading1 42 | Size: =cmp_MD_SideSheet.fontSize 43 | Text: =cmp_MD_SideSheet.title 44 | VerticalAlign: =VerticalAlign.Bottom 45 | Width: =342 46 | X: =16 47 | Y: =40 48 | ZIndex: =3 49 | 50 | img_Close As image: 51 | BorderColor: =RGBA(166, 166, 166, 1) 52 | Height: =cmp_MD_SideSheet.iconSize 53 | Image: |- 54 | = "data:image/svg+xml;utf8, " & EncodeUrl( 55 | " 56 | 57 | " 58 | ) 59 | OnSelect: =cmp_MD_SideSheet.onClose() 60 | Width: =cmp_MD_SideSheet.iconSize 61 | X: =Parent.Width-Self.Width-10 62 | Y: =10 63 | ZIndex: =4 64 | 65 | Container3_1 As groupContainer.manualLayoutContainer: 66 | Height: =App.DesignHeight-lbl_heading.Y 67 | Width: =Parent.Width-16 68 | X: =16 69 | Y: =lbl_heading.Y + lbl_heading.Height 70 | ZIndex: =5 71 | 72 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_Checkbox.fx.yaml: -------------------------------------------------------------------------------- 1 | cmp_MD_Checkbox As CanvasComponent: 2 | disabledColorHex: =defaults.disabledColorHex 3 | Fill: =Transparent 4 | Height: =64 5 | OnReset: = 6 | outsideMargin: =15 7 | primaryColorHex: =defaults.primaryColorHex 8 | primaryColorTransparentHex: =defaults.primaryColorTransparentHex 9 | svgIconEmpty: |- 10 | =" 11 | 12 | 13 | 14 | " 15 | svgIconFull: | 16 | =" 17 | 18 | 19 | 20 | " 21 | value: =isCheck 22 | Width: =64 23 | X: =0 24 | Y: =0 25 | ZIndex: =1 26 | 27 | img_checkbox As image: 28 | Height: =Min(Parent.Width, Parent.Height)-Parent.outsideMargin*2 29 | Image: |- 30 | ="data:image/svg+xml;utf8, " & EncodeUrl( 31 | Substitute( 32 | If(isCheck, 33 | cmp_MD_Checkbox.svgIconFull, 34 | cmp_MD_Checkbox.svgIconEmpty), 35 | 36 | " to ` or `null` - use every svg, without setting the fill properties, it will automatically add color, if you put nothing in there it will automatically center the text | 23 | | iconSize | `int` in px, size of the icon | 24 | | align | `Align.Left` or `Align.Center` aligns the icon + text - you probably want to only use `Align.Left` if you have multiple buttons with icons underneath each other | 25 | | adjustPaddingLeft | `int` in px - use to adjust, if Icon & Text are off-center. You can use negative numbers to move everything left | 26 | 27 | ## Tips and Tricks 28 | 29 | * use the included icons from the template 30 | * don't use boxshadow on outlined buttons, doesn't look too good 31 | * you can use this to just display an icon, delete the text and set border 32 | * use normal and outlined buttons together to highlight one option 33 | 34 | ## Known limitations 35 | 36 | * colors on the icon won't work for borders of svg elements, but most icons aren't built on that, make sure to not use any fill properties inside the svg 37 | 38 | ## Version 39 | 40 | | Version | description | 41 | | --- | --- | 42 | | 1.0.0 | First version | 43 | 44 | ## Reference 45 | 46 | https://m2.material.io/components/buttons 47 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_ProgressIndicator.fx.yaml: -------------------------------------------------------------------------------- 1 | cmp_MD_ProgressIndicator As CanvasComponent: 2 | Fill: =Transparent 3 | Height: =6 4 | OnReset: = 5 | primaryColorHex: =defaults.primaryColorHex 6 | primaryColorTransparentHex: =defaults.primaryColorTransparentHex 7 | transitionStart: =Self.Visible 8 | Width: =Parent.Width 9 | X: =0 10 | Y: =0 11 | ZIndex: =1 12 | 13 | img_Loading As image: 14 | Fill: =ColorValue(cmp_MD_ProgressIndicator.primaryColorTransparentHex) 15 | Height: =Parent.Height 16 | Image: |- 17 | ="data:image/svg+xml;utf8, " & EncodeUrl( 18 | " 19 | 20 | 21 | 28 | 34 | 35 | 36 | 37 | 45 | 51 | 52 | 53 | " 54 | ) 55 | ImagePosition: =ImagePosition.Fill 56 | Width: =Parent.Width 57 | Y: |- 58 | = 59 | -cmp_MD_ProgressIndicator.Height*(tim_ProgressIndicator.Value-200)/200 60 | ZIndex: =1 61 | 62 | tim_ProgressIndicator As timer: 63 | Duration: =200 64 | Height: =10 65 | Reset: =!cmp_MD_ProgressIndicator.transitionStart 66 | Start: =cmp_MD_ProgressIndicator.transitionStart 67 | Visible: =false 68 | Width: =280 69 | X: =40 70 | ZIndex: =2 71 | 72 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/EditorState/Screen1.editorstate.json: -------------------------------------------------------------------------------- 1 | { 2 | "ControlStates": { 3 | "Screen1": { 4 | "AllowAccessToGlobals": true, 5 | "ControlPropertyState": [ 6 | { 7 | "AFDDataSourceName": "", 8 | "AutoRuleBindingEnabled": false, 9 | "AutoRuleBindingString": "White", 10 | "InvariantPropertyName": "Fill", 11 | "IsLockable": false, 12 | "NameMapSourceSchema": "?" 13 | }, 14 | "ImagePosition", 15 | "Height", 16 | { 17 | "AFDDataSourceName": "", 18 | "AutoRuleBindingEnabled": false, 19 | "AutoRuleBindingString": "Max(App.Width, App.MinScreenWidth)", 20 | "InvariantPropertyName": "Width", 21 | "IsLockable": false, 22 | "NameMapSourceSchema": "?" 23 | }, 24 | "Size", 25 | "Orientation", 26 | "LoadingSpinner", 27 | "LoadingSpinnerColor" 28 | ], 29 | "IsAutoGenerated": false, 30 | "IsComponentDefinition": false, 31 | "IsDataControl": false, 32 | "IsFromScreenLayout": false, 33 | "IsGroupControl": false, 34 | "IsLocked": false, 35 | "LayoutName": "", 36 | "MetaDataIDKey": "", 37 | "Name": "Screen1", 38 | "ParentIndex": 0, 39 | "PersistMetaDataIDKey": false, 40 | "Properties": [ 41 | { 42 | "Category": "Design", 43 | "PropertyName": "Fill", 44 | "RuleProviderType": "Unknown" 45 | }, 46 | { 47 | "Category": "Design", 48 | "PropertyName": "ImagePosition", 49 | "RuleProviderType": "Unknown" 50 | }, 51 | { 52 | "Category": "Design", 53 | "PropertyName": "Height", 54 | "RuleProviderType": "Unknown" 55 | }, 56 | { 57 | "Category": "Design", 58 | "PropertyName": "Width", 59 | "RuleProviderType": "Unknown" 60 | }, 61 | { 62 | "Category": "Design", 63 | "PropertyName": "Size", 64 | "RuleProviderType": "Unknown" 65 | }, 66 | { 67 | "Category": "Design", 68 | "PropertyName": "Orientation", 69 | "RuleProviderType": "Unknown" 70 | }, 71 | { 72 | "Category": "Design", 73 | "PropertyName": "LoadingSpinner", 74 | "RuleProviderType": "Unknown" 75 | }, 76 | { 77 | "Category": "Design", 78 | "PropertyName": "LoadingSpinnerColor", 79 | "RuleProviderType": "Unknown" 80 | } 81 | ], 82 | "StyleName": "defaultScreenStyle", 83 | "Type": "ControlInfo" 84 | } 85 | }, 86 | "TopParentName": "Screen1" 87 | } -------------------------------------------------------------------------------- /materialdesign components/docs/TextInput.md: -------------------------------------------------------------------------------- 1 | # Text Input 2 | 3 | ## Description 4 | 5 | Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. 6 | 7 | ## Demo 8 | 9 | ![Button](../assets/cmp_MD_textInputExamples.png) 10 | 11 | ## Custom properties 12 | 13 | | property | description | 14 | | --- | --- | 15 | | onSelect | `behavioural property` formulas you want to execute when selecting the text input | 16 | | onChange | `behavioural property` formulas you want to execute when changing the input | 17 | | outLined | `bool` outlined or filled version | 18 | | defaultValue | `string` default string in the text input | 19 | | maxLength | `int` maximum length of input string, you can't continue typing if length is reached (0 disables this) | 20 | | maxLengthVisible | `bool` display current & maximum length of input string on the bottom right | 21 | | prefixText | `string` text that is displayed in the beginning of the field (in disabledColor) | 22 | | suffixText | `string` text that is displayed in the end of the field (in disabledColor) | 23 | | svgTrailingIcon | `string` svg-code for icon that is displayed in the end of the textbox - space is freed up, if property is empty | 24 | | showTrailingIcon | `bool` set a condition when to show the trailing icon | 25 | | iconSize | `int` in px - size of the trailing icon | 26 | | iconColorHex | `string` color of the icon (can use a condition here) | 27 | | align | `string` alignment of the text | 28 | | delayOutput | `bool` same as the delay output property on the regular textbox to not trigger API calls on every change | 29 | | borderRadius | `int` in px - border radius of the outline | 30 | | labelText | `string` text in the top left corner of the outline - displayed in primaryColor | 31 | | helperText | `string` text underneath the outline - displayed in disabledColor | 32 | | errorText | `string` text displayed in case of isError - displayed in errorColor | 33 | | outsideMargin | `int` in px - margin to all sides of the button, which allows easy spacing with other elements (don't use 0, otherwise ) | 34 | | borderRadius | `int` in px - border radius of the outline | 35 | | isError | `bool` specify error condition in here | 36 | | showErrors | `bool` several colors turn to the specified errorColor, if isError AND showErrors are true | 37 | 38 | ## Tips and Tricks 39 | 40 | * Use the **isError**-property to store your error-condition and reuse in other parts of your app if necessary 41 | * Set **showErrors** initially to `false` and only start showing, after the first blocked submit, so nobody is greeted by red fields 42 | 43 | ## Known limitations 44 | 45 | * Resetting is unreliable 46 | 47 | ## Version 48 | 49 | | Version | description | 50 | | --- | --- | 51 | | 1.0.0 | First version | 52 | 53 | ## Reference 54 | 55 | https://m2.material.io/components/text-fields 56 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_Toggle.fx.yaml: -------------------------------------------------------------------------------- 1 | cmp_MD_Toggle As CanvasComponent: 2 | backgroundColor: =defaults.backgroundColor 3 | elementBackgroundColor: =defaults.elementBackgroundColor 4 | Fill: =Transparent 5 | Height: =cmp_MD_Toggle.outsideMargin*2 + cmp_MD_Toggle.toggleSize 6 | lineSize: =32 7 | OnReset: = 8 | outsideMargin: =20 9 | primaryColor: =defaults.primaryColor 10 | primaryColorTransparentHex: =defaults.primaryColorTransparentHex 11 | toggleSize: =20 12 | value: =isCheck 13 | Width: =cmp_MD_Toggle.outsideMargin*2 + cmp_MD_Toggle.lineSize 14 | X: =0 15 | Y: =0 16 | ZIndex: =1 17 | 18 | HtmlText1_2 As htmlViewer: 19 | Height: =41 20 | HtmlText: |- 21 | ="
28 |
" 29 | PaddingLeft: =0 30 | PaddingRight: =0 31 | Width: =35 32 | X: =Circle1.X-5 33 | Y: =Circle1.Y-10 34 | ZIndex: =1 35 | 36 | btn_line As button: 37 | BorderColor: |- 38 | =ColorValue("#6200EE4d") 39 | BorderStyle: =BorderStyle.None 40 | BorderThickness: =0 41 | Fill: =If(!isCheck, cmp_MD_Toggle.elementBackgroundColor, ColorValue(cmp_MD_Toggle.primaryColorTransparentHex)) 42 | Height: =12 43 | HoverBorderColor: =Transparent 44 | HoverFill: =Self.Fill 45 | OnSelect: =Set(isCheck, !isCheck) 46 | PaddingLeft: =0 47 | PaddingRight: =0 48 | PressedBorderColor: =Transparent 49 | PressedFill: =Self.Fill 50 | RadiusBottomLeft: =32 51 | RadiusBottomRight: =32 52 | RadiusTopLeft: =32 53 | RadiusTopRight: =32 54 | Size: =24 55 | Text: ="" 56 | Width: =32 57 | X: =cmp_MD_Toggle.outsideMargin+2 58 | Y: =Circle1.Y + (Circle1.Height-Self.Height)/2 59 | ZIndex: =2 60 | 61 | Circle1 As circle: 62 | Fill: =If(isCheck, cmp_MD_Toggle.primaryColor, cmp_MD_Toggle.backgroundColor) 63 | Height: =cmp_MD_Toggle.toggleSize 64 | HoverFill: =ColorValue(cmp_MD_Toggle.primaryColorTransparentHex) 65 | Width: =cmp_MD_Toggle.toggleSize 66 | X: =If(!isCheck, cmp_MD_Toggle.outsideMargin, cmp_MD_Toggle.outsideMargin+ btn_line.Width+5-Self.Width) 67 | Y: =cmp_MD_Toggle.outsideMargin 68 | ZIndex: =3 69 | 70 | btn_hover_1 As button: 71 | Fill: =Transparent 72 | Height: =24 73 | HoverFill: =ColorValue(cmp_MD_Toggle.primaryColorTransparentHex) 74 | OnSelect: =Set(isCheck, !isCheck) 75 | PressedFill: =Self.Fill 76 | RadiusBottomLeft: =32 77 | RadiusBottomRight: =32 78 | RadiusTopLeft: =32 79 | RadiusTopRight: =32 80 | Size: =24 81 | Text: ="" 82 | Width: =24 83 | X: =Circle1.X-2 84 | Y: =Circle1.Y-2 85 | ZIndex: =4 86 | 87 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Snackbar.fx.yaml: -------------------------------------------------------------------------------- 1 | Snackbar As screen: 2 | OnVisible: |- 3 | =Reset(Button_5); 4 | Reset(Button_9) 5 | 6 | Rectangle1_2 As rectangle: 7 | Fill: =Gray 8 | Width: =640 9 | Y: =1036 10 | ZIndex: =2 11 | 12 | Container1 As groupContainer.manualLayoutContainer: 13 | Fill: =White 14 | Height: =Parent.Height-Self.Y-Rectangle1_2.Height 15 | Width: =Parent.Width 16 | Y: =cmp_MD_Banner_1.yPosition+cmp_MD_Banner_1.Height 17 | ZIndex: =3 18 | 19 | Button_5 As cmp_MD_Button: 20 | backgroundColor: =Parent.Fill 21 | borderRadius: =100 22 | buttonText: ="SNACKBAR" 23 | displayMode: =Edit 24 | Height: =142 25 | iconSize: =0.7 26 | onSelect: =Set(varSnackbar, !varSnackbar) 27 | svgIcon: |- 28 | ="" 29 | Width: =629 30 | X: =11 31 | Y: =341 32 | ZIndex: =2 33 | 34 | Button_9 As cmp_MD_Button: 35 | backgroundColor: =Parent.Fill 36 | borderRadius: =100 37 | boxShadow: =false 38 | buttonText: ="BANNER" 39 | disabledColor: =RGBA(116, 116, 116, 1) 40 | displayMode: =Edit 41 | Height: =136 42 | iconSize: =0.5 43 | onSelect: =Set(varBanner, !varBanner) 44 | outlinedButton: =true 45 | svgIcon: |- 46 | ="" 47 | Width: =630 48 | X: =10 49 | Y: =205 50 | ZIndex: =3 51 | 52 | cmp_MD_Banner_1 As cmp_MD_Banner: 53 | action1OnSelect: =Set(varBanner, false); 54 | action2OnSelect: |- 55 | =Set(varSnackbar, !varSnackbar); 56 | Set(varBanner, false) 57 | actionBeneath: =true 58 | Height: =217 59 | text: ="Ooops, that didn't work Ooops, that didn't workOoops, that didn't workOoops, that didn't workOoops, that didn't workOoops, that didn't workOoops, that didn't work" 60 | timerStart: =varBanner 61 | twoButtons: =false 62 | Visible: =varBanner 63 | Width: =Parent.Width 64 | ZIndex: =4 65 | 66 | cmp_Snackbar_1 As cmp_MD_Snackbar: 67 | actionOnSelect: =Set(varSnackbar, false) 68 | borderRadius: =10 69 | duration: =5000 70 | Height: =230 71 | onHide: =Set(varSnackbar, false) 72 | outsideMargin: =50 73 | text: ="This is the Snackbar Text, the user just did something." 74 | timerStart: =varSnackbar 75 | Visible: =varSnackbar 76 | Width: =Parent.Width 77 | Y: =806 78 | ZIndex: =6 79 | 80 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/NavigateTo.fx.yaml: -------------------------------------------------------------------------------- 1 | NavigateTo As screen: 2 | Fill: =defaults.elementBackgroundColor 3 | Width: =1800 4 | 5 | Rectangle2_1 As rectangle: 6 | Fill: =defaults.primaryColor 7 | Height: =70 8 | Width: =Parent.Width 9 | ZIndex: =1 10 | 11 | cmp_MD_Button_7 As cmp_MD_Button: 12 | boxShadow: =false 13 | buttonText: ="" 14 | Height: =70 15 | onSelect: |- 16 | =UpdateContext({locExpandMenu: !locExpandMenu}) 17 | outsideMargin: =5 18 | svgIcon: =LookUp(MaterialDesignIcons, name=If(locExpandMenu,"menu-open", "menu"), svgPath) 19 | Width: =69 20 | ZIndex: =2 21 | 22 | Label8_1 As label: 23 | Color: =RGBA(255, 255, 255, 1) 24 | Font: ="Roboto" 25 | FontWeight: =FontWeight.Semibold 26 | Height: =70 27 | Size: =18 28 | Text: ="Navigation drawer" 29 | Width: =560 30 | X: =72 31 | ZIndex: =3 32 | 33 | Container2_1 As groupContainer.manualLayoutContainer: 34 | Height: =545 35 | Width: =492 36 | X: =cmp_MD_Navigation_Drawer_3.Width+30 37 | Y: =91 38 | ZIndex: =4 39 | 40 | Button1_1 As button: 41 | BorderStyle: =BorderStyle.None 42 | DisabledFill: =Self.Fill 43 | DisplayMode: =DisplayMode.Disabled 44 | Fill: =defaults.backgroundColor 45 | Height: =545 46 | RadiusBottomLeft: =20 47 | RadiusBottomRight: =20 48 | RadiusTopLeft: =20 49 | RadiusTopRight: =20 50 | Size: =24 51 | Text: ="" 52 | Width: =492 53 | ZIndex: =1 54 | 55 | cmp_MD_Button_8 As cmp_MD_Button: 56 | borderRadius: | 57 | =50 58 | buttonText: ="DIFFERENT" 59 | onSelect: |- 60 | =UpdateContext({locLoading: !locLoading}) 61 | X: =75 62 | Y: =48 63 | ZIndex: =2 64 | 65 | cmp_MD_Button_9 As cmp_MD_Button: 66 | borderRadius: | 67 | =50 68 | buttonText: ="SCREEN" 69 | outlinedButton: =true 70 | X: =75 71 | Y: =138 72 | ZIndex: =3 73 | 74 | cmp_MD_Checkbox_1 As cmp_MD_Checkbox: 75 | X: =176 76 | Y: =296 77 | ZIndex: =4 78 | 79 | html_sideMenuBoxShadow_1 As htmlViewer: 80 | BorderStyle: =BorderStyle.Solid 81 | Height: =5 82 | HtmlText: |- 83 | ="
89 |
" 90 | PaddingBottom: =0 91 | PaddingLeft: =0 92 | PaddingRight: =0 93 | PaddingTop: =0 94 | Width: =1800 95 | Y: =70 96 | ZIndex: =5 97 | 98 | cmp_MD_Navigation_Drawer_3 As cmp_MD_Navigation_Drawer: 99 | expandSidebar: =locExpandMenu 100 | Height: =Parent.Height-Self.Y 101 | items: =cmp_MD_Navigation_Drawer_2.items 102 | onSelect: | 103 | =Switch( 104 | cmp_MD_Navigation_Drawer_3.selectedItem, 105 | 1, Notify("You pressed the menu item Documents"), 106 | 2, Notify("You pressed the menu item Calendar", Success), 107 | 3, Notify("Please stop pressing it gets depressing", NotificationType.Error), 108 | UpdateContext({locExpandMenu: !locExpandMenu}) 109 | ) 110 | Y: =70 111 | ZIndex: =6 112 | 113 | cmp_MD_ProgressIndicator_2 As cmp_MD_ProgressIndicator: 114 | transitionStart: =locLoading 115 | Visible: =locLoading 116 | Y: =69 117 | ZIndex: =7 118 | 119 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_Toggle.json: -------------------------------------------------------------------------------- 1 | { 2 | "ComponentAllowCustomization": true, 3 | "ComponentChangedSinceFileImport": true, 4 | "ComponentManifest": { 5 | "AllowAccessToGlobals": false, 6 | "AllowCustomization": true, 7 | "Description": "", 8 | "Name": "cmp_MD_Toggle", 9 | "TemplateGuid": "d5ab079be7274d008078e11ac93ba496" 10 | }, 11 | "ComponentType": "CanvasComponent", 12 | "CustomGroupControlTemplateName": "", 13 | "CustomProperties": [ 14 | { 15 | "Category": 0, 16 | "DisplayName": "primaryColor", 17 | "Hidden": false, 18 | "Name": "primaryColor", 19 | "PropertyDataTypeKey": "Color", 20 | "Tooltip": "A custom property", 21 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 22 | }, 23 | { 24 | "Category": 0, 25 | "DisplayName": "primaryColorTransparentHex", 26 | "Hidden": false, 27 | "Name": "primaryColorTransparentHex", 28 | "PropertyDataTypeKey": "String", 29 | "Tooltip": "A custom property", 30 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 31 | }, 32 | { 33 | "Category": 0, 34 | "DisplayName": "backgroundColor", 35 | "Hidden": false, 36 | "Name": "backgroundColor", 37 | "PropertyDataTypeKey": "Color", 38 | "Tooltip": "A custom property", 39 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 40 | }, 41 | { 42 | "Category": 0, 43 | "DisplayName": "value", 44 | "Hidden": true, 45 | "Name": "value", 46 | "PropertyDataTypeKey": "Boolean", 47 | "Tooltip": "A custom property", 48 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"_MinPrimitive\",\"EnumString\":\"\",\"Type\":[]}}" 49 | }, 50 | { 51 | "Category": 0, 52 | "DisplayName": "elementBackgroundColor", 53 | "Hidden": false, 54 | "Name": "elementBackgroundColor", 55 | "PropertyDataTypeKey": "Color", 56 | "Tooltip": "A custom property", 57 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 58 | }, 59 | { 60 | "Category": 0, 61 | "DisplayName": "outsideMargin", 62 | "Hidden": false, 63 | "Name": "outsideMargin", 64 | "PropertyDataTypeKey": "Number", 65 | "Tooltip": "A custom property", 66 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 67 | }, 68 | { 69 | "Category": 0, 70 | "DisplayName": "toggleSize", 71 | "Hidden": false, 72 | "Name": "toggleSize", 73 | "PropertyDataTypeKey": "Number", 74 | "Tooltip": "A custom property", 75 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 76 | }, 77 | { 78 | "Category": 0, 79 | "DisplayName": "lineSize", 80 | "Hidden": false, 81 | "Name": "lineSize", 82 | "PropertyDataTypeKey": "Number", 83 | "Tooltip": "A custom property", 84 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 85 | } 86 | ], 87 | "FirstParty": true, 88 | "Id": "http://microsoft.com/appmagic/Component", 89 | "IsComponentLocked": false, 90 | "IsComponentTemplate": true, 91 | "IsCustomGroupControlTemplate": false, 92 | "IsPcfControl": false, 93 | "IsPremiumPcfControl": false, 94 | "IsWidgetTemplate": false, 95 | "LastModifiedTimestamp": "638006856266637224", 96 | "Name": "d5ab079be7274d008078e11ac93ba496", 97 | "OverridableProperties": {}, 98 | "TemplateOriginalName": "97f70bbe98b144e893a9d807f778abd8", 99 | "Version": "637977160247587892" 100 | } -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_ContrastChecker.fx.yaml: -------------------------------------------------------------------------------- 1 | cmp_MD_ContrastChecker As CanvasComponent: 2 | backgroundColorHex: =defaults.backgroundColorHex 3 | Fill: =ColorValue(cmp_MD_ContrastChecker.backGroundColor) 4 | font: =defaults.font 5 | fontSize: =defaults.fontSize 6 | Height: =350 7 | primaryColorHex: =defaults.primaryColorHex 8 | textColor: =defaults.textColor 9 | Width: =640 10 | X: =0 11 | Y: =0 12 | ZIndex: =1 13 | 14 | lbl_ValueColor1 As label: 15 | Color: =cmp_MD_ContrastChecker.textColor 16 | Font: =cmp_MD_ContrastChecker.font 17 | Height: =70 18 | Size: =14 19 | Text: |- 20 | =With({ 21 | primColorArray: AddColumns(Split(Right(Parent.primaryColorHex, 6), ""), "Value", Switch(Lower(Result), "a", 10, "b", 11, "c", 12, "d", 13, "e", 14, "f", 15, Value(Result))), 22 | backColorArray: AddColumns(Split(Right(Parent.backgroundColorHex, 6), ""), "Value", Switch(Result, "a", 10, "b", 11, "c", 12, "d", 13, "e", 14, "f", 15, Value(Result)))}, 23 | Abs(Round( (299*(Index(primColorArray, 1).Value*16+Index(primColorArray, 2).Value)+587*(Index(primColorArray, 3).Value*16+Index(primColorArray, 4).Value)+114*(Index(primColorArray, 5).Value*16+Index(primColorArray, 6).Value))/1000 24 | 25 | - 26 | (299*(Index(backColorArray, 1).Value*16+Index(backColorArray, 2).Value)+587*(Index(backColorArray, 3).Value*16+Index(backColorArray, 4).Value)+114*(Index(backColorArray, 5).Value*16+Index(backColorArray, 6).Value))/1000, 0)) 27 | 28 | 29 | ) 30 | Width: =560 31 | X: =40 32 | Y: =151 33 | ZIndex: =1 34 | 35 | Label7 As label: 36 | AutoHeight: =true 37 | Color: =ColorValue(cmp_MD_ContrastChecker.primaryColorHex) 38 | Fill: =ColorValue(Parent.backgroundColorHex) 39 | Font: =cmp_MD_ContrastChecker.font 40 | Height: =70 41 | Size: =cmp_MD_ContrastChecker.fontSize 42 | Text: ="This is a sample text." 43 | Width: =560 44 | X: =40 45 | Y: =25 46 | ZIndex: =2 47 | 48 | Label7_1 As label: 49 | Color: =cmp_MD_ContrastChecker.textColor 50 | Font: =cmp_MD_ContrastChecker.font 51 | Height: =70 52 | Size: =14 53 | Text: ="Brightness difference (needs to be >125)" 54 | Width: =560 55 | X: =40 56 | Y: =95 57 | ZIndex: =3 58 | 59 | lbl_ValueColor1_1 As label: 60 | Color: =cmp_MD_ContrastChecker.textColor 61 | Font: =cmp_MD_ContrastChecker.font 62 | Height: =70 63 | Size: =14 64 | Text: |- 65 | =With({ 66 | primColorArray: AddColumns(Split(Right(Parent.primaryColorHex, 6), ""), "Value", Switch(Lower(Result), "a", 10, "b", 11, "c", 12, "d", 13, "e", 14, "f", 15, Value(Result))), 67 | backColorArray: AddColumns(Split(Right(Parent.backgroundColorHex, 6), ""), "Value", Switch(Result, "a", 10, "b", 11, "c", 12, "d", 13, "e", 14, "f", 15, Value(Result)))}, 68 | 69 | Abs( 70 | (Index(primColorArray, 1).Value*16+Index(primColorArray, 2).Value)-(Index(backColorArray, 1).Value*16+Index(backColorArray, 2).Value) 71 | +(Index(primColorArray, 3).Value*16+Index(primColorArray, 4).Value)-(Index(backColorArray, 3).Value*16+Index(backColorArray, 4).Value) 72 | +(Index(primColorArray, 5).Value*16+Index(primColorArray, 6).Value)-(Index(backColorArray, 5).Value*16+Index(backColorArray, 6).Value) 73 | ) 74 | 75 | 76 | ) 77 | Width: =560 78 | X: =40 79 | Y: =266 80 | ZIndex: =4 81 | 82 | Label7_2 As label: 83 | Color: =cmp_MD_ContrastChecker.textColor 84 | Font: =cmp_MD_ContrastChecker.font 85 | Height: =70 86 | Size: =14 87 | Text: ="Color difference (needs to be >500)" 88 | Width: =560 89 | X: =40 90 | Y: =210 91 | ZIndex: =5 92 | 93 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_SideSheet.json: -------------------------------------------------------------------------------- 1 | { 2 | "ComponentAllowCustomization": true, 3 | "ComponentChangedSinceFileImport": true, 4 | "ComponentManifest": { 5 | "AllowAccessToGlobals": false, 6 | "AllowCustomization": true, 7 | "Description": "", 8 | "Name": "cmp_MD_SideSheet", 9 | "TemplateGuid": "1b6a784b5209419899a8bbcf5dbecb35" 10 | }, 11 | "ComponentType": "CanvasComponent", 12 | "CustomGroupControlTemplateName": "", 13 | "CustomProperties": [ 14 | { 15 | "Category": 0, 16 | "DisplayName": "outsideMargin", 17 | "Hidden": false, 18 | "Name": "outsideMargin", 19 | "PropertyDataTypeKey": "Number", 20 | "Tooltip": "A custom property", 21 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 22 | }, 23 | { 24 | "Category": 0, 25 | "DisplayName": "font", 26 | "Hidden": false, 27 | "Name": "font", 28 | "PropertyDataTypeKey": "String", 29 | "Tooltip": "A custom property", 30 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 31 | }, 32 | { 33 | "Category": 0, 34 | "DisplayName": "fontSize", 35 | "Hidden": false, 36 | "Name": "fontSize", 37 | "PropertyDataTypeKey": "Number", 38 | "Tooltip": "A custom property", 39 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 40 | }, 41 | { 42 | "Category": 0, 43 | "DisplayName": "fontWeight", 44 | "Hidden": false, 45 | "Name": "fontWeight", 46 | "PropertyDataTypeKey": "String", 47 | "Tooltip": "A custom property", 48 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 49 | }, 50 | { 51 | "Category": 0, 52 | "DisplayName": "title", 53 | "Hidden": false, 54 | "Name": "title", 55 | "PropertyDataTypeKey": "String", 56 | "Tooltip": "A custom property", 57 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 58 | }, 59 | { 60 | "Category": 0, 61 | "DisplayName": "textColor", 62 | "Hidden": false, 63 | "Name": "textColor", 64 | "PropertyDataTypeKey": "Color", 65 | "Tooltip": "A custom property", 66 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 67 | }, 68 | { 69 | "Category": 0, 70 | "DisplayName": "backgroundColor", 71 | "Hidden": false, 72 | "Name": "backgroundColor", 73 | "PropertyDataTypeKey": "Color", 74 | "Tooltip": "A custom property", 75 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 76 | }, 77 | { 78 | "Category": 0, 79 | "DisplayName": "iconSize", 80 | "Hidden": false, 81 | "Name": "iconSize", 82 | "PropertyDataTypeKey": "Number", 83 | "Tooltip": "A custom property", 84 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 85 | }, 86 | { 87 | "Category": 2, 88 | "DisplayName": "onClose", 89 | "Hidden": false, 90 | "Name": "onClose", 91 | "PropertyDataTypeKey": "Boolean", 92 | "Tooltip": "A custom property", 93 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"_MinPrimitive\",\"EnumString\":\"\",\"Type\":[]}}" 94 | } 95 | ], 96 | "FirstParty": true, 97 | "Id": "http://microsoft.com/appmagic/Component", 98 | "IsComponentLocked": false, 99 | "IsComponentTemplate": true, 100 | "IsCustomGroupControlTemplate": false, 101 | "IsPcfControl": false, 102 | "IsPremiumPcfControl": false, 103 | "IsWidgetTemplate": false, 104 | "LastModifiedTimestamp": "638006856266554103", 105 | "Name": "1b6a784b5209419899a8bbcf5dbecb35", 106 | "OverridableProperties": {}, 107 | "TemplateOriginalName": "c964081309b84fe5a35753980207f33f", 108 | "Version": "637978214958549842" 109 | } -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_RadioButton.fx.yaml: -------------------------------------------------------------------------------- 1 | cmp_MD_RadioButton As CanvasComponent: 2 | disabledColor: |- 3 | =ColorValue("#a9a9a9") 4 | Fill: =Transparent 5 | font: ="Roboto" 6 | fontColor: =RGBA(0, 0, 0, 1) 7 | fontSize: =10 8 | fontWeight: ="Normal" 9 | galleryContent: |- 10 | =Table( 11 | { 12 | id: 1, 13 | title: "pick me" 14 | }, 15 | { 16 | id: 2, 17 | title: "no, pick me" 18 | }, 19 | { 20 | id: 3, 21 | title: "for real, pick me!" 22 | } 23 | ) 24 | Height: =cmp_MD_RadioButton.outsideMargin*2 + 48*3+20 25 | hoverFill: |- 26 | =ColorValue("#6200EE4D") 27 | iconSize: =20 28 | OnReset: = 29 | outsideMargin: =20 30 | primaryColor: |- 31 | =ColorValue("#6200EE") 32 | radiobuttonValue: =Title6.Text 33 | Width: =cmp_MD_RadioButton.outsideMargin*2 + cmp_MD_RadioButton.iconSize + 200+10 34 | X: =0 35 | Y: =0 36 | ZIndex: =1 37 | 38 | "Gallery4 As gallery.'BrowseLayout_Vertical_OneTextVariant_ver4.0'": 39 | Height: =0 40 | Items: =colItems 41 | Layout: =Layout.Vertical 42 | TemplatePadding: =0 43 | TemplateSize: =Min(96, Self.Height - 60) 44 | Width: =0 45 | Y: =0 46 | ZIndex: =1 47 | 48 | Title6 As label: 49 | Height: =0 50 | OnSelect: =Select(Parent) 51 | PaddingBottom: =0 52 | PaddingLeft: =0 53 | PaddingRight: =0 54 | PaddingTop: =0 55 | Text: =ThisItem.radio 56 | VerticalAlign: =VerticalAlign.Top 57 | Width: =0 58 | ZIndex: =1 59 | 60 | "Gallery2 As gallery.'BrowseLayout_Vertical_TwoTextOneImageVariant_ver4.0'": 61 | Height: =CountRows(Gallery2.AllItems)* Gallery2.TemplateHeight + cmp_MD_RadioButton.outsideMargin*2 62 | Items: =cmp_MD_RadioButton.galleryContent 63 | Layout: =Layout.Vertical 64 | TemplatePadding: =0 65 | TemplateSize: =48 66 | Width: =cmp_MD_RadioButton.Width 67 | Y: =cmp_MD_RadioButton.outsideMargin 68 | ZIndex: =4 69 | 70 | Circle_inner_1 As circle: 71 | BorderColor: =Transparent 72 | BorderThickness: =1 73 | Fill: =If(Title6.Text = Text(ThisItem.id), cmp_MD_RadioButton.primaryColor, Transparent) 74 | Height: =cmp_MD_RadioButton.iconSize-8 75 | OnSelect: =Set(isCheck, !isCheck) 76 | Width: =cmp_MD_RadioButton.iconSize-8 77 | X: =Circle_outer_1.X + (Circle_outer_1.Width-Self.Width)/2 78 | Y: =Circle_outer_1.Y+ (Circle_outer_1.Height - Self.Height)/2 79 | ZIndex: =6 80 | 81 | Circle_outer_1 As circle: 82 | BorderColor: =If(Title6.Text = Text(ThisItem.id), cmp_MD_RadioButton.primaryColor, cmp_MD_RadioButton.disabledColor) 83 | BorderThickness: =1 84 | Fill: =Transparent 85 | Height: =cmp_MD_RadioButton.iconSize 86 | Width: =cmp_MD_RadioButton.iconSize 87 | X: =5 88 | Y: =(Parent.TemplateHeight-Self.Height)/2 89 | ZIndex: =7 90 | 91 | Checkbox2 As checkbox: 92 | BorderStyle: =BorderStyle.None 93 | CheckboxSize: =0 94 | Height: =44 95 | OnCheck: |- 96 | =ClearCollect(colItems, {radio: ThisItem.id}); 97 | OnSelect: =Select(Parent) 98 | OnUncheck: |- 99 | =Clear( 100 | colItems 101 | ) 102 | Reset: =true 103 | Size: =21 104 | Text: ="" 105 | Width: =35 106 | Y: =4 107 | ZIndex: =9 108 | 109 | Label4_1 As label: 110 | Font: =cmp_MD_RadioButton.font 111 | FontWeight: =cmp_MD_RadioButton.fontWeight 112 | Size: =cmp_MD_RadioButton.fontSize 113 | Text: =ThisItem.title 114 | Width: =235 115 | X: =Circle_outer_1.X + Circle_outer_1.Width + 10 116 | Y: =Circle_outer_1.Y+ (Circle_outer_1.Height - Self. Height)/2 117 | ZIndex: =10 118 | 119 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/CanvasManifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "FormatVersion": "0.24", 3 | "Header": { 4 | "DocVersion": "1.326", 5 | "MinVersionToLoad": "1.326", 6 | "MSAppStructureVersion": "2.0" 7 | }, 8 | "Properties": { 9 | "AppCreationSource": "AppFromScratch", 10 | "AppDescription": "", 11 | "AppPreviewFlagsMap": { 12 | "aibuilderserviceenrollment": false, 13 | "allowmultiplescreensincanvaspages": false, 14 | "appinsightserrortracing": false, 15 | "appinstrumentationcorrelationtracing": false, 16 | "autocreateenvironmentvariables": false, 17 | "backfromhostaction": false, 18 | "behaviorpropertyui": true, 19 | "blockmovingcontrol": true, 20 | "cdsdataformatting": false, 21 | "classiccontrols": false, 22 | "componentauthoring": true, 23 | "copyandmerge": false, 24 | "datatablev2control": true, 25 | "dataverseactionsenabled": false, 26 | "delaycontrolrendering": false, 27 | "delayloadscreens": true, 28 | "disablecdsfileandlargeimage": false, 29 | "dynamicschema": false, 30 | "enableappembeddingux": false, 31 | "enablecommandbar": false, 32 | "enablecomponentnamemaps": false, 33 | "enablecomponentscopeoldbehavior": false, 34 | "enableeditcacherefreshfrequency": false, 35 | "enableexcelonlinebusinessv2connector": true, 36 | "enableideaspanel": true, 37 | "enableonstart": true, 38 | "enableonstartnavigate": false, 39 | "enablepcfmoderndatasets": true, 40 | "enablepowerautomatepane": false, 41 | "enablerowscopeonetonexpand": false, 42 | "enablerpawarecomponentdependency": true, 43 | "enablerulespanel": false, 44 | "enablesaveloadcleardataonweb": false, 45 | "enhanceddelegation": true, 46 | "enhancedgalleryinitialization": true, 47 | "errorhandling": false, 48 | "excelcompatibility": false, 49 | "expandedsavedatasupport": true, 50 | "exportimportcomponents2": true, 51 | "externalmessage": false, 52 | "formuladataprefetch": true, 53 | "formularepair": false, 54 | "generatedebugpublishedapp": false, 55 | "herocontrols": false, 56 | "improvedmediacapture": false, 57 | "improvedtabstopbehavior": true, 58 | "keeprecentscreensloaded": false, 59 | "longlivingcache": false, 60 | "namedformulas": false, 61 | "nativecdsexperimental": true, 62 | "optimizedforteamsmeeting": false, 63 | "parallelcodegen": false, 64 | "pdffunction": false, 65 | "projectionmapping": true, 66 | "reactformulabar": false, 67 | "reliableconcurrent": true, 68 | "reverttooldpowerautomate": false, 69 | "rtlinstudiopreview": false, 70 | "rtlsupport": false, 71 | "untypedobject": false, 72 | "usedisplaynamemetadata": true, 73 | "useenforcesavedatalimits": true, 74 | "useexperimentalcdsconnector": true, 75 | "useexperimentalsqlconnector": true, 76 | "useguiddatatypes": true, 77 | "usenonblockingonstartrule": true, 78 | "webbarcodescanner": false, 79 | "zeroalltabindexes": false 80 | }, 81 | "Author": "", 82 | "ContainsThirdPartyPcfControls": false, 83 | "DefaultConnectedDataSourceMaxGetRowsCount": 500, 84 | "DocumentAppType": "Phone", 85 | "DocumentLayoutHeight": 1136, 86 | "DocumentLayoutLockOrientation": false, 87 | "DocumentLayoutMaintainAspectRatio": true, 88 | "DocumentLayoutOrientation": "portrait", 89 | "DocumentLayoutScaleToFit": true, 90 | "DocumentLayoutWidth": 640, 91 | "DocumentType": "ComponentLibrary", 92 | "EnableInstrumentation": false, 93 | "FileID": "9644a321-792c-4415-bdf4-21715e1b9f57", 94 | "Id": "a1d861f9-ad26-4008-ba79-cc6b060cc167", 95 | "InstrumentationKey": "", 96 | "LocalDatabaseReferences": "{}", 97 | "Name": "MaterialDesign.msapp", 98 | "OriginatingVersion": "1.326" 99 | }, 100 | "PublishInfo": { 101 | "AppName": "MaterialDesign", 102 | "BackgroundColor": "RGBA(251,101,60,255)", 103 | "IconColor": "RGBA(255,255,255,1)", 104 | "IconName": "Library", 105 | "LogoFileName": "", 106 | "PublishDataLocally": false, 107 | "PublishResourcesLocally": false, 108 | "PublishTarget": "player", 109 | "UserLocale": "en-US" 110 | }, 111 | "ScreenOrder": [ 112 | "SetupPage", 113 | "Buttons", 114 | "Side Bar", 115 | "NavigateTo", 116 | "Bottom Navigation", 117 | "Snackbar", 118 | "Calendar", 119 | "TextInput", 120 | "SVG-Icons", 121 | "ContrastChecker", 122 | "Screen1" 123 | ] 124 | } -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_AppBar_top.fx.yaml: -------------------------------------------------------------------------------- 1 | cmp_MD_AppBar_top As CanvasComponent: 2 | appBarTop1Color: |- 3 | =ColorValue("#4C00D5") 4 | appBarTop2Color: |- 5 | =ColorValue("#6200EE") 6 | Fill: =RGBA(0, 0, 0, 0) 7 | Height: =70 8 | icon1: |- 9 | ="data:image/svg+xml;utf8, "&EncodeUrl(" 10 | 11 | 12 | ") 13 | icon2: |- 14 | ="data:image/svg+xml;utf8, "&EncodeUrl(" 15 | 16 | 17 | ") 18 | icon3: |- 19 | ="data:image/svg+xml;utf8, "&EncodeUrl(" 20 | 21 | 22 | ") 23 | icon4: |- 24 | ="data:image/svg+xml;utf8, "&EncodeUrl(" 25 | 26 | 27 | ") 28 | iconColor: |- 29 | ="#FFFFFF" 30 | mockVisible: =false 31 | onSelectContext: =true 32 | onselectMenu: =true 33 | onSelectSearch: =true 34 | onselectShare: =true 35 | textColor: =White 36 | titleText: ="Photos" 37 | Width: =App.DesignWidth 38 | X: =0 39 | Y: =0 40 | ZIndex: =1 41 | 42 | HtmlText1 As htmlViewer: 43 | Height: =87 44 | HtmlText: |- 45 | ="
52 |
" 53 | PaddingBottom: =0 54 | PaddingLeft: =0 55 | PaddingRight: =0 56 | PaddingTop: =0 57 | Width: =640 58 | ZIndex: =1 59 | 60 | rect_AppBar2 As rectangle: 61 | Fill: =cmp_MD_AppBar_top.appBarTop2Color 62 | Height: =56 63 | Width: =Parent.Width 64 | ZIndex: =6 65 | 66 | img_Share As image: 67 | Height: =24 68 | Image: =cmp_MD_AppBar_top.icon2 69 | OnSelect: =cmp_MD_AppBar_top.onselectShare() 70 | Width: =24 71 | X: =img_Search.X-24-Self.Width 72 | Y: =rect_AppBar2.Y+ (rect_AppBar2.Height-Self.Height)/2 73 | ZIndex: =7 74 | 75 | img_Hamburger As image: 76 | Height: =24 77 | Image: =cmp_MD_AppBar_top.icon1 78 | OnSelect: =cmp_MD_AppBar_top.onselectMenu() 79 | Width: =24 80 | X: =36 81 | Y: =rect_AppBar2.Y+ (rect_AppBar2.Height-Self.Height)/2 82 | ZIndex: =8 83 | 84 | img_Search As image: 85 | Height: =24 86 | Image: =cmp_MD_AppBar_top.icon3 87 | OnSelect: =cmp_MD_AppBar_top.onSelectSearch() 88 | Width: =24 89 | X: =img_Context.X-24-Self.Width 90 | Y: =rect_AppBar2.Y+ (rect_AppBar2.Height-Self.Height)/2 91 | ZIndex: =9 92 | 93 | img_Context As image: 94 | Height: =24 95 | Image: =cmp_MD_AppBar_top.icon4 96 | OnSelect: =cmp_MD_AppBar_top.onSelectContext() 97 | Width: =24 98 | X: =rect_AppBar2.Width-Self.Width-16 99 | Y: =rect_AppBar2.Y+ (rect_AppBar2.Height-Self.Height)/2 100 | ZIndex: =10 101 | 102 | lbl_title As label: 103 | Color: =cmp_MD_AppBar_top.textColor 104 | Font: ="Roboto" 105 | Height: =rect_AppBar2.Height 106 | Size: =21 107 | Text: =cmp_MD_AppBar_top.titleText 108 | Width: =300 109 | X: =img_Hamburger.X + img_Hamburger.Width+32 110 | Y: =rect_AppBar2.Y 111 | ZIndex: =11 112 | 113 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_Bottom_Navigation.json: -------------------------------------------------------------------------------- 1 | { 2 | "ComponentAllowCustomization": true, 3 | "ComponentChangedSinceFileImport": true, 4 | "ComponentManifest": { 5 | "AllowAccessToGlobals": false, 6 | "AllowCustomization": true, 7 | "Description": "", 8 | "Name": "cmp_MD_Bottom_Navigation", 9 | "TemplateGuid": "e8e064b670974778a79b19eb89a5f5d0" 10 | }, 11 | "ComponentType": "CanvasComponent", 12 | "CustomGroupControlTemplateName": "", 13 | "CustomProperties": [ 14 | { 15 | "Category": 0, 16 | "DisplayName": "accentColor", 17 | "Hidden": false, 18 | "Name": "accentColor", 19 | "PropertyDataTypeKey": "Color", 20 | "Tooltip": "A custom property", 21 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 22 | }, 23 | { 24 | "Category": 0, 25 | "DisplayName": "textColor", 26 | "Hidden": false, 27 | "Name": "textColor", 28 | "PropertyDataTypeKey": "Color", 29 | "Tooltip": "A custom property", 30 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 31 | }, 32 | { 33 | "Category": 0, 34 | "DisplayName": "font", 35 | "Hidden": false, 36 | "Name": "font", 37 | "PropertyDataTypeKey": "String", 38 | "Tooltip": "A custom property", 39 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 40 | }, 41 | { 42 | "Category": 0, 43 | "DisplayName": "fontSize", 44 | "Hidden": false, 45 | "Name": "fontSize", 46 | "PropertyDataTypeKey": "Number", 47 | "Tooltip": "A custom property", 48 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 49 | }, 50 | { 51 | "Category": 0, 52 | "DisplayName": "fontWeight", 53 | "Hidden": false, 54 | "Name": "fontWeight", 55 | "PropertyDataTypeKey": "String", 56 | "Tooltip": "A custom property", 57 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 58 | }, 59 | { 60 | "Category": 0, 61 | "DisplayName": "selectedItem", 62 | "Hidden": true, 63 | "Name": "selectedItem", 64 | "PropertyDataTypeKey": "Number", 65 | "Tooltip": "A custom property", 66 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 67 | }, 68 | { 69 | "Category": 0, 70 | "DisplayName": "iconColor", 71 | "Hidden": false, 72 | "Name": "iconColor", 73 | "PropertyDataTypeKey": "String", 74 | "Tooltip": "A custom property", 75 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 76 | }, 77 | { 78 | "Category": 0, 79 | "DisplayName": "iconHoverColor", 80 | "Hidden": false, 81 | "Name": "iconHoverColor", 82 | "PropertyDataTypeKey": "String", 83 | "Tooltip": "A custom property", 84 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 85 | }, 86 | { 87 | "Category": 0, 88 | "DisplayName": "iconSize", 89 | "Hidden": false, 90 | "Name": "iconSize", 91 | "PropertyDataTypeKey": "Number", 92 | "Tooltip": "A custom property", 93 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 94 | }, 95 | { 96 | "Category": 0, 97 | "DisplayName": "navContent", 98 | "Hidden": false, 99 | "Name": "navContent", 100 | "PropertyDataTypeKey": "Table", 101 | "Tooltip": "A custom property", 102 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Table\",\"EnumString\":\"\",\"Type\":[{\"Name\":\"id\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]},{\"Name\":\"image\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]},{\"Name\":\"imageHover\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]},{\"Name\":\"title\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}]}}" 103 | } 104 | ], 105 | "FirstParty": true, 106 | "Id": "http://microsoft.com/appmagic/Component", 107 | "IsComponentLocked": false, 108 | "IsComponentTemplate": true, 109 | "IsCustomGroupControlTemplate": false, 110 | "IsPcfControl": false, 111 | "IsPremiumPcfControl": false, 112 | "IsWidgetTemplate": false, 113 | "LastModifiedTimestamp": "638006856266597549", 114 | "Name": "e8e064b670974778a79b19eb89a5f5d0", 115 | "OverridableProperties": {}, 116 | "TemplateOriginalName": "57414440641944cd9ecff1fd7569315e", 117 | "Version": "637973901809221962" 118 | } -------------------------------------------------------------------------------- /materialdesign components/docs/Template.md: -------------------------------------------------------------------------------- 1 | # Template 2 | 3 | ## Description 4 | 5 | The template should be your starting point for every new app. There are a few major and several minor differences to a normal empty canvas app. 6 | 7 | 1. All the necessary variables to define the colors and appearance of the components are stored in the **OnStart** -property of the app. 8 | If you want a "normal" theme, just change the primaryColor and you are good to go. 9 | 2. Many absolute values in new elements (buttons, textinputs, labels, etc.) are exchanged for the variables that are defined in the **OnStart**-property. Example: The standard **Fill** -property of a Button is `RGBA(56, 96, 178, 1)`, in the template it should be `defaults.primaryColor`. Therefore the standard elements match the components from the get go and you don't have to touch too many properties manually and can adjust them afterwards (change your primaryColor in the **OnStart** and the whole app should match that color). 10 | 3. There is a collection of ~6000 svg-Icons which is called `MaterialDesignIcons`. You can access them like this: `LookUp(MaterialDesignIcons, name="death-star", svgPath)`. Look at the demo app for examples in image controls or the components. 11 | 4. Many elements have their properties changed up a little bit to match the Material Design theme as closely as possible (some work better than others) 12 | 13 | ## Setup 14 | 15 | 1. Download the [msapp-file](../solution/MD_Template_v1_1.msapp) 16 | 2. Navigate to [make.powerapps.com](https://make.powerapps.com) 17 | 3. Select your environment 18 | 4. Select **Create** 19 | 5. Select **Dataverse** or **SharePoint** or **Excel** (doesn't matter, we won't actually use that - ⚠️ don't click **Blank app**) 20 | 6. Select **Open** 21 | 7. Select the `.msapp-File` from your file system 22 | 8. Save under new name 23 | 9. Add the app to your solution (you don't work in solutions? - go start now!) 24 | 25 | ## Demo 26 | 27 | New controls and components from the library should automatically match your specified colors 28 | 29 | ![Template](../assets/template.png) 30 | 31 | ## Tips and Tricks 32 | 33 | * The first part of the **OnStart**-property is where you input the colors and settings you want to use. Some colors are calculated again in Hex-code to style the SVG-icons. You can use them inside html-Controls or svg-Images. 34 | * You can introduce different themes like high contrast or dark mode and let the user choose which one they want to use (see examples) 35 | * Delete the items from the data-tab if you don't use them, the size of the data source is roughly 700 kB 36 | * if you want to use the template file for Custom Pages in Model Driven Apps [download the Solution that contains only a Custom Page](../solution/MaterialDesignCustomPage_1_0_0_3.zip) 37 | 38 | ## Experimental Version with user-defined formulas 39 | 40 | You can try out the [experimental version](../solution/MD_Template_v1_2_experimental.msapp). Use at own risk, as it uses the new experimental user-defined functions. 41 | The following functions are defined: 42 | * nfHexColor(color): retrieves Hex-Code from PowerApps-Color 43 | * nfColorTransparent(color, transparency): makes Color Transparent 44 | * nfIcon(iconName): retrieve icon SVG code of the built in icon table by name 45 | * nfColorSVG(svgCode,color): sets fill property for SVG to color it 46 | * nfWrapSVG(svgCode): wraps SVG to display on an image control 47 | * nfColoredIcon(iconName,color): retrieve icon SVG code of the built in icon table by name, assigns color and wraps it to directly display on an image control 48 | 49 | ## Known limitations 50 | 51 | * When changing colors in the OnStart-property sometimes the whole OnStart-property throws an error. Simply change all colors, save and reload the app and everything is back to normal 52 | * When creating/editing components inside the template you have to enable to access App scope, otherwise all element properties throw errors 53 | * You have to manually import the library components each time you start a new app, otherwise the components are not linked to the component library in your environment and you won't be able to update 54 | * Don't use the demo app as template for aforementioned reason 55 | 56 | ## Version 57 | 58 | | Version | description | 59 | | --- | --- | 60 | | 1.0.0 | First version | 61 | | 1.1.0 | fixed errors with date picker in a new Power Apps authoring version | 62 | | 1.2.0 | added experimental version | 63 | 64 | ## Reference and credit 65 | 66 | The techniques to create this template were discovered by [Sancho Harker](https://twitter.com/iAm_ManCat). Show him some love and tip him a coffee via paypal, if you can afford it. This will save you soooo much time! 67 | 68 | If you want to learn more visit [his blog](https://www.iammancat.dev/2022/01/power-apps-branding-template-v3/) 69 | 70 | The icons used in the template are imported from https://materialdesignicons.com/ through this repository https://github.com/Templarian/MaterialDesign 71 | These are partially the original Material Design icons and partially user created in the same style, check the homepage for more information. 72 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_RadioButton.json: -------------------------------------------------------------------------------- 1 | { 2 | "ComponentAllowCustomization": true, 3 | "ComponentChangedSinceFileImport": true, 4 | "ComponentManifest": { 5 | "AllowAccessToGlobals": false, 6 | "AllowCustomization": true, 7 | "Description": "", 8 | "Name": "cmp_MD_RadioButton", 9 | "TemplateGuid": "1f0575c7a11e4ae095f5eeaafd16b7ab" 10 | }, 11 | "ComponentType": "CanvasComponent", 12 | "CustomGroupControlTemplateName": "", 13 | "CustomProperties": [ 14 | { 15 | "Category": 0, 16 | "DisplayName": "primaryColor", 17 | "Hidden": false, 18 | "Name": "primaryColor", 19 | "PropertyDataTypeKey": "Color", 20 | "Tooltip": "A custom property", 21 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 22 | }, 23 | { 24 | "Category": 0, 25 | "DisplayName": "outsideMargin", 26 | "Hidden": false, 27 | "Name": "outsideMargin", 28 | "PropertyDataTypeKey": "Number", 29 | "Tooltip": "A custom property", 30 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 31 | }, 32 | { 33 | "Category": 0, 34 | "DisplayName": "iconSize", 35 | "Hidden": false, 36 | "Name": "iconSize", 37 | "PropertyDataTypeKey": "Number", 38 | "Tooltip": "A custom property", 39 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 40 | }, 41 | { 42 | "Category": 0, 43 | "DisplayName": "radiobuttonValue", 44 | "Hidden": true, 45 | "Name": "radiobuttonValue", 46 | "PropertyDataTypeKey": "String", 47 | "Tooltip": "A custom property", 48 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 49 | }, 50 | { 51 | "Category": 0, 52 | "DisplayName": "disabledColor", 53 | "Hidden": false, 54 | "Name": "disabledColor", 55 | "PropertyDataTypeKey": "Color", 56 | "Tooltip": "A custom property", 57 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 58 | }, 59 | { 60 | "Category": 0, 61 | "DisplayName": "hoverFill", 62 | "Hidden": false, 63 | "Name": "hoverFill", 64 | "PropertyDataTypeKey": "Color", 65 | "Tooltip": "A custom property", 66 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 67 | }, 68 | { 69 | "Category": 0, 70 | "DisplayName": "font", 71 | "Hidden": false, 72 | "Name": "font", 73 | "PropertyDataTypeKey": "String", 74 | "Tooltip": "A custom property", 75 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 76 | }, 77 | { 78 | "Category": 0, 79 | "DisplayName": "fontSize", 80 | "Hidden": false, 81 | "Name": "fontSize", 82 | "PropertyDataTypeKey": "Number", 83 | "Tooltip": "A custom property", 84 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 85 | }, 86 | { 87 | "Category": 0, 88 | "DisplayName": "fontWeight", 89 | "Hidden": false, 90 | "Name": "fontWeight", 91 | "PropertyDataTypeKey": "String", 92 | "Tooltip": "A custom property", 93 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 94 | }, 95 | { 96 | "Category": 0, 97 | "DisplayName": "fontColor", 98 | "Hidden": false, 99 | "Name": "fontColor", 100 | "PropertyDataTypeKey": "Color", 101 | "Tooltip": "A custom property", 102 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 103 | }, 104 | { 105 | "Category": 0, 106 | "DisplayName": "galleryContent", 107 | "Hidden": false, 108 | "Name": "galleryContent", 109 | "PropertyDataTypeKey": "Table", 110 | "Tooltip": "A custom property", 111 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Table\",\"EnumString\":\"\",\"Type\":[{\"Name\":\"id\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]},{\"Name\":\"title\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}]}}" 112 | } 113 | ], 114 | "FirstParty": true, 115 | "Id": "http://microsoft.com/appmagic/Component", 116 | "IsComponentLocked": false, 117 | "IsComponentTemplate": true, 118 | "IsCustomGroupControlTemplate": false, 119 | "IsPcfControl": false, 120 | "IsPremiumPcfControl": false, 121 | "IsWidgetTemplate": false, 122 | "LastModifiedTimestamp": "638006856266642106", 123 | "Name": "1f0575c7a11e4ae095f5eeaafd16b7ab", 124 | "OverridableProperties": {}, 125 | "TemplateOriginalName": "1aa22dfa3d3c42ad8741249e7dc7f810", 126 | "Version": "637977160247587892" 127 | } -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_Snackbar.fx.yaml: -------------------------------------------------------------------------------- 1 | cmp_MD_Snackbar As CanvasComponent: 2 | actionColor: =ColorFade(defaults.primaryColor, 70%) 3 | actionOnSelect: =true 4 | actionText: ="UNDO" 5 | backgroundColor: =defaults.textColor 6 | borderRadius: =50 7 | boxShadow: =true 8 | duration: =100 9 | Fill: =Transparent 10 | font: ="Roboto" 11 | fontSize: =20 12 | fontWeight: =FontWeight.Normal 13 | Height: =90 14 | onHide: =true 15 | outsideMargin: =20 16 | text: ="You really just did that?!" 17 | textColor: =defaults.backgroundColor 18 | textPaddingLeft: =20 19 | timerStart: =true 20 | transitionAnimation: =true 21 | transitionTime: =200 22 | Width: =600 23 | X: =0 24 | Y: =0 25 | ZIndex: =1 26 | 27 | tim_duration As timer: 28 | Duration: =cmp_MD_Snackbar.duration 29 | OnTimerEnd: =cmp_MD_Snackbar.onHide() 30 | Reset: =!cmp_MD_Snackbar.timerStart 31 | Start: =cmp_MD_Snackbar.timerStart 32 | Visible: =false 33 | X: =60 34 | Y: =50 35 | ZIndex: =2 36 | 37 | con_Snackbar As groupContainer.manualLayoutContainer: 38 | Height: =Parent.Height 39 | Width: =Parent.Width 40 | Y: |+ 41 | =With({shrinkTimer: tim_duration.Value+cmp_MD_Snackbar.transitionTime-cmp_MD_Snackbar.duration}, 42 | If( 43 | cmp_MD_Snackbar.transitionAnimation, 44 | If( 45 | tim_duration.Value<=cmp_MD_Snackbar.transitionTime, 46 | -cmp_MD_Snackbar.Height*(tim_duration.Value-cmp_MD_Snackbar.transitionTime)/cmp_MD_Snackbar.transitionTime, 47 | shrinkTimer>=0, 48 | cmp_MD_Snackbar.Height*(shrinkTimer)/cmp_MD_Snackbar.transitionTime, 49 | 0), 50 | 0 51 | ) 52 | ) 53 | 54 | ZIndex: =4 55 | 56 | html_snackShadow As htmlViewer: 57 | Height: =cmp_MD_Snackbar.Height 58 | HtmlText: |- 59 | ="
70 | 71 |
72 | 73 | " 74 | PaddingBottom: =0 75 | PaddingLeft: =0 76 | PaddingRight: =0 77 | PaddingTop: =0 78 | Width: =cmp_MD_Snackbar.Width 79 | ZIndex: =1 80 | 81 | btn_snackBackground As button: 82 | Align: =Align.Left 83 | BorderStyle: =BorderStyle.None 84 | BorderThickness: =0 85 | Color: =cmp_MD_Snackbar.textColor 86 | DisabledColor: =cmp_MD_Snackbar.textColor 87 | DisabledFill: =cmp_MD_Snackbar.backgroundColor 88 | DisplayMode: =DisplayMode.Disabled 89 | Fill: =cmp_MD_Snackbar.backgroundColor 90 | FocusedBorderColor: =Transparent 91 | FocusedBorderThickness: =0 92 | Font: =cmp_MD_Snackbar.font 93 | FontWeight: =cmp_MD_Snackbar.fontWeight 94 | Height: =cmp_MD_Snackbar.Height-2*cmp_MD_Snackbar.outsideMargin 95 | HoverFill: =Self.Fill 96 | PaddingBottom: =0 97 | PaddingLeft: =cmp_MD_Snackbar.textPaddingLeft 98 | PaddingRight: =btn_snackAction.Width 99 | PaddingTop: =0 100 | PressedFill: =RGBA(0, 0, 0, 0.5) 101 | RadiusBottomLeft: =cmp_MD_Snackbar.borderRadius 102 | RadiusBottomRight: =cmp_MD_Snackbar.borderRadius 103 | RadiusTopLeft: =cmp_MD_Snackbar.borderRadius 104 | RadiusTopRight: =cmp_MD_Snackbar.borderRadius 105 | Size: =cmp_MD_Snackbar.fontSize 106 | Text: =cmp_MD_Snackbar.text 107 | Width: =cmp_MD_Snackbar.Width-2*cmp_MD_Snackbar.outsideMargin 108 | X: =cmp_MD_Snackbar.outsideMargin 109 | Y: =cmp_MD_Snackbar.outsideMargin 110 | ZIndex: =4 111 | 112 | btn_snackAction As button: 113 | BorderStyle: =BorderStyle.None 114 | Color: =cmp_MD_Snackbar.actionColor 115 | DisabledFill: =Transparent 116 | Fill: =Transparent 117 | Font: =cmp_MD_Snackbar.font 118 | FontWeight: =cmp_MD_Snackbar.fontWeight 119 | Height: =btn_snackBackground.Height 120 | HoverColor: =ColorFade(Self.Color, 30%) 121 | HoverFill: =Transparent 122 | OnSelect: =cmp_MD_Snackbar.actionOnSelect() 123 | PaddingBottom: =0 124 | PaddingLeft: =0 125 | PaddingRight: =0 126 | PaddingTop: =0 127 | PressedFill: =Transparent 128 | Size: =cmp_MD_Snackbar.fontSize 129 | Text: =cmp_MD_Snackbar.actionText 130 | Width: =Self.Size*10 131 | X: =btn_snackBackground.Width+btn_snackBackground.X-Self.Width 132 | Y: =btn_snackBackground.Y 133 | ZIndex: =5 134 | 135 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_AppBar_top.json: -------------------------------------------------------------------------------- 1 | { 2 | "ComponentAllowCustomization": true, 3 | "ComponentChangedSinceFileImport": true, 4 | "ComponentManifest": { 5 | "AllowAccessToGlobals": false, 6 | "AllowCustomization": true, 7 | "Description": "", 8 | "Name": "cmp_MD_AppBar_top", 9 | "TemplateGuid": "31b5d7d81ac3488b83f5f68e5ae9a0c9" 10 | }, 11 | "ComponentType": "CanvasComponent", 12 | "CustomGroupControlTemplateName": "", 13 | "CustomProperties": [ 14 | { 15 | "Category": 0, 16 | "DisplayName": "appBarTop1Color", 17 | "Hidden": false, 18 | "Name": "appBarTop1Color", 19 | "PropertyDataTypeKey": "Color", 20 | "Tooltip": "A custom property", 21 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 22 | }, 23 | { 24 | "Category": 0, 25 | "DisplayName": "appBarTop2Color", 26 | "Hidden": false, 27 | "Name": "appBarTop2Color", 28 | "PropertyDataTypeKey": "Color", 29 | "Tooltip": "A custom property", 30 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 31 | }, 32 | { 33 | "Category": 0, 34 | "DisplayName": "mockVisible", 35 | "Hidden": false, 36 | "Name": "mockVisible", 37 | "PropertyDataTypeKey": "Boolean", 38 | "Tooltip": "A custom property", 39 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"_MinPrimitive\",\"EnumString\":\"\",\"Type\":[]}}" 40 | }, 41 | { 42 | "Category": 0, 43 | "DisplayName": "Custom property 1", 44 | "Hidden": false, 45 | "Name": "iconColor", 46 | "PropertyDataTypeKey": "String", 47 | "Tooltip": "A custom property", 48 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 49 | }, 50 | { 51 | "Category": 0, 52 | "DisplayName": "textColor", 53 | "Hidden": false, 54 | "Name": "textColor", 55 | "PropertyDataTypeKey": "Color", 56 | "Tooltip": "A custom property", 57 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 58 | }, 59 | { 60 | "Category": 0, 61 | "DisplayName": "titleText", 62 | "Hidden": false, 63 | "Name": "titleText", 64 | "PropertyDataTypeKey": "String", 65 | "Tooltip": "A custom property", 66 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 67 | }, 68 | { 69 | "Category": 2, 70 | "DisplayName": "onselectMenu", 71 | "Hidden": false, 72 | "Name": "onselectMenu", 73 | "PropertyDataTypeKey": "Boolean", 74 | "Tooltip": "A custom property", 75 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"_MinPrimitive\",\"EnumString\":\"\",\"Type\":[]}}" 76 | }, 77 | { 78 | "Category": 2, 79 | "DisplayName": "onselectShare", 80 | "Hidden": false, 81 | "Name": "onselectShare", 82 | "PropertyDataTypeKey": "Boolean", 83 | "Tooltip": "A custom property", 84 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"_MinPrimitive\",\"EnumString\":\"\",\"Type\":[]}}" 85 | }, 86 | { 87 | "Category": 2, 88 | "DisplayName": "onSelectSearch", 89 | "Hidden": false, 90 | "Name": "onSelectSearch", 91 | "PropertyDataTypeKey": "Boolean", 92 | "Tooltip": "A custom property", 93 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"_MinPrimitive\",\"EnumString\":\"\",\"Type\":[]}}" 94 | }, 95 | { 96 | "Category": 2, 97 | "DisplayName": "onSelectContext", 98 | "Hidden": false, 99 | "Name": "onSelectContext", 100 | "PropertyDataTypeKey": "Boolean", 101 | "Tooltip": "A custom property", 102 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"_MinPrimitive\",\"EnumString\":\"\",\"Type\":[]}}" 103 | }, 104 | { 105 | "Category": 0, 106 | "DisplayName": "icon1", 107 | "Hidden": false, 108 | "Name": "icon1", 109 | "PropertyDataTypeKey": "Image", 110 | "Tooltip": "A custom property", 111 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Image\",\"EnumString\":\"\",\"Type\":[]}}" 112 | }, 113 | { 114 | "Category": 0, 115 | "DisplayName": "icon2", 116 | "Hidden": false, 117 | "Name": "icon2", 118 | "PropertyDataTypeKey": "Image", 119 | "Tooltip": "A custom property", 120 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Image\",\"EnumString\":\"\",\"Type\":[]}}" 121 | }, 122 | { 123 | "Category": 0, 124 | "DisplayName": "icon3", 125 | "Hidden": false, 126 | "Name": "icon3", 127 | "PropertyDataTypeKey": "Image", 128 | "Tooltip": "A custom property", 129 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Image\",\"EnumString\":\"\",\"Type\":[]}}" 130 | }, 131 | { 132 | "Category": 0, 133 | "DisplayName": "icon4", 134 | "Hidden": false, 135 | "Name": "icon4", 136 | "PropertyDataTypeKey": "Image", 137 | "Tooltip": "A custom property", 138 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Image\",\"EnumString\":\"\",\"Type\":[]}}" 139 | } 140 | ], 141 | "FirstParty": true, 142 | "Id": "http://microsoft.com/appmagic/Component", 143 | "IsComponentLocked": false, 144 | "IsComponentTemplate": true, 145 | "IsCustomGroupControlTemplate": false, 146 | "IsPcfControl": false, 147 | "IsPremiumPcfControl": false, 148 | "IsWidgetTemplate": false, 149 | "LastModifiedTimestamp": "638006856266605214", 150 | "Name": "31b5d7d81ac3488b83f5f68e5ae9a0c9", 151 | "OverridableProperties": {}, 152 | "TemplateOriginalName": "c01fee4e1e514d8c963219ac8b24e8d0", 153 | "Version": "637972002575433278" 154 | } -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Buttons.fx.yaml: -------------------------------------------------------------------------------- 1 | Buttons As screen: 2 | OnVisible: |- 3 | =Reset(Button_8); 4 | Reset(Button_7); 5 | Reset(Button_4); 6 | Reset(Button_1); 7 | Reset(Button_2); 8 | Reset(Button_3) 9 | 10 | Button_3 As cmp_MD_Button: 11 | borderRadius: =10 12 | buttonText: ="EST" 13 | font: ="Roboto" 14 | Height: =110 15 | outlinedButton: =true 16 | svgIcon: |- 17 | =" 19 | 20 | 23 | 25 | 26 | " 27 | Width: =506 28 | X: =76 29 | Y: =372 30 | 31 | Button_2 As cmp_MD_Button: 32 | borderRadius: =100 33 | borderThickness: =0 34 | boxShadow: =false 35 | Height: =87 36 | outlinedButton: =true 37 | Width: =286 38 | X: =354 39 | Y: =567 40 | ZIndex: =2 41 | 42 | Button_1 As cmp_MD_Button: 43 | borderRadius: =100 44 | borderThickness: =0 45 | boxShadow: =!Self.outlinedButton 46 | buttonText: ="" 47 | displayMode: =Edit 48 | Height: =100 49 | iconSize: =0.7 50 | onSelect: =Set(varLoading, !varLoading) 51 | outlinedButton: =true 52 | svgIcon: |- 53 | ="" 54 | Width: =100 55 | X: =249 56 | Y: =182 57 | ZIndex: =3 58 | 59 | Button_4 As cmp_MD_Button: 60 | borderRadius: =100 61 | boxShadow: =false 62 | Height: =92 63 | outlinedButton: =true 64 | primaryColor: =RGBA(109, 49, 162, 1) 65 | Width: =385 66 | X: =141 67 | Y: =1035 68 | ZIndex: =4 69 | 70 | Button_7 As cmp_MD_Button: 71 | borderRadius: =0 72 | font: ="Arial" 73 | fontSize: =10 74 | Height: =79 75 | svgIcon: |- 76 | ="" 77 | Width: =185 78 | X: =76 79 | Y: =892 80 | ZIndex: =5 81 | 82 | Button_8 As cmp_MD_Button: 83 | borderRadius: =100 84 | borderThickness: =0 85 | fontWeight: =FontWeight.Lighter 86 | Height: =92 87 | svgIcon: |- 88 | ="" 89 | Width: =485 90 | X: =22 91 | Y: =776 92 | ZIndex: =6 93 | 94 | Rectangle3 As rectangle: 95 | Fill: =RGBA(230, 230, 230, 1) 96 | Height: =4 97 | Width: =640 98 | Y: =96 99 | ZIndex: =8 100 | 101 | cmp_MD_ProgressIndicator_1 As cmp_MD_ProgressIndicator: 102 | transitionStart: =varLoading 103 | Visible: =varLoading 104 | Y: =90 105 | ZIndex: =9 106 | 107 | Label2 As label: 108 | Font: ="Roboto" 109 | Height: =70 110 | Size: =21 111 | Text: ="Material Design Demo" 112 | Width: =560 113 | X: =22 114 | Y: =20 115 | ZIndex: =10 116 | 117 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_Dialog.fx.yaml: -------------------------------------------------------------------------------- 1 | cmp_MD_Dialog As CanvasComponent: 2 | action1OnSelect: =true 3 | action1Text: ="ACTION1" 4 | action2OnSelect: =true 5 | action2Text: ="ACTION2" 6 | backgroundColor: =defaults.backgroundColor 7 | backGroundColorHex: =defaults.backgroundColorHex 8 | borderRadius: =Max(defaults.borderRadius, 20) 9 | boxShadow: =true 10 | dialogWidth: =500 11 | Fill: =RGBA(0,0,0,0.3) 12 | font: =defaults.font 13 | fontSize: =defaults.fontSize 14 | header: ="Meaningful Header" 15 | Height: =Parent.Height 16 | OnReset: |- 17 | =//Otherwise the Auto-Height Labels don't set the height correctly 18 | Set(varWidth, cmp_MD_Dialog.dialogWidth+1); 19 | Set(varWidth, cmp_MD_Dialog.dialogWidth); 20 | primaryColor: =defaults.primaryColor 21 | text: ="Do you really really really want to delete this?" 22 | textColor: =RGBA(30, 30, 30, 1) 23 | textPaddingLeft: =20 24 | Visible: =true 25 | Width: =Parent.Width 26 | X: =0 27 | Y: =0 28 | ZIndex: =1 29 | 30 | con_Dialog As groupContainer.manualLayoutContainer: 31 | Fill: =Transparent 32 | Height: |- 33 | =//cmp_MD_Dialog.dialogHeight+20 34 | btn_dialogAction1.Y+btn_dialogAction1.Height+20 35 | Width: =varWidth+20 36 | X: =(Parent.Width-Self.Width)/2 37 | Y: =(Parent.Height-Self.Height)/2 38 | ZIndex: =4 39 | 40 | html_dialogBoxshadow As htmlViewer: 41 | Fill: =Transparent 42 | Height: =Parent.Height 43 | HtmlText: |- 44 | ="
55 | 56 |
57 | 58 | " 59 | PaddingBottom: =0 60 | PaddingLeft: =0 61 | PaddingRight: =0 62 | PaddingTop: =0 63 | Visible: =cmp_MD_Dialog.boxShadow 64 | Width: =Parent.Width 65 | ZIndex: =1 66 | 67 | btn_dialogBG As button: 68 | BorderStyle: =BorderStyle.None 69 | BorderThickness: =0 70 | DisabledBorderColor: =Transparent 71 | DisabledFill: =cmp_MD_Dialog.backgroundColor 72 | DisplayMode: =DisplayMode.Disabled 73 | Height: =Parent.Height-20 74 | RadiusBottomLeft: =cmp_MD_Dialog.borderRadius 75 | RadiusBottomRight: =cmp_MD_Dialog.borderRadius 76 | RadiusTopLeft: =cmp_MD_Dialog.borderRadius 77 | RadiusTopRight: =cmp_MD_Dialog.borderRadius 78 | Size: =24 79 | Text: ="" 80 | Width: =Parent.Width-20 81 | X: =10 82 | Y: =10 83 | ZIndex: =2 84 | 85 | btn_dialogAction1 As button: 86 | BorderStyle: =BorderStyle.None 87 | Color: =cmp_MD_Dialog.primaryColor 88 | DisabledFill: =Transparent 89 | Fill: =Transparent 90 | Font: =cmp_MD_Dialog.font 91 | FontWeight: =Normal 92 | Height: =50 93 | HoverColor: =ColorFade(Self.Color, 30%) 94 | HoverFill: =Transparent 95 | OnSelect: =cmp_MD_Dialog.action1OnSelect() 96 | PaddingBottom: =0 97 | PaddingLeft: =0 98 | PaddingRight: =0 99 | PaddingTop: =0 100 | PressedFill: =Transparent 101 | Size: =cmp_MD_Dialog.fontSize 102 | Text: =cmp_MD_Dialog.action1Text 103 | Width: =Len(Self.Text)*Self.Size*0.9+20 104 | X: =con_Dialog.Width-Self.Width-25 105 | Y: |- 106 | =//Parent.Height-Self.Height-10 107 | lbl_dialogText.Y+lbl_dialogText.Height 108 | ZIndex: =3 109 | 110 | btn_dialogAction2 As button: 111 | BorderStyle: =BorderStyle.None 112 | Color: =cmp_MD_Dialog.primaryColor 113 | DisabledFill: =Transparent 114 | Fill: =Transparent 115 | Font: =cmp_MD_Dialog.font 116 | FontWeight: =Normal 117 | Height: =50 118 | HoverColor: =ColorFade(Self.Color, 30%) 119 | HoverFill: =Transparent 120 | OnSelect: =cmp_MD_Dialog.action2OnSelect() 121 | PaddingBottom: =0 122 | PaddingLeft: =0 123 | PaddingRight: =0 124 | PaddingTop: =0 125 | PressedFill: =Transparent 126 | Size: =cmp_MD_Dialog.fontSize 127 | Text: =cmp_MD_Dialog.action2Text 128 | Width: =Len(Self.Text)*Self.Size*0.9+20 129 | X: =btn_dialogAction1.X-Self.Width-8 130 | Y: |- 131 | =//Parent.Height-Self.Height-10 132 | lbl_dialogText.Y+lbl_dialogText.Height 133 | ZIndex: =4 134 | 135 | lbl_dialogText As label: 136 | AutoHeight: =true 137 | Color: =cmp_MD_Dialog.textColor 138 | Height: =72 139 | PaddingBottom: =40 140 | PaddingLeft: =40 141 | PaddingRight: =40 142 | PaddingTop: =40 143 | Size: =cmp_MD_Dialog.fontSize 144 | Text: =cmp_MD_Dialog.text 145 | Width: =Parent.Width 146 | Y: =If(IsBlank(cmp_MD_Dialog.header), 0, lbl_dialogHeader.Height) 147 | ZIndex: =5 148 | 149 | lbl_dialogHeader As label: 150 | AutoHeight: =true 151 | Color: =cmp_MD_Dialog.textColor 152 | FontWeight: =FontWeight.Bold 153 | Height: =72 154 | PaddingBottom: =0 155 | PaddingLeft: =40 156 | PaddingRight: =40 157 | PaddingTop: =40 158 | Size: =cmp_MD_Dialog.fontSize+4 159 | Text: =cmp_MD_Dialog.header 160 | Width: =Parent.Width 161 | ZIndex: =6 162 | 163 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_Gallery.fx.yaml: -------------------------------------------------------------------------------- 1 | cmp_MD_Gallery As CanvasComponent: 2 | Fill: =RGBA(0, 0, 0, 0) 3 | galleryContent: |- 4 | =Table( 5 | //row 1, 3 images 6 | { 7 | id: 1, 8 | image: "https://images.unsplash.com/photo-1585366119957-e9730b6d0f60?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bGVnb3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60", 9 | width: cmp_MD_Gallery.singleImageWidth 10 | }, 11 | { 12 | id: 2, 13 | image:"https://images.unsplash.com/photo-1611604548018-d56bbd85d681?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8bGVnb3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60", 14 | width: cmp_MD_Gallery.singleImageWidth 15 | }, 16 | { 17 | id: 3, 18 | image: "https://images.unsplash.com/photo-1558492426-df14e290aefa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGxlZ298ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", 19 | width: cmp_MD_Gallery.singleImageWidth 20 | }, 21 | // row 2, 2 images (1st 2/3, 2nd 1/3) 22 | { 23 | id: 4, 24 | image: "https://images.unsplash.com/photo-1610483178766-8092d96033f3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGxlZ298ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", 25 | width: 2 * (cmp_MD_Gallery.singleImageWidth) + cmp_MD_Gallery.imagePadding 26 | }, 27 | {id: 5}, 28 | { 29 | id: 5, 30 | image: "https://images.unsplash.com/photo-1513384312027-9fa69a360337?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mjl8fGxlZ298ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", 31 | width: cmp_MD_Gallery.singleImageWidth 32 | }, 33 | //3rd row - 1 image 34 | { 35 | id: 6, 36 | image: "https://images.unsplash.com/photo-1589254066007-898d52d910d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjZ8fGxlZ298ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", 37 | width: 3 * (cmp_MD_Gallery.singleImageWidth) + 2 * ( cmp_MD_Gallery.imagePadding) 38 | }, 39 | {id: 7}, 40 | {id: 8}, 41 | //4th row - 2 images (1st 1/3, 2nd 2/3) 42 | { 43 | id: 7, 44 | image: "https://images.unsplash.com/photo-1518331483807-f6adb0e1ad23?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzB8fGxlZ298ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", 45 | width: cmp_MD_Gallery.singleImageWidth 46 | }, 47 | { 48 | id: 8, 49 | image: "https://images.unsplash.com/photo-1560167016-022b78a0258e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzF8fGxlZ298ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", 50 | width: 2 * (cmp_MD_Gallery.singleImageWidth) + cmp_MD_Gallery.imagePadding 51 | }, 52 | {id: 9}, 53 | //5th row - 3 images 54 | { 55 | id: 9, 56 | image: "https://images.unsplash.com/photo-1538448174498-9956c159edb0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzN8fGxlZ298ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", 57 | width: cmp_MD_Gallery.singleImageWidth 58 | }, 59 | { 60 | id: 10, 61 | image: "https://images.unsplash.com/photo-1563823263008-ec7877629ba0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzZ8fGxlZ298ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", 62 | width: cmp_MD_Gallery.singleImageWidth 63 | }, 64 | { 65 | id: 11, 66 | image: "https://images.unsplash.com/photo-1584847642060-a46e239155a8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mzl8fGxlZ298ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", 67 | width: cmp_MD_Gallery.singleImageWidth 68 | }, 69 | //6th row -rest 70 | { 71 | id: 12, 72 | image: "https://images.unsplash.com/photo-1527694747350-2d483ffcff28?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDV8fGxlZ298ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", 73 | width: cmp_MD_Gallery.singleImageWidth 74 | }, 75 | { 76 | id: 13, 77 | image: "https://images.unsplash.com/photo-1624979641604-f01368fab830?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDl8fGxlZ298ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", 78 | width: 2 * (cmp_MD_Gallery.singleImageWidth) + cmp_MD_Gallery.imagePadding 79 | } 80 | ) 81 | Height: =1000 82 | imagePadding: =10 83 | singleImageWidth: =200 84 | Width: =640 85 | X: =0 86 | Y: =0 87 | ZIndex: =1 88 | 89 | "Gallery1 As gallery.'BrowseLayout_Vertical_TwoTextOneImageVariant_ver4.0'": 90 | Height: =1000 91 | Items: =cmp_MD_Gallery.galleryContent 92 | Layout: =Layout.Vertical 93 | ShowScrollbar: =false 94 | TemplatePadding: =cmp_MD_Gallery.imagePadding 95 | TemplateSize: =300 96 | Transition: =Transition.Pop 97 | Width: =Parent.Width 98 | WrapCount: =3 99 | ZIndex: =1 100 | 101 | Image1 As image: 102 | Height: =300 103 | Image: =ThisItem.image 104 | ImagePosition: =ImagePosition.Fill 105 | OnSelect: =Set(isLarge, true) 106 | Width: =ThisItem.width 107 | Y: |- 108 | =//(Parent.TemplateHeight / 2) - (Self.Height / 2) 109 | Slider1.Value 110 | ZIndex: =1 111 | 112 | Slider1 As slider: 113 | BorderColor: =RGBA(0, 0, 0, 0) 114 | DisabledBorderColor: =RGBA(0, 0, 0, 0) 115 | HandleActiveFill: =Transparent 116 | HandleFill: =RGBA(0, 0, 0, 0) 117 | HandleHoverFill: =Transparent 118 | HandleSize: =Parent.Width/2 119 | Height: =Gallery1.Height 120 | HoverBorderColor: =Transparent 121 | Layout: =Layout.Vertical 122 | Max: =0 123 | Min: =Gallery1.Height*(-1) 124 | PressedBorderColor: =Transparent 125 | RailFill: =RGBA(0, 0, 0, 0) 126 | RailHoverFill: =Transparent 127 | ShowValue: =false 128 | ValueFill: =RGBA(0, 0, 0, 0) 129 | Width: =Parent.Width 130 | ZIndex: =2 131 | 132 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_Slider.json: -------------------------------------------------------------------------------- 1 | { 2 | "ComponentAllowCustomization": true, 3 | "ComponentChangedSinceFileImport": true, 4 | "ComponentManifest": { 5 | "AllowAccessToGlobals": false, 6 | "AllowCustomization": true, 7 | "Description": "", 8 | "Name": "cmp_MD_Slider", 9 | "TemplateGuid": "26f988f46bf847eea1599da063b4a296" 10 | }, 11 | "ComponentType": "CanvasComponent", 12 | "CustomGroupControlTemplateName": "", 13 | "CustomProperties": [ 14 | { 15 | "Category": 0, 16 | "DisplayName": "showInputLabel", 17 | "Hidden": false, 18 | "Name": "showInputLabel", 19 | "PropertyDataTypeKey": "Boolean", 20 | "Tooltip": "A custom property", 21 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"_MinPrimitive\",\"EnumString\":\"\",\"Type\":[]}}" 22 | }, 23 | { 24 | "Category": 0, 25 | "DisplayName": "elementBackgroundColorHex", 26 | "Hidden": false, 27 | "Name": "elementBackgroundColorHex", 28 | "PropertyDataTypeKey": "String", 29 | "Tooltip": "A custom property", 30 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 31 | }, 32 | { 33 | "Category": 0, 34 | "DisplayName": "primaryColorTransparentHex", 35 | "Hidden": false, 36 | "Name": "primaryColorTransparentHex", 37 | "PropertyDataTypeKey": "String", 38 | "Tooltip": "A custom property", 39 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 40 | }, 41 | { 42 | "Category": 0, 43 | "DisplayName": "value", 44 | "Hidden": true, 45 | "Name": "value", 46 | "PropertyDataTypeKey": "Number", 47 | "Tooltip": "A custom property", 48 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 49 | }, 50 | { 51 | "Category": 0, 52 | "DisplayName": "primaryColor", 53 | "Hidden": false, 54 | "Name": "primaryColor", 55 | "PropertyDataTypeKey": "Color", 56 | "Tooltip": "A custom property", 57 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 58 | }, 59 | { 60 | "Category": 0, 61 | "DisplayName": "outsideMargin", 62 | "Hidden": false, 63 | "Name": "outsideMargin", 64 | "PropertyDataTypeKey": "Number", 65 | "Tooltip": "A custom property", 66 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 67 | }, 68 | { 69 | "Category": 0, 70 | "DisplayName": "toggleSize", 71 | "Hidden": false, 72 | "Name": "toggleSize", 73 | "PropertyDataTypeKey": "Number", 74 | "Tooltip": "A custom property", 75 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 76 | }, 77 | { 78 | "Category": 0, 79 | "DisplayName": "lineWidth", 80 | "Hidden": false, 81 | "Name": "lineWidth", 82 | "PropertyDataTypeKey": "Number", 83 | "Tooltip": "A custom property", 84 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 85 | }, 86 | { 87 | "Category": 0, 88 | "DisplayName": "valueMax", 89 | "Hidden": false, 90 | "Name": "valueMax", 91 | "PropertyDataTypeKey": "Number", 92 | "Tooltip": "A custom property", 93 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 94 | }, 95 | { 96 | "Category": 0, 97 | "DisplayName": "valueMin", 98 | "Hidden": false, 99 | "Name": "valueMin", 100 | "PropertyDataTypeKey": "Number", 101 | "Tooltip": "A custom property", 102 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 103 | }, 104 | { 105 | "Category": 0, 106 | "DisplayName": "valueDefault", 107 | "Hidden": false, 108 | "Name": "valueDefault", 109 | "PropertyDataTypeKey": "Number", 110 | "Tooltip": "A custom property", 111 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 112 | }, 113 | { 114 | "Category": 0, 115 | "DisplayName": "font", 116 | "Hidden": false, 117 | "Name": "font", 118 | "PropertyDataTypeKey": "String", 119 | "Tooltip": "A custom property", 120 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 121 | }, 122 | { 123 | "Category": 0, 124 | "DisplayName": "fontWeight", 125 | "Hidden": false, 126 | "Name": "fontWeight", 127 | "PropertyDataTypeKey": "String", 128 | "Tooltip": "A custom property", 129 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 130 | }, 131 | { 132 | "Category": 0, 133 | "DisplayName": "fontSize", 134 | "Hidden": false, 135 | "Name": "fontSize", 136 | "PropertyDataTypeKey": "Number", 137 | "Tooltip": "A custom property", 138 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 139 | }, 140 | { 141 | "Category": 0, 142 | "DisplayName": "textColor", 143 | "Hidden": false, 144 | "Name": "textColor", 145 | "PropertyDataTypeKey": "Color", 146 | "Tooltip": "A custom property", 147 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 148 | }, 149 | { 150 | "Category": 0, 151 | "DisplayName": "disabledColor", 152 | "Hidden": false, 153 | "Name": "disabledColor", 154 | "PropertyDataTypeKey": "Color", 155 | "Tooltip": "A custom property", 156 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 157 | }, 158 | { 159 | "Category": 0, 160 | "DisplayName": "showLabel", 161 | "Hidden": false, 162 | "Name": "showLabel", 163 | "PropertyDataTypeKey": "Boolean", 164 | "Tooltip": "A custom property", 165 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"_MinPrimitive\",\"EnumString\":\"\",\"Type\":[]}}" 166 | } 167 | ], 168 | "FirstParty": true, 169 | "Id": "http://microsoft.com/appmagic/Component", 170 | "IsComponentLocked": false, 171 | "IsComponentTemplate": true, 172 | "IsCustomGroupControlTemplate": false, 173 | "IsPcfControl": false, 174 | "IsPremiumPcfControl": false, 175 | "IsWidgetTemplate": false, 176 | "LastModifiedTimestamp": "638006856266561199", 177 | "Name": "26f988f46bf847eea1599da063b4a296", 178 | "OverridableProperties": {}, 179 | "TemplateOriginalName": "99ac2d5ed60942608d425e2d2bf7d999", 180 | "Version": "637977160247587892" 181 | } -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Entropy/checksum.json: -------------------------------------------------------------------------------- 1 | { 2 | "ClientBuildDetails": { 3 | "CommitHash": "43a2d91475ace5821de880f67a50861e9b1a3a76", 4 | "IsLocalBuild": false 5 | }, 6 | "ClientPerFileChecksums": { 7 | "AppCheckerResult.sarif": "C8_zbhehFxT6VNQ3HFvOArK1HfW/bSf2Y7f0Gs18XpC/7w=", 8 | "Components\\100.json": "C8_EwCwMwMXb0LzyOXFVUiYTaqySr7OCfjX4gle/cEN3ts=", 9 | "Components\\106.json": "C8_1J3ZCJ0FOy/RNpjkgjQUMzsG2RONC5uW3f2hWSWcCXI=", 10 | "Components\\109.json": "C8_KlrZl6ie8GcFGVeMbUzjaPd7YIIOlOW54r2UmMuM9xw=", 11 | "Components\\114.json": "C8_Z8ZQyPH6VVzaP2ExWl08kG37sWD+cjXeaIhEx2UwEbw=", 12 | "Components\\124.json": "C8_N/ln7mpjt5jsx5vmnS0sPeXokkm/w/QVx1iq4ysw3Qo=", 13 | "Components\\132.json": "C8_7jOd0brp+XTgnLlzg2zsvwsBJxaVRdXj+gcCweenUGw=", 14 | "Components\\153.json": "C8_D73gAtbFwLuzY+9IxxFAkEEqSwFFCP++0ht55Anj7A8=", 15 | "Components\\159.json": "C8_TQdNYvXAnTmu/ajN9S5pBiEWtZCwljL2RHkDwxMu7JA=", 16 | "Components\\166.json": "C8_+i00c9aoDZQZFodIwEX4E7dG1tdLcxUxJwIxhTaZJlc=", 17 | "Components\\176.json": "C8_7ojL8+P3c+rUORF1v3jz1th6vbXAC9IV0CF81PM5Ros=", 18 | "Components\\22.json": "C8_lZTeWVKm+N3Jxg1mpZnlwdOJsDzObD0n30Zxtd39PVI=", 19 | "Components\\27.json": "C8_gKW32HIAoT6unezks6s4nL/K6/w73+x6PmxERkXH17o=", 20 | "Components\\3.json": "C8_y32X9YKfCRR0EKQuUMI9fOUxzsAqqi6y9oHPvPQulGs=", 21 | "Components\\36.json": "C8_/0+N9wBhSsiVZU9riYLbEIaZx2w9FkGsZPaaRkVtqa4=", 22 | "Components\\57.json": "C8_dNYGEk2cL0To/XKlN3w5CgStZjjMWV12f/oKIPiIhZI=", 23 | "Components\\67.json": "C8_9NpKBEqXb4K1qrTfV7cbWJ0abQ8beB07USMbx6dvSLw=", 24 | "Components\\74.json": "C8_dlyseHxmFX/uBMs4n7cODbKK2Cqk9QXMkAr4AllXs/g=", 25 | "Components\\8.json": "C8_hCXBAWlAfZxVu9TutdT9OzkWYXvASxQQRarhUvUe7pM=", 26 | "Components\\80.json": "C8_Iaaa/Cb37NygWs6uuY7e69S+faNYm5wDEP86xt4LSR0=", 27 | "Components\\88.json": "C8_HRQpEDRUq0IP/5FZ/Edm3MSjFQdqXqFPChIuolzdtc0=", 28 | "Components\\97.json": "C8_WldCwqyN6u/tOWWzgZTcEuOBfz1U4KeXlvZnt2B0XM0=", 29 | "ComponentsMetadata.json": "C8_mu+QWQjBqEApWAAKIiZron+CX6FP4Ugi5m2r1BhoPws=", 30 | "Controls\\1.json": "C8_Fvn98utdGKY6ZOh7LfgIvqJnh4hvZUJGncuNJuYjlYk=", 31 | "Controls\\194.json": "C8_5NGXK3OrGeVvy0glDpTZWPMTSX5KRBAzXjg4LfhBKnQ=", 32 | "Controls\\197.json": "C8_s2z2a7dNfWrPAb8fwypM6e3k4MtEQsUCv706B9wPz2w=", 33 | "Controls\\216.json": "C8_Soo0uVmq1PQekx4JYRP4cntmBcPaFqwFIfOUcoudKbc=", 34 | "Controls\\228.json": "C8_wo/0mzQ49W9i3/z+oWqIBfwFtEGRRnBfmK2LzrNOsDs=", 35 | "Controls\\238.json": "C8_+ZONF1Z5bThUEDuEUwWsf9/wTT3RzhCokKXjMrMg6QQ=", 36 | "Controls\\245.json": "C8_2k8GgpoSb/6QpAslQjkE9jfFUxszioh4ykwgEmyuiP0=", 37 | "Controls\\247.json": "C8_6NgM7lyEZ1I/2ZhCF2OWYkbHTW5T2dbXv1LqgZS46Bk=", 38 | "Controls\\248.json": "C8_TPrkyINODTPeDpjSzRMkCzYzIOuSI8XPsWYMelUkAc8=", 39 | "Controls\\257.json": "C8_w28TF7ou8pmV6mluvleC8+G03XAnKwkVeV9h+Y368zQ=", 40 | "Controls\\267.json": "C8_pxR+nqruAo0HeU2QZS7pwcTOwImbKJNEz76jKUsiJgc=", 41 | "Controls\\270.json": "C8_LDh96Vq2Y6xqHST6OU/Pb5My1waWZNhXCet79HzN8gQ=", 42 | "Header.json": "C8_XmG70uAKcmfZ5kfsktASnOSXWlfdDH16v8KaBhCnpZo=", 43 | "Properties.json": "C8_twx0PeD8Ne+guHxk6Xnm0NY2har5VtGCtbmwPf+xLUM=", 44 | "References\\DataSources.json": "C8_hTwduV2507k3xU8NGYwJu0Y1dJHCYmXN7LeQ3RTzP+A=", 45 | "References\\NamedValues.json": "C8_4Pu19rZMhrAR5yGGAqR5IGL45LehqldWS8c1p2vWvpw=", 46 | "References\\Resources.json": "C8_s+se9qfOYnCKwfIt6gbv1FGBHW47JCt5d/CkUpqbcjk=", 47 | "References\\Templates.json": "C8_bXMESzXxcIPnYPFGLsNH5DeFPQD3ocTKYTJjwizpvM8=", 48 | "References\\Themes.json": "C8_ICevVr7hFBimNEmK/6NDb4YE2H0Ri8BUiWgASaENw7U=", 49 | "Resources\\PublishInfo.json": "C8_mHMkgoLgmSVG2hJhix5rOOfqM1n5PrnAHAz9u6n9lXE=" 50 | }, 51 | "ClientStampedChecksum": "C8_HvPjVUG9Rua2PHPRq+l/LZ3ZhZdY3VP8ag62/w0ptGA=", 52 | "ServerPerFileChecksums": { 53 | "AppCheckerResult.sarif": "C8_zbhehFxT6VNQ3HFvOArK1HfW/bSf2Y7f0Gs18XpC/7w=", 54 | "Components\\100.json": "C8_EwCwMwMXb0LzyOXFVUiYTaqySr7OCfjX4gle/cEN3ts=", 55 | "Components\\106.json": "C8_1J3ZCJ0FOy/RNpjkgjQUMzsG2RONC5uW3f2hWSWcCXI=", 56 | "Components\\109.json": "C8_KlrZl6ie8GcFGVeMbUzjaPd7YIIOlOW54r2UmMuM9xw=", 57 | "Components\\114.json": "C8_Z8ZQyPH6VVzaP2ExWl08kG37sWD+cjXeaIhEx2UwEbw=", 58 | "Components\\124.json": "C8_N/ln7mpjt5jsx5vmnS0sPeXokkm/w/QVx1iq4ysw3Qo=", 59 | "Components\\132.json": "C8_7jOd0brp+XTgnLlzg2zsvwsBJxaVRdXj+gcCweenUGw=", 60 | "Components\\153.json": "C8_D73gAtbFwLuzY+9IxxFAkEEqSwFFCP++0ht55Anj7A8=", 61 | "Components\\159.json": "C8_TQdNYvXAnTmu/ajN9S5pBiEWtZCwljL2RHkDwxMu7JA=", 62 | "Components\\166.json": "C8_+i00c9aoDZQZFodIwEX4E7dG1tdLcxUxJwIxhTaZJlc=", 63 | "Components\\176.json": "C8_7ojL8+P3c+rUORF1v3jz1th6vbXAC9IV0CF81PM5Ros=", 64 | "Components\\22.json": "C8_lZTeWVKm+N3Jxg1mpZnlwdOJsDzObD0n30Zxtd39PVI=", 65 | "Components\\27.json": "C8_gKW32HIAoT6unezks6s4nL/K6/w73+x6PmxERkXH17o=", 66 | "Components\\3.json": "C8_y32X9YKfCRR0EKQuUMI9fOUxzsAqqi6y9oHPvPQulGs=", 67 | "Components\\36.json": "C8_/0+N9wBhSsiVZU9riYLbEIaZx2w9FkGsZPaaRkVtqa4=", 68 | "Components\\57.json": "C8_dNYGEk2cL0To/XKlN3w5CgStZjjMWV12f/oKIPiIhZI=", 69 | "Components\\67.json": "C8_9NpKBEqXb4K1qrTfV7cbWJ0abQ8beB07USMbx6dvSLw=", 70 | "Components\\74.json": "C8_dlyseHxmFX/uBMs4n7cODbKK2Cqk9QXMkAr4AllXs/g=", 71 | "Components\\8.json": "C8_hCXBAWlAfZxVu9TutdT9OzkWYXvASxQQRarhUvUe7pM=", 72 | "Components\\80.json": "C8_Iaaa/Cb37NygWs6uuY7e69S+faNYm5wDEP86xt4LSR0=", 73 | "Components\\88.json": "C8_HRQpEDRUq0IP/5FZ/Edm3MSjFQdqXqFPChIuolzdtc0=", 74 | "Components\\97.json": "C8_WldCwqyN6u/tOWWzgZTcEuOBfz1U4KeXlvZnt2B0XM0=", 75 | "ComponentsMetadata.json": "C8_mu+QWQjBqEApWAAKIiZron+CX6FP4Ugi5m2r1BhoPws=", 76 | "Controls\\1.json": "C8_Fvn98utdGKY6ZOh7LfgIvqJnh4hvZUJGncuNJuYjlYk=", 77 | "Controls\\194.json": "C8_5NGXK3OrGeVvy0glDpTZWPMTSX5KRBAzXjg4LfhBKnQ=", 78 | "Controls\\197.json": "C8_s2z2a7dNfWrPAb8fwypM6e3k4MtEQsUCv706B9wPz2w=", 79 | "Controls\\216.json": "C8_Soo0uVmq1PQekx4JYRP4cntmBcPaFqwFIfOUcoudKbc=", 80 | "Controls\\228.json": "C8_wo/0mzQ49W9i3/z+oWqIBfwFtEGRRnBfmK2LzrNOsDs=", 81 | "Controls\\238.json": "C8_+ZONF1Z5bThUEDuEUwWsf9/wTT3RzhCokKXjMrMg6QQ=", 82 | "Controls\\245.json": "C8_2k8GgpoSb/6QpAslQjkE9jfFUxszioh4ykwgEmyuiP0=", 83 | "Controls\\247.json": "C8_6NgM7lyEZ1I/2ZhCF2OWYkbHTW5T2dbXv1LqgZS46Bk=", 84 | "Controls\\248.json": "C8_TPrkyINODTPeDpjSzRMkCzYzIOuSI8XPsWYMelUkAc8=", 85 | "Controls\\257.json": "C8_w28TF7ou8pmV6mluvleC8+G03XAnKwkVeV9h+Y368zQ=", 86 | "Controls\\267.json": "C8_pxR+nqruAo0HeU2QZS7pwcTOwImbKJNEz76jKUsiJgc=", 87 | "Controls\\270.json": "C8_LDh96Vq2Y6xqHST6OU/Pb5My1waWZNhXCet79HzN8gQ=", 88 | "Header.json": "C8_XmG70uAKcmfZ5kfsktASnOSXWlfdDH16v8KaBhCnpZo=", 89 | "Properties.json": "C8_twx0PeD8Ne+guHxk6Xnm0NY2har5VtGCtbmwPf+xLUM=", 90 | "References\\DataSources.json": "C8_hTwduV2507k3xU8NGYwJu0Y1dJHCYmXN7LeQ3RTzP+A=", 91 | "References\\NamedValues.json": "C8_4Pu19rZMhrAR5yGGAqR5IGL45LehqldWS8c1p2vWvpw=", 92 | "References\\Resources.json": "C8_s+se9qfOYnCKwfIt6gbv1FGBHW47JCt5d/CkUpqbcjk=", 93 | "References\\Templates.json": "C8_bXMESzXxcIPnYPFGLsNH5DeFPQD3ocTKYTJjwizpvM8=", 94 | "References\\Themes.json": "C8_ICevVr7hFBimNEmK/6NDb4YE2H0Ri8BUiWgASaENw7U=", 95 | "Resources\\PublishInfo.json": "C8_mHMkgoLgmSVG2hJhix5rOOfqM1n5PrnAHAz9u6n9lXE=" 96 | }, 97 | "ServerStampedChecksum": "C8_HvPjVUG9Rua2PHPRq+l/LZ3ZhZdY3VP8ag62/w0ptGA=" 98 | } -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_Slider.fx.yaml: -------------------------------------------------------------------------------- 1 | cmp_MD_Slider As CanvasComponent: 2 | disabledColor: =RGBA(0, 0, 0, 1) 3 | elementBackgroundColorHex: =defaults.elementBackgroundColorHex 4 | Fill: =Transparent 5 | font: ="Roboto" 6 | fontSize: =10 7 | fontWeight: =Normal 8 | Height: =cmp_MD_Slider.outsideMargin*2 + cmp_MD_Slider.toggleSize+20 9 | lineWidth: | 10 | =8 11 | OnReset: = 12 | outsideMargin: =20 13 | primaryColor: =defaults.primaryColor 14 | primaryColorTransparentHex: =defaults.primaryColorTransparentHex 15 | showInputLabel: =true 16 | showLabel: =true 17 | textColor: =defaults.textColor 18 | toggleSize: =20 19 | value: =sld_slider.Value 20 | valueDefault: =42 21 | valueMax: =500 22 | valueMin: =0 23 | Width: =cmp_MD_Slider.outsideMargin*2 + cmp_MD_Slider.lineSize + 100 24 | X: =0 25 | Y: =0 26 | ZIndex: =1 27 | 28 | img_sliderLabelTriangle As image: 29 | Height: =20 30 | Image: |- 31 | ="data:image/svg+xml;utf8," & EncodeUrl(" 32 | ") 33 | Visible: =cmp_MD_Slider.showLabel 34 | Width: =20 35 | X: =btn_sliderLabel.X + (btn_sliderLabel.Width-Self.Width)/2 36 | Y: =btn_sliderLabel.Y+btn_sliderLabel.Height-8 37 | ZIndex: =2 38 | 39 | btn_sliderLabel As button: 40 | BorderColor: =Transparent 41 | Color: =cmp_MD_Slider.textColor 42 | DisplayMode: =DisplayMode.View 43 | Fill: =ColorValue(cmp_MD_Slider.elementBackgroundColorHex) 44 | Font: =cmp_MD_Slider.font 45 | FontWeight: =cmp_MD_Slider.fontWeight 46 | Height: =30 47 | HoverBorderColor: =Self.BorderColor 48 | HoverFill: =Self.Fill 49 | RadiusBottomLeft: =4 50 | RadiusBottomRight: =4 51 | RadiusTopLeft: =4 52 | RadiusTopRight: =4 53 | Size: =cmp_MD_Slider.fontSize 54 | Text: =Text(sld_slider.Value) 55 | Visible: =cmp_MD_Slider.showLabel 56 | Width: =40 57 | X: =cir_sliderHandle.X-10 58 | ZIndex: =3 59 | 60 | html_sliderHandleShadow As htmlViewer: 61 | Height: =41 62 | HtmlText: |- 63 | ="
70 |
" 71 | PaddingLeft: =0 72 | PaddingRight: =0 73 | Width: =35 74 | X: =cir_sliderHandle.X-5 75 | Y: =cir_sliderHandle.Y-10 76 | ZIndex: =4 77 | 78 | btn_sliderLine As button: 79 | BorderColor: |- 80 | =ColorValue("#6200EE4d") 81 | BorderStyle: =BorderStyle.None 82 | BorderThickness: =0 83 | Fill: =If(!isActive, ColorValue(cmp_MD_Slider.primaryColorTransparentHex), ColorValue(cmp_MD_Slider.elementBackgroundColorHex)) 84 | Height: =cmp_MD_Slider.lineWidth 85 | HoverBorderColor: =Transparent 86 | HoverFill: =Self.Fill 87 | OnSelect: =Set(isCheck, !isCheck) 88 | PaddingLeft: =0 89 | PaddingRight: =0 90 | PressedBorderColor: =Transparent 91 | PressedFill: =Self.Fill 92 | RadiusBottomLeft: =32 93 | RadiusBottomRight: =32 94 | RadiusTopLeft: =32 95 | RadiusTopRight: =32 96 | Size: =24 97 | Text: ="" 98 | Width: |- 99 | = 100 | sld_slider.Width-cmp_MD_Slider.toggleSize/2 101 | X: =cmp_MD_Slider.outsideMargin+2 102 | Y: =cir_sliderHandle.Y + (cir_sliderHandle.Height-Self.Height)/2 103 | ZIndex: =5 104 | 105 | cir_sliderHandle As circle: 106 | Fill: =If(!isActive, cmp_MD_Slider.primaryColor, cmp_MD_Slider.disabledColor) 107 | Height: =cmp_MD_Slider.toggleSize 108 | Width: =cmp_MD_Slider.toggleSize 109 | X: =sld_slider.X + (sld_slider.Value-sld_slider.Min)*(sld_slider.Width-Self.Width)/(sld_slider.Max-sld_slider.Min) 110 | Y: =cmp_MD_Slider.outsideMargin+20 111 | ZIndex: =6 112 | 113 | sld_slider As slider: 114 | BorderColor: =RGBA(0, 0, 0, 0) 115 | Default: =If(!IsBlank(txt_sliderText.Text), Value(txt_sliderText.Text), 0) 116 | DisabledBorderColor: =RGBA(0, 0, 0, 0) 117 | HandleActiveFill: =Transparent 118 | HandleFill: =Transparent 119 | HandleSize: =cmp_MD_Slider.toggleSize 120 | Height: =cmp_MD_Slider.toggleSize 121 | Max: =cmp_MD_Slider.valueMax 122 | Min: =cmp_MD_Slider.valueMin 123 | OnChange: =Set(isActive,false); Set(isValidationError, false); Set(txtDefault, Self.Value) 124 | OnSelect: =Set(isActive, true) 125 | PressedBorderColor: =Transparent 126 | RailFill: =RGBA(0, 0, 0, 0) 127 | Reset: =isSliderReset 128 | ShowValue: =false 129 | ValueFill: =RGBA(0, 0, 0, 0) 130 | ValueHoverFill: =Transparent 131 | Width: =cmp_MD_Slider.Width-cmp_MD_Slider.outsideMargin*2-If(cmp_MD_Slider.showInputLabel, cmp_MD_Slider.outsideMargin+txt_sliderText.Width) 132 | X: =cmp_MD_Slider.outsideMargin 133 | Y: =40 134 | ZIndex: =7 135 | 136 | txt_sliderText As text: 137 | Align: =Align.Right 138 | BorderColor: =Transparent 139 | Color: =cmp_MD_Slider.textColor 140 | Default: =txtDefault 141 | Fill: =ColorValue(cmp_MD_Slider.elementBackgroundColorHex) 142 | Font: =cmp_MD_Slider.font 143 | FontWeight: =cmp_MD_Slider.fontWeight 144 | Height: =30 145 | HoverBorderColor: =Self.BorderColor 146 | HoverFill: =ColorValue(cmp_MD_Slider.elementBackgroundColorHex) 147 | OnChange: |- 148 | =Set( 149 | isSliderReset, 150 | true 151 | ); 152 | If ( 153 | Value(txt_sliderText.Text) > sld_slider.Max Or Value(txt_sliderText.Text) < sld_slider.Min, 154 | Set( 155 | isValidationError, 156 | true 157 | ) 158 | ) 159 | PaddingBottom: =0 160 | PaddingLeft: =5 161 | PaddingRight: =8 162 | PaddingTop: =0 163 | PressedFill: =Self.HoverFill 164 | RadiusBottomLeft: =0 165 | RadiusBottomRight: =0 166 | RadiusTopLeft: =0 167 | RadiusTopRight: =0 168 | Size: =cmp_MD_Slider.fontSize 169 | Visible: =cmp_MD_Slider.showInputLabel 170 | Width: =34 171 | X: =cmp_MD_Slider.Width-Self.Width-cmp_MD_Slider.outsideMargin 172 | Y: =cir_sliderHandle.Y + (cir_sliderHandle.Height - Self.Height)/2 173 | ZIndex: =8 174 | 175 | rec_sliderTextMarker As rectangle: 176 | Fill: =cmp_MD_Slider.primaryColor 177 | Height: =2 178 | Visible: =cmp_MD_Slider.showInputLabel 179 | Width: =txt_sliderText.Width 180 | X: =txt_sliderText.X 181 | Y: =txt_sliderText. Y +txt_sliderText.Height 182 | ZIndex: =9 183 | 184 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_Bottom_Navigation.fx.yaml: -------------------------------------------------------------------------------- 1 | cmp_MD_Bottom_Navigation As CanvasComponent: 2 | accentColor: |- 3 | =ColorValue("#6200EE") 4 | Fill: =RGBA(0, 0, 0, 0) 5 | font: ="Roboto" 6 | fontSize: =9 7 | fontWeight: ="Normal" 8 | Height: =56 9 | iconColor: |- 10 | ="#ffffff" 11 | iconHoverColor: |- 12 | ="#B07FF6" 13 | iconSize: =24 14 | navContent: |- 15 | =Table( 16 | { 17 | id: 1, 18 | title: "Favorites", 19 | image: "data:image/svg+xml;utf8, " & EncodeUrl( 20 | " 21 | 22 | " 23 | ), 24 | imageHover: "data:image/svg+xml;utf8, " & EncodeUrl( 25 | " 26 | 27 | " 28 | ) 29 | }, 30 | { 31 | id: 2, 32 | title: "Music", 33 | image: "data:image/svg+xml;utf8, " & EncodeUrl( 34 | " 35 | 36 | " 37 | ), imageHover: "data:image/svg+xml;utf8, " & EncodeUrl( 38 | " 39 | 40 | " 41 | ) 42 | }, 43 | { 44 | id: 3, 45 | title: "News", 46 | image: "data:image/svg+xml;utf8, " & EncodeUrl( 47 | " 48 | 49 | " 50 | ), 51 | imageHover: "data:image/svg+xml;utf8, " & EncodeUrl( 52 | " 53 | 54 | " 55 | ) 56 | }, 57 | { 58 | id: 4, 59 | title: "Places", 60 | image: "data:image/svg+xml;utf8, " & EncodeUrl( 61 | " 62 | 63 | " 64 | ), 65 | imageHover: "data:image/svg+xml;utf8, " & EncodeUrl( 66 | " 67 | 68 | " 69 | ) 70 | }, 71 | { 72 | id: 5, 73 | title: "Movies", 74 | image: "data:image/svg+xml;utf8, " & EncodeUrl( 75 | " 76 | 77 | " 78 | ), 79 | imageHover: "data:image/svg+xml;utf8, " & EncodeUrl( 80 | " 81 | 82 | " 83 | ) 84 | } 85 | ) 86 | selectedItem: =gal_Nav.Selected.id 87 | textColor: =White 88 | Width: =App.DesignWidth 89 | X: =0 90 | Y: =0 91 | ZIndex: =1 92 | 93 | "gal_Nav As gallery.'BrowseLayout_Horizontal_TwoTextOneImageVariant_ver4.0'": 94 | Fill: =cmp_MD_Bottom_Navigation.accentColor 95 | Height: =56 96 | Items: =cmp_MD_Bottom_Navigation.navContent 97 | TemplatePadding: =0 98 | TemplateSize: =Parent.Width/5 99 | ZIndex: =1 100 | 101 | img_icon_1 As image: 102 | Height: =cmp_MD_Bottom_Navigation.iconSize 103 | Image: =ThisItem.image 104 | OnSelect: =Select(Parent) 105 | Width: =cmp_MD_Bottom_Navigation.iconSize 106 | X: =(Parent.TemplateWidth- Self.Width)/2 107 | Y: =12 108 | ZIndex: =1 109 | 110 | lbl_navTitle As label: 111 | Align: =Align.Center 112 | Color: =If(ThisItem.IsSelected, cmp_MD_Bottom_Navigation.textColor, ColorFade(cmp_MD_Bottom_Navigation.accentColor, 50%)) 113 | Font: =cmp_MD_Bottom_Navigation.font 114 | FontWeight: =cmp_MD_Bottom_Navigation.fontWeight 115 | Height: =12 116 | OnSelect: =Select(Parent) 117 | PaddingBottom: =0 118 | PaddingLeft: =0 119 | PaddingRight: =0 120 | PaddingTop: =0 121 | Size: =cmp_MD_Bottom_Navigation.fontSize 122 | Text: =ThisItem.title 123 | VerticalAlign: =VerticalAlign.Top 124 | Width: =Parent.TemplateWidth 125 | Y: =Parent.Height-Self.Height-6 126 | ZIndex: =2 127 | 128 | img_icon_selected As image: 129 | Height: =cmp_MD_Bottom_Navigation.iconSize 130 | Image: =ThisItem.imageHover 131 | OnSelect: =Select(Parent) 132 | Visible: =If(!ThisItem.IsSelected, true, false) 133 | Width: =cmp_MD_Bottom_Navigation.iconSize 134 | X: =img_icon_1.X 135 | Y: =img_icon_1.Y 136 | ZIndex: =3 137 | 138 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/pkgs/rectangle_2.3.0.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | TODO: Need license text here.

]]> 4 | 6 | 7 | 8 | 9 | 10 | 11 | = 0) && (viewState.displayMode() !== AppMagic.Constants.DisplayMode.Edit), 26 | 'aria-hidden': properties.TabIndex() < 0 && !properties.AccessibleLabel() 27 | }"> 28 | 56 | 57 | ]]> 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_Dropdown.json: -------------------------------------------------------------------------------- 1 | { 2 | "ComponentAllowCustomization": true, 3 | "ComponentChangedSinceFileImport": true, 4 | "ComponentManifest": { 5 | "AllowAccessToGlobals": false, 6 | "AllowCustomization": true, 7 | "Description": "", 8 | "Name": "cmp_MD_Dropdown", 9 | "TemplateGuid": "c4118579fc384920ba1ed2754baf0afe" 10 | }, 11 | "ComponentType": "CanvasComponent", 12 | "CustomGroupControlTemplateName": "", 13 | "CustomProperties": [ 14 | { 15 | "Category": 0, 16 | "DisplayName": "outLined", 17 | "Hidden": false, 18 | "Name": "outLined", 19 | "PropertyDataTypeKey": "Boolean", 20 | "Tooltip": "A custom property", 21 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"_MinPrimitive\",\"EnumString\":\"\",\"Type\":[]}}" 22 | }, 23 | { 24 | "Category": 0, 25 | "DisplayName": "checkAll", 26 | "Hidden": false, 27 | "Name": "checkAll", 28 | "PropertyDataTypeKey": "Boolean", 29 | "Tooltip": "A custom property", 30 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"_MinPrimitive\",\"EnumString\":\"\",\"Type\":[]}}" 31 | }, 32 | { 33 | "Category": 0, 34 | "DisplayName": "multiselect", 35 | "Hidden": false, 36 | "Name": "multiselect", 37 | "PropertyDataTypeKey": "Boolean", 38 | "Tooltip": "A custom property", 39 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"_MinPrimitive\",\"EnumString\":\"\",\"Type\":[]}}" 40 | }, 41 | { 42 | "Category": 0, 43 | "DisplayName": "iconSize", 44 | "Hidden": false, 45 | "Name": "iconSize", 46 | "PropertyDataTypeKey": "Number", 47 | "Tooltip": "A custom property", 48 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 49 | }, 50 | { 51 | "Category": 0, 52 | "DisplayName": "labelText", 53 | "Hidden": false, 54 | "Name": "labelText", 55 | "PropertyDataTypeKey": "String", 56 | "Tooltip": "A custom property", 57 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 58 | }, 59 | { 60 | "Category": 0, 61 | "DisplayName": "selectedItem", 62 | "Hidden": true, 63 | "Name": "selectedItem", 64 | "PropertyDataTypeKey": "String", 65 | "Tooltip": "A custom property", 66 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 67 | }, 68 | { 69 | "Category": 0, 70 | "DisplayName": "borderRadius", 71 | "Hidden": false, 72 | "Name": "borderRadius", 73 | "PropertyDataTypeKey": "Number", 74 | "Tooltip": "A custom property", 75 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 76 | }, 77 | { 78 | "Category": 0, 79 | "DisplayName": "labelFont", 80 | "Hidden": false, 81 | "Name": "labelFont", 82 | "PropertyDataTypeKey": "String", 83 | "Tooltip": "A custom property", 84 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 85 | }, 86 | { 87 | "Category": 0, 88 | "DisplayName": "outsideMargin", 89 | "Hidden": false, 90 | "Name": "outsideMargin", 91 | "PropertyDataTypeKey": "Number", 92 | "Tooltip": "A custom property", 93 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 94 | }, 95 | { 96 | "Category": 0, 97 | "DisplayName": "fontSizeLabel", 98 | "Hidden": false, 99 | "Name": "fontSizeLabel", 100 | "PropertyDataTypeKey": "Number", 101 | "Tooltip": "A custom property", 102 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 103 | }, 104 | { 105 | "Category": 0, 106 | "DisplayName": "fontWeightLabel", 107 | "Hidden": false, 108 | "Name": "fontWeightLabel", 109 | "PropertyDataTypeKey": "String", 110 | "Tooltip": "A custom property", 111 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 112 | }, 113 | { 114 | "Category": 0, 115 | "DisplayName": "primaryColor", 116 | "Hidden": false, 117 | "Name": "primaryColor", 118 | "PropertyDataTypeKey": "Color", 119 | "Tooltip": "A custom property", 120 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 121 | }, 122 | { 123 | "Category": 0, 124 | "DisplayName": "secondaryColor", 125 | "Hidden": false, 126 | "Name": "secondaryColor", 127 | "PropertyDataTypeKey": "Color", 128 | "Tooltip": "A custom property", 129 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 130 | }, 131 | { 132 | "Category": 0, 133 | "DisplayName": "textColor", 134 | "Hidden": false, 135 | "Name": "textColor", 136 | "PropertyDataTypeKey": "Color", 137 | "Tooltip": "A custom property", 138 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Color\",\"EnumString\":\"\",\"Type\":[]}}" 139 | }, 140 | { 141 | "Category": 0, 142 | "DisplayName": "fontSizeInput", 143 | "Hidden": false, 144 | "Name": "fontSizeInput", 145 | "PropertyDataTypeKey": "Number", 146 | "Tooltip": "A custom property", 147 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]}}" 148 | }, 149 | { 150 | "Category": 0, 151 | "DisplayName": "primaryColorText", 152 | "Hidden": false, 153 | "Name": "primaryColorText", 154 | "PropertyDataTypeKey": "String", 155 | "Tooltip": "A custom property", 156 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 157 | }, 158 | { 159 | "Category": 0, 160 | "DisplayName": "secondaryColorText", 161 | "Hidden": false, 162 | "Name": "secondaryColorText", 163 | "PropertyDataTypeKey": "String", 164 | "Tooltip": "A custom property", 165 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}}" 166 | }, 167 | { 168 | "Category": 0, 169 | "DisplayName": "dropdownContent", 170 | "Hidden": false, 171 | "Name": "dropdownContent", 172 | "PropertyDataTypeKey": "Table", 173 | "Tooltip": "A custom property", 174 | "Type": "{\"Version\":\"1.326\",\"Type\":{\"Name\":\"Root\",\"Kind\":\"Table\",\"EnumString\":\"\",\"Type\":[{\"Name\":\"id\",\"Kind\":\"Number\",\"EnumString\":\"\",\"Type\":[]},{\"Name\":\"item\",\"Kind\":\"String\",\"EnumString\":\"\",\"Type\":[]}]}}" 175 | } 176 | ], 177 | "FirstParty": true, 178 | "Id": "http://microsoft.com/appmagic/Component", 179 | "IsComponentLocked": false, 180 | "IsComponentTemplate": true, 181 | "IsCustomGroupControlTemplate": false, 182 | "IsPcfControl": false, 183 | "IsPremiumPcfControl": false, 184 | "IsWidgetTemplate": false, 185 | "LastModifiedTimestamp": "638006856266544571", 186 | "Name": "c4118579fc384920ba1ed2754baf0afe", 187 | "OverridableProperties": {}, 188 | "TemplateOriginalName": "20a0c2e9783746af9945aa66fbadb0ee", 189 | "Version": "637975426593518246" 190 | } -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/EditorState/ContrastChecker.editorstate.json: -------------------------------------------------------------------------------- 1 | { 2 | "ControlStates": { 3 | "cmp_MD_ContrastChecker_1": { 4 | "AllowAccessToGlobals": true, 5 | "ControlPropertyState": [ 6 | "Fill", 7 | "Height", 8 | "Width", 9 | "X", 10 | "Y", 11 | "ZIndex", 12 | "primaryColorHex", 13 | "backgroundColorHex", 14 | "textColor", 15 | "font", 16 | "fontSize" 17 | ], 18 | "HasDynamicProperties": false, 19 | "IsAutoGenerated": false, 20 | "IsComponentDefinition": false, 21 | "IsDataControl": false, 22 | "IsFromScreenLayout": false, 23 | "IsGroupControl": false, 24 | "IsLocked": false, 25 | "LayoutName": "", 26 | "Metadata": { 27 | "AllowAccessToGlobals": false, 28 | "AllowCustomization": true, 29 | "Description": "" 30 | }, 31 | "MetaDataIDKey": "", 32 | "Name": "cmp_MD_ContrastChecker_1", 33 | "ParentIndex": 0, 34 | "PersistMetaDataIDKey": false, 35 | "Properties": [ 36 | { 37 | "Category": "Data", 38 | "PropertyName": "primaryColorHex", 39 | "RuleProviderType": "Unknown" 40 | }, 41 | { 42 | "Category": "Data", 43 | "PropertyName": "backgroundColorHex", 44 | "RuleProviderType": "Unknown" 45 | }, 46 | { 47 | "Category": "Data", 48 | "PropertyName": "textColor", 49 | "RuleProviderType": "System" 50 | }, 51 | { 52 | "Category": "Data", 53 | "PropertyName": "font", 54 | "RuleProviderType": "System" 55 | }, 56 | { 57 | "Category": "Data", 58 | "PropertyName": "fontSize", 59 | "RuleProviderType": "System" 60 | }, 61 | { 62 | "Category": "Design", 63 | "PropertyName": "Width", 64 | "RuleProviderType": "Unknown" 65 | }, 66 | { 67 | "Category": "Design", 68 | "PropertyName": "X", 69 | "RuleProviderType": "Unknown" 70 | }, 71 | { 72 | "Category": "Design", 73 | "PropertyName": "Y", 74 | "RuleProviderType": "Unknown" 75 | }, 76 | { 77 | "Category": "Design", 78 | "PropertyName": "ZIndex", 79 | "RuleProviderType": "Unknown" 80 | }, 81 | { 82 | "Category": "Design", 83 | "PropertyName": "Height", 84 | "RuleProviderType": "Unknown" 85 | }, 86 | { 87 | "Category": "Design", 88 | "PropertyName": "Fill", 89 | "RuleProviderType": "System" 90 | } 91 | ], 92 | "StyleName": "", 93 | "Type": "ControlInfo" 94 | }, 95 | "cmp_MD_ContrastChecker_2": { 96 | "AllowAccessToGlobals": true, 97 | "ControlPropertyState": [ 98 | "Fill", 99 | "Height", 100 | "Width", 101 | "X", 102 | "Y", 103 | "ZIndex", 104 | "primaryColorHex", 105 | "backgroundColorHex", 106 | "textColor", 107 | "font", 108 | "fontSize" 109 | ], 110 | "HasDynamicProperties": false, 111 | "IsAutoGenerated": false, 112 | "IsComponentDefinition": false, 113 | "IsDataControl": false, 114 | "IsFromScreenLayout": false, 115 | "IsGroupControl": false, 116 | "IsLocked": false, 117 | "LayoutName": "", 118 | "Metadata": { 119 | "AllowAccessToGlobals": false, 120 | "AllowCustomization": true, 121 | "Description": "" 122 | }, 123 | "MetaDataIDKey": "", 124 | "Name": "cmp_MD_ContrastChecker_2", 125 | "ParentIndex": 1, 126 | "PersistMetaDataIDKey": false, 127 | "Properties": [ 128 | { 129 | "Category": "Data", 130 | "PropertyName": "primaryColorHex", 131 | "RuleProviderType": "System" 132 | }, 133 | { 134 | "Category": "Data", 135 | "PropertyName": "backgroundColorHex", 136 | "RuleProviderType": "Unknown" 137 | }, 138 | { 139 | "Category": "Data", 140 | "PropertyName": "textColor", 141 | "RuleProviderType": "System" 142 | }, 143 | { 144 | "Category": "Data", 145 | "PropertyName": "font", 146 | "RuleProviderType": "System" 147 | }, 148 | { 149 | "Category": "Data", 150 | "PropertyName": "fontSize", 151 | "RuleProviderType": "System" 152 | }, 153 | { 154 | "Category": "Design", 155 | "PropertyName": "Width", 156 | "RuleProviderType": "Unknown" 157 | }, 158 | { 159 | "Category": "Design", 160 | "PropertyName": "X", 161 | "RuleProviderType": "Unknown" 162 | }, 163 | { 164 | "Category": "Design", 165 | "PropertyName": "Y", 166 | "RuleProviderType": "Unknown" 167 | }, 168 | { 169 | "Category": "Design", 170 | "PropertyName": "ZIndex", 171 | "RuleProviderType": "Unknown" 172 | }, 173 | { 174 | "Category": "Design", 175 | "PropertyName": "Height", 176 | "RuleProviderType": "Unknown" 177 | }, 178 | { 179 | "Category": "Design", 180 | "PropertyName": "Fill", 181 | "RuleProviderType": "System" 182 | } 183 | ], 184 | "StyleName": "", 185 | "Type": "ControlInfo" 186 | }, 187 | "ContrastChecker": { 188 | "AllowAccessToGlobals": true, 189 | "ControlPropertyState": [ 190 | "Fill", 191 | "ImagePosition", 192 | "Height", 193 | "Width", 194 | "Size", 195 | "Orientation", 196 | "LoadingSpinner", 197 | "LoadingSpinnerColor" 198 | ], 199 | "IsAutoGenerated": false, 200 | "IsComponentDefinition": false, 201 | "IsDataControl": false, 202 | "IsFromScreenLayout": false, 203 | "IsGroupControl": false, 204 | "IsLocked": false, 205 | "LayoutName": "", 206 | "MetaDataIDKey": "", 207 | "Name": "ContrastChecker", 208 | "ParentIndex": 0, 209 | "PersistMetaDataIDKey": false, 210 | "Properties": [ 211 | { 212 | "Category": "Design", 213 | "PropertyName": "Width", 214 | "RuleProviderType": "Unknown" 215 | }, 216 | { 217 | "Category": "Design", 218 | "PropertyName": "Height", 219 | "RuleProviderType": "Unknown" 220 | }, 221 | { 222 | "Category": "Design", 223 | "PropertyName": "ImagePosition", 224 | "RuleProviderType": "Unknown" 225 | }, 226 | { 227 | "Category": "Design", 228 | "PropertyName": "Fill", 229 | "RuleProviderType": "Unknown" 230 | }, 231 | { 232 | "Category": "Design", 233 | "PropertyName": "LoadingSpinner", 234 | "RuleProviderType": "Unknown" 235 | }, 236 | { 237 | "Category": "Design", 238 | "PropertyName": "LoadingSpinnerColor", 239 | "RuleProviderType": "Unknown" 240 | }, 241 | { 242 | "Category": "Design", 243 | "PropertyName": "Size", 244 | "RuleProviderType": "Unknown" 245 | }, 246 | { 247 | "Category": "Design", 248 | "PropertyName": "Orientation", 249 | "RuleProviderType": "Unknown" 250 | } 251 | ], 252 | "StyleName": "defaultScreenStyle", 253 | "Type": "ControlInfo" 254 | } 255 | }, 256 | "TopParentName": "ContrastChecker" 257 | } -------------------------------------------------------------------------------- /materialdesign components/sourcecode/pkgs/circle_2.3.0.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | TODO: Need license text here.

]]> 4 | 6 | 7 | 8 | 9 | 10 | 11 | = 0) && (viewState.displayMode() !== AppMagic.Constants.DisplayMode.Edit), 26 | 'aria-hidden': properties.TabIndex() < 0 && !properties.AccessibleLabel() 27 | }"> 28 | 61 | 62 | ]]> 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/Components/cmp_MD_Banner.fx.yaml: -------------------------------------------------------------------------------- 1 | cmp_MD_Banner As CanvasComponent: 2 | action1OnSelect: =true 3 | action1Text: ="CLOSE" 4 | action2OnSelect: =true 5 | action2Text: ="RETRY" 6 | actionBeneath: =false 7 | backgroundColor: =defaults.backgroundColor 8 | backgroundColorHex: =defaults.backgroundColorHex 9 | boxShadow: =true 10 | Fill: =Transparent 11 | font: =defaults.font 12 | fontSize: =20 13 | fontWeight: =FontWeight.Normal 14 | Height: |- 15 | =If(cmp_MD_Banner.actionBeneath, 16 | 150, 100) 17 | onHide: =true 18 | OnReset: = 19 | primaryColor: =defaults.primaryColor 20 | svgIcon: |- 21 | ="" 22 | text: ="Ooops, that didn't work" 23 | textColor: =defaults.textColor 24 | textPaddingLeft: =20 25 | timerStart: =true 26 | transitionAnimation: =true 27 | transitionTime: =200 28 | twoButtons: =true 29 | Visible: =true 30 | Width: =600 31 | X: =0 32 | Y: =0 33 | yPosition: =(tim_bannerTransition.Value/cmp_MD_Banner.transitionTime-1)*Self.Height 34 | ZIndex: =1 35 | 36 | tim_bannerTransition As timer: 37 | Duration: =cmp_MD_Banner.transitionTime 38 | OnTimerEnd: =cmp_MD_Banner.onHide() 39 | Reset: =!cmp_MD_Banner.timerStart 40 | Start: =cmp_MD_Banner.timerStart 41 | Visible: =false 42 | X: =60 43 | Y: =50 44 | ZIndex: =2 45 | 46 | con_Banner As groupContainer.manualLayoutContainer: 47 | Fill: =Transparent 48 | Height: =Parent.Height 49 | Width: =Parent.Width 50 | Y: |- 51 | =If( 52 | cmp_MD_Banner.transitionAnimation, 53 | (tim_bannerTransition.Value/cmp_MD_Banner.transitionTime-1)*Self.Height, 54 | 0 55 | ) 56 | ZIndex: =4 57 | 58 | rec_bannerBG As rectangle: 59 | BorderStyle: =BorderStyle.None 60 | Fill: =cmp_MD_Banner.backgroundColor 61 | Height: =Parent.Height-4 62 | Width: =Parent.Width 63 | ZIndex: =1 64 | 65 | html_bannerBoxshadow As htmlViewer: 66 | Fill: =Transparent 67 | Height: =cmp_MD_Banner.Height 68 | HtmlText: |- 69 | ="
77 | 78 |
79 | 80 | " 81 | PaddingBottom: =0 82 | PaddingLeft: =0 83 | PaddingRight: =0 84 | PaddingTop: =0 85 | Width: =cmp_MD_Banner.Width 86 | ZIndex: =2 87 | 88 | lbl_bannerText As label: 89 | AutoHeight: =true 90 | Color: =cmp_MD_Banner.textColor 91 | Height: =70 92 | PaddingLeft: =20 93 | Size: =cmp_MD_Banner.fontSize 94 | Text: =cmp_MD_Banner.text 95 | Width: |- 96 | =If( 97 | cmp_MD_Banner.actionBeneath, Parent.Width-Self.X-8, 98 | cmp_MD_Banner.twoButtons, Parent.Width-btn_action2.X-img_bannerIcon.X-img_bannerIcon.Width-8, 99 | btn_action1.X-Self.X-8) 100 | X: =cir_iconBG.X+If(Len(cmp_MD_Banner.svgIcon)>0,cir_iconBG.Width, 0) 101 | Y: =20 102 | ZIndex: =3 103 | 104 | cir_iconBG As circle: 105 | DisplayMode: =DisplayMode.View 106 | Fill: =cmp_MD_Banner.primaryColor 107 | Height: =50 108 | Visible: =img_bannerIcon.Visible 109 | Width: =50 110 | X: =cmp_MD_Banner.textPaddingLeft 111 | Y: =20 112 | ZIndex: =4 113 | 114 | img_bannerIcon As image: 115 | DisplayMode: =DisplayMode.View 116 | Fill: = 117 | Height: =40 118 | Image: |- 119 | = 120 | "data:image/svg+xml;utf8, " & EncodeUrl( 121 | //Set Map svg text 122 | 123 | Substitute(cmp_MD_Banner.svgIcon, "0 135 | Width: =40 136 | X: =cmp_MD_Banner.textPaddingLeft+5 137 | Y: =25 138 | ZIndex: =5 139 | 140 | btn_action1 As button: 141 | BorderStyle: =BorderStyle.None 142 | Color: =cmp_MD_Banner.primaryColor 143 | DisabledFill: =Transparent 144 | Fill: =Transparent 145 | Font: =cmp_MD_Banner.font 146 | FontWeight: =cmp_MD_Banner.fontWeight 147 | Height: =50 148 | HoverColor: =ColorFade(Self.Color, 30%) 149 | HoverFill: =Transparent 150 | OnSelect: =cmp_MD_Banner.action1OnSelect() 151 | PaddingBottom: =0 152 | PaddingLeft: =0 153 | PaddingRight: =0 154 | PaddingTop: =0 155 | PressedFill: =Transparent 156 | Size: =cmp_MD_Banner.fontSize 157 | Text: =cmp_MD_Banner.action1Text 158 | Width: =Len(Self.Text)*Self.Size*0.9+20 159 | X: =con_Banner.Width-Self.Width-8 160 | Y: =If(cmp_MD_Banner.actionBeneath, Parent.Height-Self.Height-5, 20) 161 | ZIndex: =6 162 | 163 | btn_action2 As button: 164 | BorderStyle: =BorderStyle.None 165 | Color: =cmp_MD_Banner.primaryColor 166 | DisabledFill: =Transparent 167 | Fill: =Transparent 168 | Font: =cmp_MD_Banner.font 169 | FontWeight: =cmp_MD_Banner.fontWeight 170 | Height: =50 171 | HoverColor: =ColorFade(Self.Color, 30%) 172 | HoverFill: =Transparent 173 | OnSelect: =cmp_MD_Banner.action2OnSelect() 174 | PaddingBottom: =0 175 | PaddingLeft: =0 176 | PaddingRight: =0 177 | PaddingTop: =0 178 | PressedFill: =Transparent 179 | Size: =cmp_MD_Banner.fontSize 180 | Text: =cmp_MD_Banner.action2Text 181 | Width: =Len(Self.Text)*Self.Size*0.9+20 182 | X: =btn_action1.X-Self.Width-8 183 | Y: =If(cmp_MD_Banner.actionBeneath, Parent.Height-Self.Height-5, 20) 184 | ZIndex: =7 185 | 186 | -------------------------------------------------------------------------------- /materialdesign components/sourcecode/Src/SetupPage.fx.yaml: -------------------------------------------------------------------------------- 1 | SetupPage As screen: 2 | Height: =1000 3 | OnVisible: |- 4 | =Set(defaults, 5 | { 6 | primaryColor: ColorValue("#6200EE"), 7 | secondaryColor: ColorValue("#03DAC6"), 8 | disabledColor: Gray, 9 | backgroundColor: White, 10 | elementBackgroundColor: RGBA(240, 240, 240, 1), 11 | textColor: RGBA(0, 0, 0, 1), 12 | errorColor: ColorValue("#B00020"), 13 | font: "Roboto, 'Segoe UI'", 14 | fontSize: 14, 15 | borderRadius: 15 16 | } 17 | ); 18 | 19 | Set(defaults, 20 | Patch(defaults, 21 | { 22 | primaryColorHex: Match(JSON(defaults.primaryColor,IgnoreUnsupportedTypes),"#[a-fA-F0-9]{6}").FullMatch, 23 | primaryColorTransparentHex: Match(JSON(defaults.primaryColor,IgnoreUnsupportedTypes),"#[a-fA-F0-9]{6}").FullMatch&"4d", 24 | secondaryColorHex: Match(JSON(defaults.secondaryColor,IgnoreUnsupportedTypes),"#[a-fA-F0-9]{6}").FullMatch, 25 | disabledColorHex: Match(JSON(defaults.disabledColor,IgnoreUnsupportedTypes),"#[a-fA-F0-9]{6}").FullMatch, 26 | backgroundColorHex: Match(JSON(defaults.backgroundColor,IgnoreUnsupportedTypes),"#[a-fA-F0-9]{6}").FullMatch, 27 | errorColorHex: Match(JSON(defaults.errorColor,IgnoreUnsupportedTypes),"#[a-fA-F0-9]{6}").FullMatch, 28 | elementBackgroundColorHex: Match(JSON(defaults.elementBackgroundColor,IgnoreUnsupportedTypes),"#[a-fA-F0-9]{6}").FullMatch 29 | } 30 | ) 31 | ); 32 | Width: =1000 33 | 34 | cmp_MD_Button_1 As cmp_MD_Button: 35 | buttonText: ="DIALOG" 36 | Height: =93 37 | onSelect: |- 38 | =UpdateContext({locDialog: true}); 39 | Reset(cmp_MD_Dialog_1) 40 | outlinedButton: =true 41 | Width: =333 42 | X: =300 43 | Y: =110 44 | 45 | Toggle2 As toggleSwitch: 46 | FalseText: ="24hour-Format" 47 | Height: =47 48 | Size: =21 49 | TrueText: ="12hour-Format" 50 | Visible: =locTimePicker 51 | Width: =348 52 | X: =297 53 | Y: =919 54 | ZIndex: =2 55 | 56 | cmp_MD_Button_2 As cmp_MD_Button: 57 | buttonText: ="NOW" 58 | Height: =87 59 | onSelect: |- 60 | =UpdateContext({locDefaultTime: Now()}) 61 | outlinedButton: =true 62 | svgIcon: |- 63 | ="" 64 | Width: =214 65 | X: =639 66 | Y: =265 67 | ZIndex: =3 68 | 69 | cmp_MD_Timepicker_2 As cmp_MD_Timepicker: 70 | action1OnSelect: |- 71 | =UpdateContext({locDefaultTime:Self.selectedTime, locTimePicker: false}) 72 | action2OnSelect: |- 73 | =UpdateContext({locDefaultTime:Self.selectedTime, locTimePicker: false}) 74 | defaultTime: |- 75 | =With({Time: locDefaultTime}, 76 | Time(Hour(Time), Minute(Time), 0)) 77 | format: =If(Toggle2.Value, 12, 24) 78 | Visible: =locTimePicker 79 | X: =285 80 | Y: =371 81 | ZIndex: =4 82 | 83 | cmp_MD_Button_3 As cmp_MD_Button: 84 | adjustPaddingLeft: =-20 85 | align: =Align.Right 86 | borderRadius: =50 87 | buttonText: ="SETUP" 88 | Height: =145 89 | iconSize: =0.5 90 | onSelect: |+ 91 | =Set(defaults, 92 | { 93 | primaryColor: Purple, 94 | secondaryColor: Pink, 95 | disabledColor: Gray, 96 | backgroundColor: White, 97 | elementBackgroundColor: LightGray, 98 | textColor: RGBA(30, 30, 30, 1), 99 | errorColor: Red, 100 | font: "Roboto, 'Segoe UI'", 101 | fontSize: 14, 102 | borderRadius: 10 103 | } 104 | ); 105 | 106 | Set(defaults, 107 | Patch(defaults, 108 | { 109 | primaryColorHex: Match(JSON(defaults.primaryColor,IgnoreUnsupportedTypes),"#[a-fA-F0-9]{6}").FullMatch, 110 | primaryColorTransparentHex: Match(JSON(defaults.primaryColor,IgnoreUnsupportedTypes),"#[a-fA-F0-9]{6}").FullMatch&"4d", 111 | secondaryColorHex: Match(JSON(defaults.secondaryColor,IgnoreUnsupportedTypes),"#[a-fA-F0-9]{6}").FullMatch, 112 | disabledColorHex: Match(JSON(defaults.disabledColor,IgnoreUnsupportedTypes),"#[a-fA-F0-9]{6}").FullMatch, 113 | backgroundColorHex: Match(JSON(defaults.backgroundColor,IgnoreUnsupportedTypes),"#[a-fA-F0-9]{6}").FullMatch, 114 | errorColorHex: Match(JSON(defaults.errorColor,IgnoreUnsupportedTypes),"#[a-fA-F0-9]{6}").FullMatch, 115 | elementBackgroundColorHex: Match(JSON(defaults.elementBackgroundColor,IgnoreUnsupportedTypes),"#[a-fA-F0-9]{6}").FullMatch 116 | } 117 | ) 118 | ); 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | Set(varPrimaryColor, Purple); 127 | Set(varSecondaryColor, Pink); 128 | Set(varDisabledColor, Gray); 129 | Set(varBackgroundColor, White); 130 | Set(varTextColor, RGBA(30, 30, 30, 1)); 131 | 132 | Set(varFont, "Roboto, 'Segoe UI'"); 133 | 134 | //Calculate Hex Values of Colors 135 | 136 | Set(varPrimaryColorHex,Match(JSON(varPrimaryColor,IgnoreUnsupportedTypes),"#[a-fA-F0-9]{6}").FullMatch); 137 | Set(varSecondaryColorHex,Match(JSON(varSecondaryColor,IgnoreUnsupportedTypes),"#[a-fA-F0-9]{6}").FullMatch); 138 | Set(varDisabledColorHex,Match(JSON(varDisabledColor,IgnoreUnsupportedTypes),"#[a-fA-F0-9]{6}").FullMatch); 139 | Set(varBackgroundColorHex,Match(JSON(varBackgroundColor,IgnoreUnsupportedTypes),"#[a-fA-F0-9]{6}").FullMatch); 140 | 141 | outsideMargin: =50 142 | svgIcon: |- 143 | =" 144 | " 145 | Width: =275 146 | X: =40 147 | Y: =77 148 | ZIndex: =5 149 | 150 | DatePicker1 As datepicker: 151 | Height: =70 152 | Size: =24 153 | Width: =575 154 | X: =141 155 | Y: =390 156 | ZIndex: =6 157 | 158 | cmp_MD_Dialog_1 As cmp_MD_Dialog: 159 | action1OnSelect: |- 160 | =UpdateContext({locDialog: false}) 161 | action2OnSelect: |- 162 | =UpdateContext({locDialog: false}) 163 | action2Text: ="AHA" 164 | header: ="Dialog with a 2 line header" 165 | text: ="Use this dialog for situations when the user immediately needs to take action and always provide 2 options." 166 | Visible: =locDialog 167 | ZIndex: =7 168 | 169 | --------------------------------------------------------------------------------