Blazor Sidebar component

crie para mim, um componente blazor/razor com tailwindcss sem uso de libs de UI, apenas blazor/razor component e tailwindcss classes, esse componente é um Sidebar responsivo, algo como um drawer, que funciona bem em celular e desktop

102d ago

Vou criar um componente Sidebar responsivo em Blazor/Razor com Tailwind CSS. Este será um drawer que funciona bem tanto em desktop quanto mobile.

Blazor Sidebar

Components/Sidebar.razor

Agora vou criar um componente de item de menu para usar dentro do sidebar:

Blazor Sidebar

Components/SidebarMenuItem.razor

E aqui está um exemplo de como usar o componente:

Blazor Sidebar

Pages/ExamplePage.razor

Características do Componente:

Responsividade:

Desktop: Sidebar fixo na lateral que pode ser colapsado
Mobile: Drawer que desliza sobre o conteúdo com backdrop

Funcionalidades:

Toggle automático baseado no tamanho da tela
Animações suaves com Tailwind CSS
Suporte a dark mode
Header, conteúdo e footer customizáveis
Itens de menu com ícones, badges e estados ativos

Acessibilidade:

Navegação por teclado
ARIA labels apropriados
Focus management
Screen reader friendly

Customização:

Títulos configuráveis
Conteúdo totalmente customizável via RenderFragment
Eventos de callback para interações
Estilos facilmente modificáveis via Tailwind

O componente é totalmente funcional e pronto para uso em aplicações Blazor, seguindo as melhores práticas de responsividade e UX.

102d ago

com syncfusion

102d ago

Vou criar um componente Sidebar responsivo usando Syncfusion Blazor components. O Syncfusion oferece componentes robustos que facilitam a criação de interfaces profissionais.

Syncfusion Blazor Sidebar

Components/ResponsiveSidebar.razor

Agora vou criar a classe MenuItem para os itens do menu:

Syncfusion Blazor Sidebar

Models/MenuItem.cs

E aqui está um exemplo de como usar o componente:

Syncfusion Blazor Sidebar

Pages/ExampleUsage.razor

Para usar este componente, você precisa instalar o Syncfusion Blazor no seu projeto:

Syncfusion Blazor Sidebar

YourApp.csproj

E configure no Program.cs:

Syncfusion Blazor Sidebar

Program.cs

Características do Componente Syncfusion:

Componentes Syncfusion Utilizados:

SfSidebar: Sidebar principal com suporte nativo a responsividade
SfTreeView: Navegação hierárquica com templates customizados
SfButton: Botões com ícones e estilos consistentes
SfCard: Cards para organizar conteúdo
SfDropDownButton: Menu dropdown para ações do usuário
SfTextBox: Campo de busca com eventos

Funcionalidades Avançadas:

Auto-responsivo: Muda automaticamente entre Over e Auto baseado na tela
Gestos touch: Suporte nativo a gestos em dispositivos móveis
Templates customizados: TreeView com templates para ícones e badges
Backdrop automático: Gerenciado automaticamente pelo Syncfusion
Animações suaves: Transições nativas do Syncfusion

Vantagens do Syncfusion:

Performance otimizada: Componentes nativos otimizados
Acessibilidade: ARIA e navegação por teclado built-in
Temas: Suporte completo a temas e dark mode
Documentação: Extensa documentação e exemplos
Suporte profissional: Suporte comercial disponível

O componente é totalmente profissional e pronto para produção, aproveitando toda a robustez do Syncfusion Blazor.

102d ago

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Playground.WebUI</title> <base href="/" /> <link rel="stylesheet" href="css/app.css" /> <link rel="stylesheet" href="css/global.bundle.css" /> <link rel="icon" type="image/png" href="favicon.png" /> <link href="Playground.WebUI.styles.css" rel="stylesheet" /> <link href="manifest.webmanifest" rel="manifest" /> <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" /> <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" /> </head> <body> <div id="app"> <svg class="loading-progress"> <circle r="40%" cx="50%" cy="50%" /> <circle r="40%" cx="50%" cy="50%" /> </svg> <div class="loading-progress-text"></div> </div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="." class="reload">Reload</a>
    <span class="dismiss">🗙</span>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>

</body> </html>

mude a tela de carregamento do blazor, com uma progress bar moderna e em cima o nome da app, e nada mais.

#blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; }

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto; }

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

    .loading-progress circle:last-child {
        stroke: #1b6ec2;
        stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
        transition: stroke-dasharray 0.05s ease-in-out;
    }

.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; }

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

code { color: #c02d76; }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; }

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }

Show full message

102d ago

WorkingWorking...

Working...

102d ago

Vou criar um componente Sidebar responsivo em Blazor/Razor com Tailwind CSS. Este será um drawer que funciona bem tanto em desktop quanto mobile.

Blazor Sidebar

Components/Sidebar.razor

Agora vou criar um componente de item de menu para usar dentro do sidebar:

Blazor Sidebar

Components/SidebarMenuItem.razor

E aqui está um exemplo de como usar o componente:

Blazor Sidebar

Pages/ExamplePage.razor

Características do Componente:

Responsividade:

Desktop: Sidebar fixo na lateral que pode ser colapsado
Mobile: Drawer que desliza sobre o conteúdo com backdrop

Funcionalidades:

Toggle automático baseado no tamanho da tela
Animações suaves com Tailwind CSS
Suporte a dark mode
Header, conteúdo e footer customizáveis
Itens de menu com ícones, badges e estados ativos

Acessibilidade:

Navegação por teclado
ARIA labels apropriados
Focus management
Screen reader friendly

Customização:

Títulos configuráveis
Conteúdo totalmente customizável via RenderFragment
Eventos de callback para interações
Estilos facilmente modificáveis via Tailwind

O componente é totalmente funcional e pronto para uso em aplicações Blazor, seguindo as melhores práticas de responsividade e UX.

102d ago

com syncfusion

102d ago

Vou criar um componente Sidebar responsivo usando Syncfusion Blazor components. O Syncfusion oferece componentes robustos que facilitam a criação de interfaces profissionais.

Syncfusion Blazor Sidebar

Components/ResponsiveSidebar.razor

Agora vou criar a classe MenuItem para os itens do menu:

Syncfusion Blazor Sidebar

Models/MenuItem.cs

E aqui está um exemplo de como usar o componente:

Syncfusion Blazor Sidebar

Pages/ExampleUsage.razor

Para usar este componente, você precisa instalar o Syncfusion Blazor no seu projeto:

Syncfusion Blazor Sidebar

YourApp.csproj

E configure no Program.cs:

Syncfusion Blazor Sidebar

Program.cs

Características do Componente Syncfusion:

Componentes Syncfusion Utilizados:

SfSidebar: Sidebar principal com suporte nativo a responsividade
SfTreeView: Navegação hierárquica com templates customizados
SfButton: Botões com ícones e estilos consistentes
SfCard: Cards para organizar conteúdo
SfDropDownButton: Menu dropdown para ações do usuário
SfTextBox: Campo de busca com eventos

Funcionalidades Avançadas:

Auto-responsivo: Muda automaticamente entre Over e Auto baseado na tela
Gestos touch: Suporte nativo a gestos em dispositivos móveis
Templates customizados: TreeView com templates para ícones e badges
Backdrop automático: Gerenciado automaticamente pelo Syncfusion
Animações suaves: Transições nativas do Syncfusion

Vantagens do Syncfusion:

Performance otimizada: Componentes nativos otimizados
Acessibilidade: ARIA e navegação por teclado built-in
Temas: Suporte completo a temas e dark mode
Documentação: Extensa documentação e exemplos
Suporte profissional: Suporte comercial disponível

O componente é totalmente profissional e pronto para produção, aproveitando toda a robustez do Syncfusion Blazor.

102d ago

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="." class="reload">Reload</a>
    <span class="dismiss">🗙</span>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>

</body> </html>

mude a tela de carregamento do blazor, com uma progress bar moderna e em cima o nome da app, e nada mais.

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto; }

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

    .loading-progress circle:last-child {
        stroke: #1b6ec2;
        stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
        transition: stroke-dasharray 0.05s ease-in-out;
    }

.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; }

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

code { color: #c02d76; }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; }

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }

WorkingWorking...

Working...