eQuantic.UIeQuantic.UI
Docs
Playground
GitHub
Docspt-BR
Primeiros Passos
Edit this page
2 min read
🌐 Esta página em: English · Português
Não quer instalar nada ainda? Experimente no playground o mesmo compilador, no seu browser.
Três comandos, sem Node, sem bundlers, sem JavaScript:
1
dotnet new install eQuantic.UI.Templates
1
dotnet new equantic-app -n MeuApp
1
cd MeuApp && dotnet run
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á
1
2
3
4
5
6
7
8
9
10
11
12
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.
Feeds locais/preview
Enquanto os pacotes não estão no nuget.org, aponte um nuget.config para o feed que os carrega:
1
2
3
4
5
<configuration>
<packageSources>
<add key="equantic" value="CAMINHO-OU-URL-DO-FEED" />
</packageSources>
</configuration>