トップへ戻る
Aioros.Cosmo · XAML の shadcn/ui

shadcn/ui のすべてのコンポーネントを XAML で

67 のコンポーネントすべてを、バリアント、デザイントークン、ライトとダークの 12 のカラーテーマとともに。Web ではどれも本物の HTML(ボタンは <button>、リンクは <a>)、デスクトップではネイティブコントロールです。
67/67
移植済みの shadcn/ui コンポーネント
99.5–100%
のピクセルが shadcn/ui 本家の描画と一致
12
のカラーテーマ(ライトとダーク)
測定方法
各コンポーネントを Chromium 上の shadcn/ui と Cosmo の両方でレンダリングし、ピクセル単位・スタイル単位で比較しています(Cosmo リポジトリの docs/fidelity.md と docs/coverage.md、Geist フォント)。

このサーバーからライブで

以下のサンプルはすべて、いま読んでいるサーバーがレンダリングした XAML です。同じ XAML がデスクトップでもネイティブに動きます。
アカウントを作成
下にメールアドレスを入力してアカウントを作成します。
通知
メールダイジェスト
プッシュ通知
メンションのみ
ここでアカウントを変更できます。終わったら保存してください。
変更を保存
チームメンバー
Owner
SD
Sofia Davis
m@example.com
Member
JL
Jackson Lee
p@example.com
Viewer
IN
Isabella Nguyen
i@example.com
アップロードの進行状況
ボタンとバッジ
Badge
Secondary
Outline
Destructive

XAML

Pages/signup/Page.axaml
<c:Card> <c:CardHeader Title="Create an account" Description="Enter your email below." /> <c:CardContent> <StackPanel Spacing="12"> <c:Field> <c:FieldLabel Content="Email" /> <TextBox Text="{Binding Email}" /> </c:Field> <CheckBox Content="I agree to the terms" IsChecked="{Binding Agreed}" /> </StackPanel> </c:CardContent> <c:CardFooter> <Button Content="Create account" Command="{Binding Create}" /> </c:CardFooter> </c:Card>