Abra a URL impressa: uma página com tema, renderizada no servidor, cujo contador é um componente C#: um campo de estado, um handler e um método Build. O build compilou tudo para JavaScript por você (a toolchain embarcada faz o bundling; não há nada para instalar).

O que o template te dá

MeuApp/

├─ MeuApp.csproj # <Project Sdk="eQuantic.UI.Sdk">, essa linha É o pipeline de build

├─ global.json # pina a versão do SDK (carimbada pelo template)

├─ Program.cs # AddUI → UseTheme → MapUI, UseRequestLocalization para as culturas

├─ Components/

│ └─ StatTile.cs # seu primeiro componente; a factory dele é gerada a partir dele

├─ Pages/

│ └─ HomePage.cs # [Page("/")], um StatefulComponent write-once

└─ Resources/

├─ Strings.resx # suas strings: resx .NET comum, o único artefato de localização

├─ Strings.pt-BR.resx

└─ Strings.Designer.cs

•

Páginas são classes com [Page("/rota")]. SSR, hidratação, navegação client-side, um 404 de verdade para rotas desconhecidas (declare [Page("/404")] para personalizá-lo), tudo ligado.

•

Dois idiomas de nascença. A home lê Strings.Tagline do resx e renderiza um CultureSwitcher: clique em Português e a página re-renderiza no lugar, com Contado {0} vezes. reformatando junto com o contador. Adicione um terceiro idioma criando Strings.fr.resx e listando fr no UseRequestLocalization. Veja Localização para entender como a mesma classe responde no servidor, no browser e numa janela nativa.

•

Escrever uma árvore não precisa de new nem de import: `Column(gap: Space.S4, children: [ Text("Oi"), Button("Vai") ])`. Seus próprios componentes entram nessa superfície automaticamente, e o StatTile(…) do template é seu. Veja Declarative Surface.

•

Tema é uma linha: troque PhotonTheme.Instance por MaterialTheme.FromSeed(cor) no Program.cs e todo componente se rebrandiza, servidor e cliente.

•

Dados do servidor passam por métodos [ServerAction], chamados do browser como await C# comum.

•

Hot reload: rode com dotnet watch, salve um arquivo, e o browser atualiza com o estado da sua página preservado.

•

O mesmo componente realiza NATIVAMENTE no engine Photon (shells macOS/iOS/Android). Veja Photon.

Começar de uma forma, em vez de uma página em branco

Desde 0.2.0-preview.31

O layout acima é o --shell blank, o padrão. Os dois templates aceitam o parâmetro, e toda forma que ele oferece é ADAPTATIVA, que é justamente o ponto: fator de forma aqui não é um segundo projeto, então a primeira tela que alguém novo vê tem que dizer isso.

dotnet new equantic-app -n MyApp --shell dashboard

dotnet new equantic-native -n MyApp --shell tabs

equantic-app

O que você recebe

blank

Uma página e um contador.

topnav

Um cabeçalho com links, e uma segunda rota para provar o roteador.

dashboard

Uma barra lateral acima de 840dp, as mesmas seções embaixo do cabeçalho abaixo disso.

equantic-native

O que você recebe

blank

Uma tela e um contador.

tabs

Destinos numa barra inferior, que ficam de pé como rail acima de 600dp.

drawer

Um painel deslizante no telefone, encaixado ao lado do conteúdo acima de 840dp.

list-detail

Um painel de cada vez no telefone, dois lado a lado no tablet.

Um template por fator de forma negaria a tese write-once no primeiro arquivo que a pessoa abre, então isto é um CHOICE do dotnet new sobre os dois templates. A forma vive em UM arquivo, o AppShell, e nada mais o nomeia: no nativo o Program.cs diz UseRoot<AppShell>() seja qual for a escolha; no web um shell é um componente comum que toda página compõe, então ele ganha uma factory gerada como qualquer outro e a página escreve AppShell("/", …). Trocar de forma depois é um arquivo, nunca o ponto de entrada.

As metades adaptativas não carregam listener nem um segundo estado: o AdaptiveNode guarda as duas árvores, o web emite as duas atrás de media queries de tempo de build (a certa já está na tela no primeiro paint, antes de qualquer JavaScript rodar) e o Photon dispõe só a que cabe na janela. Veja Componentes write-once.

Feeds locais/preview

Enquanto os pacotes não estão no nuget.org, aponte um nuget.config para o feed que os carrega:

</packageSources>

</configuration>

PREVIOUSForms-pt-BR

NEXTHome-pt-BR

ON THIS PAGE

O que o template te dá

Começar de uma forma, em vez de uma página em branco

Feeds locais/preview