#270: Add outline support for buttons

Badgerati · Feb 26, 2022 · 715799a · 715799a
1 parent c9ca7d3
commit 715799a
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 1 deletion.
diff --git a/docs/Tutorials/Elements/Button.md b/docs/Tutorials/Elements/Button.md
@@ -55,3 +55,17 @@ To open the URL in a new tab, supply the `-NewTab` switch:
 ```powershell
 New-PodeWebButton -Name 'Repository' -Icon Link -Url 'https://github.com/Badgerati/Pode.Web' -NewTab
 ```
+
+## Outlined
+
+By default a button will be displayed as a block colour, but you can show a button as an outline by using the `-Outline` switch:
+
+```powershell
+New-PodeWebButton -Name 'Example' -Colour Cyan -Outline -ScriptBlock {
+    # logic
+}
+```
+
+Which looks like below:
+
+![button_outline](../../../images/button_outline.png)
diff --git a/docs/images/button_outline.png b/docs/images/button_outline.png
diff --git a/examples/full.ps1 b/examples/full.ps1
@@ -98,6 +98,14 @@ Start-PodeServer -StatusPageExceptions Show {
             Show-PodeWebToast -Message "Message of the day: $($WebEvent.Data.Value)"
             Show-PodeWebNotification -Title 'Hello, there' -Body 'General Kenobi' -Icon '/pode.web/images/icon.png'
         }
+        New-PodeWebButton -Name 'Click Me Outlined' -DataValue 'PowerShell Rules!' -NoAuth -Icon 'console-line' -Colour Green -Outline -ScriptBlock {
+            Show-PodeWebToast -Message "Message of the day: $($WebEvent.Data.Value)"
+            Show-PodeWebNotification -Title 'Hello, there' -Body 'General Kenobi' -Icon '/pode.web/images/icon.png'
+        }
+        New-PodeWebButton -Name 'Example' -Colour Cyan -Outline -NewLine -ScriptBlock {
+            Show-PodeWebToast -Message "Message of the day: $($WebEvent.Data.Value)"
+            Show-PodeWebNotification -Title 'Hello, there' -Body 'General Kenobi' -Icon '/pode.web/images/icon.png'
+        }
         New-PodeWebContainer -Content @(
             New-PodeWebButton -Name 'Dark Theme' -NoAuth -Icon 'moon-new' -Colour Dark -ScriptBlock { Update-PodeWebTheme -Name Dark }
             New-PodeWebButton -Name 'Light Theme' -NoAuth -Icon 'weather-sunny' -Colour Light -ScriptBlock { Update-PodeWebTheme -Name Light }

diff --git a/src/Public/Elements.ps1 b/src/Public/Elements.ps1
@@ -1525,11 +1525,18 @@ function New-PodeWebButton
 
         [Parameter(ParameterSetName='Url')]
         [switch]
-        $NewTab
+        $NewTab,
+
+        [switch]
+        $Outline
     )
 
     $Id = Get-PodeWebElementId -Tag Btn -Id $Id -Name $Name
+
     $colourType = Convert-PodeWebColourToClass -Colour $Colour
+    if ($Outline) {
+        $colourType = "outline-$($colourType)"
+    }
 
     $element = @{
         ComponentType = 'Element'
@@ -1545,6 +1552,7 @@ function New-PodeWebButton
         IconOnly = $IconOnly.IsPresent
         Colour = $Colour
         ColourType = $ColourType
+        Outline = $Outline.IsPresent
         CssClasses = ($CssClass -join ' ')
         CssStyles = (ConvertTo-PodeWebStyles -Style $CssStyle)
         NewLine = $NewLine.IsPresent