AppBar

Die App-Leiste zeigt Informationen und Aktionen zum aktuellen Bildschirm an.

Die obere App-Leiste stellt Inhalte und Aktionen bereit, die sich auf den aktuellen Bildschirm beziehen. Sie wird für Branding, Bildschirmtitel, Navigation und Aktionen verwendet.

AppBar mit benutzerdefinierter Drawer

$Drawer = New-UDDrawer -Children {
    New-UDList -Children {
        New-UDListItem -Label "Home"
        New-UDListItem -Label "Getting Started" -Children {
            New-UDListItem -Label "Installation" -OnClick {}
            New-UDListItem -Label "Usage" -OnClick {}
            New-UDListItem -Label "FAQs" -OnClick {}
            New-UDListItem -Label "System Requirements" -OnClick {}
            New-UDListItem -Label "Purchasing" -OnClick {}
        }
    }
}

New-UDAppBar -Position relative -Children { New-UDElement -Tag 'div' -Content { "Title" } } -Drawer $Drawer

Fußzeile

Um eine App-Leiste zu erstellen, die am unteren Rand der Seite angeheftet ist, können Sie den Parameter -Footer verwenden.

New-UDAppBar -Children { "Hello" } -Footer

Relative Fußzeile

Eine relative Fußzeile bleibt immer am unteren Rand des Dokuments. Wenn der Inhalt der Seite nicht 100 % der Bildschirmhöhe einnimmt, wird die Fußzeile am unteren Rand der Ansicht positioniert. Ist der Inhalt größer als 100 % der Bildschirmhöhe, ist die Fußzeile nur sichtbar, wenn bis zum Ende gescrollt wird.

New-UDApp -Title 'PowerShell Universal' -Pages @(
    New-UDPage -Title home -Name home -Blank -HideNavigation -Content {
        New-UDHelmet -Tag 'style' -Content '
            #Footer {
                position: relative;
            }
            #Footer + div {
                display: none
            }
            #content {
                min-height: calc(100vh - 128px);
            }
        '
        New-UDAppBar -Position sticky -ClassName header -DisableThemeToggle -Children {
            New-UDParagraph -Text "Header"
        }
        New-UDElement -Tag 'div' -Content {
            1..100 | % {
                New-UDTypography -Text 'Hello' -Variant h1
            }
        } -Id 'content'
        New-UDAppBar -Id Footer -Footer -Children {
            New-UDParagraph -Text "Footer"
        }
    }
)

Feste AppBar

Eine feste AppBar wird auch dann angezeigt, wenn der Bildschirm gescrollt wird. Sie bleibt am oberen Rand haften. Dieses Beispiel erstellt eine AppBar, die mit einem 10000 Pixel hohen div fixiert ist.

New-UDAppBar -Position fixed -Children { New-UDElement -Tag 'div' -Content { "Title" } }

New-UDElement -Tag 'div' -Content {

} -Attributes @{
    style = @{
        height = "10000px"
    }
}

API

• New-UDAppBar