poshud/pages/button.ps1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

New-UDPage -Name "Button" -Icon plus_circle -Content {
    New-UDRow -Columns {
        New-UDColumn -Size 2 -Content {}
        New-UDColumn -Size 10 -Content {
            New-UDHeading -Size 1 -Text "Buttons" -Color $Colors.FontColor

            New-UDParagraph -Content {
                "There are 3 main button types described in material design. The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals."
            } -Color $Colors.FontColor
            
            New-UDHeading -Size 3 -Text "Raised" -Color $Colors.FontColor

            New-UDElementExample -Example {
                New-UDButton -Text "Button" 
                New-UDButton -Text "Button" -Icon cloud -IconAlignment left
                New-UDButton -Text "Button" -Icon cloud -IconAlignment right
            }
            
            New-UDHeading -Size 3 -Text "Floating" -Color $Colors.FontColor

            New-UDElementExample -Example {
                New-UDButton -Floating -Icon plus
            }
            
            New-UDHeading -Size 3 -Text "Flat" -Color $Colors.FontColor
            
            New-UDParagraph -Content {
                "Flat buttons are used to reduce excessive layering. For example, flat buttons are usually used for actions within a card or modal so there aren't too many overlapping shadows."
            } -Color $Colors.FontColor
            
            New-UDElementExample -Example {
                New-UDButton -Text "Button" -Flat
            }

            New-UDHeading -Size 3 -Text "OnClick Event" -Color $Colors.FontColor
            
            New-UDParagraph -Content {
                "Tie ScriptBlocks to an OnClick event."
            } -Color $Colors.FontColor

            New-UDElementExample -Example {
                New-UDHeading -Size 5 -Id "ShowOnClick" -Text ""
                New-UDButton -Text "Button" -OnClick {
                    Set-UDElement -Id "ShowOnClick" -Content { "You clicked the button!" }
                }
            }
        }
    }
}