AppBar

La barra de aplicación muestra información y acciones relativas a la pantalla actual.

La barra de aplicación superior proporciona contenido y acciones relacionados con la pantalla actual. Se utiliza para la identidad de marca, los títulos de pantalla, la navegación y las acciones.

AppBar con cajón personalizado

$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

Pie de página

Para crear una barra de aplicación anclada a la parte inferior de la página, puede utilizar el parámetro -Footer.

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

Pie de página relativo

Un pie de página relativo siempre permanece en la parte inferior del documento. Si el contenido de la página no ocupa el 100 % de la altura de la pantalla, el pie de página se situará en la parte inferior de la vista. Si el contenido supera el 100 % de la altura de la pantalla, el pie de página solo será visible al desplazarse hasta la parte inferior del correcto.

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 fija

Una AppBar fija se mostrará incluso cuando se desplace la pantalla. Permanecerá anclada en la parte superior. Este ejemplo crea una AppBar fija con un div de 10000 píxeles de alto.

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

New-UDElement -Tag 'div' -Content {

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

API

• New-UDAppBar