AppBar

Composant AppBar pour les applications Universal

La barre d'application affiche des informations et des actions relatives à l'écran actuel.

La barre d'application supérieure fournit du contenu et des actions liés à l'écran actuel. Elle est utilisée pour l'image de marque, les titres d'écran, la navigation et les actions.

AppBar avec tiroir personnalisé

$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

Pied de page

Pour créer une barre d'application épinglée au bas de la page, vous pouvez utiliser le paramètre -Footer.

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

Pied de page relatif

Un pied de page relatif reste toujours au bas du document. Si le contenu de la page n'occupe pas 100 % de la hauteur de l'écran, le pied de page sera positionné au bas de la vue. Si le contenu dépasse 100 % de la hauteur de l'écran, le pied de page ne sera visible qu'en faisant défiler jusqu'au bas de la page.

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"
        }
    }
)

AppBar fixe

Une AppBar fixe s'affiche même lorsque l'écran défile. Elle reste ancrée en haut. Cet exemple crée une AppBar fixe avec un div de 10 000 pixels de hauteur.

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

New-UDElement -Tag 'div' -Content {

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

API

• New-UDAppBar