API Razor dan C#

<ds-button variant="primary" icon="send" loading-label="Mengirim…" type="submit">Kirim faktur</ds-button>
<ds-icon-button icon="trash" label="Hapus faktur INV-2026-0418" variant="tonal" />
<ds-toggle-group type="single" label="Tampilan" name="view" value="list">
    <ds-toggle-item value="list" icon="list">Daftar</ds-toggle-item>
    <ds-toggle-item value="grid" icon="layout-grid">Kisi</ds-toggle-item>
</ds-toggle-group>

<ds-field asp-for="Name" label="Nama proyek" hint="Tampil di daftar dan faktur." />
<ds-field asp-for="Budget" type="number" label="Anggaran" prefix="Rp" step="0.01" />
<ds-field asp-for="Owner" type="select" asp-items="Model.Owners" label="Penanggung jawab" />
<ds-checkbox asp-for="AcceptTerms" label="Saya menyetujui ketentuan" />
<ds-radio-group asp-for="Plan" asp-items="Model.Plans" label="Paket" card columns="2" />
<ds-slider asp-for="Volume" label="Volume" min="0" max="100" step="5" format="{value}%" />
<ds-date-range-picker start-for="From" end-for="To" legend="Periode tagihan" presets="last7,last30,thisMonth" />

<ds-avatar name="Ayu Lestari" size="md" shape="circle" presence="online" />
<ds-status tone="Warning">Menunggu persetujuan</ds-status>
<ds-chip variant="Filter" pressed count="12">Terlambat</ds-chip>
<ds-stat label="Proyek berjalan" value="24" delta="+3" trend="Up" icon="briefcase" />
<ds-card title="Redesain situs web" eyebrow="PRJ-1024" href="/projects/1024">
    Diperbarui 2 Nov 2026.
    <ds-card-footer><ds-status tone="Success">Aktif</ds-status></ds-card-footer>
</ds-card>
<ds-sparkline values="@(new double[] { 12, 14, 13, 18, 21 })" label="Pesanan, 5 hari terakhir: dari 12 ke 21" />

<ds-alert tone="Warning" title="Penyimpanan hampir penuh" dismissible>
    Anda sudah memakai 92% dari 50 GB.
    <ds-alert-actions><a class="btn btn-sm" href="/billing">Tingkatkan</a></ds-alert-actions>
</ds-alert>
<button class="btn" ds-tooltip="Hapus" ds-tooltip-placement="bottom">Hapus</button>
<ds-progress value="62" label="Impor" show-value tone="Success" />
<ds-empty icon="receipt" title="Belum ada faktur" action-label="Buat faktur" action-href="/Invoices/Create" boxed>
    Faktur yang Anda buat tampil di sini.
</ds-empty>

<button class="btn" data-ds-dialog-open="invite">Undang</button>
<ds-dialog id="invite" title="Undang anggota tim" size="md" dismissible>
    <ds-field name="email" type="email" label="Email" />
    <ds-dialog-footer>
        <button class="btn" data-ds-dialog-close>Batal</button>
        <button class="btn btn-primary">Kirim undangan</button>
    </ds-dialog-footer>
</ds-dialog>
<ds-menu id="row-menu" label="Aksi untuk INV-2026-0418" align="end">
    <ds-menu-item icon="pencil" shortcut="E">Ubah</ds-menu-item>
    <ds-menu-separator />
    <ds-menu-item icon="trash" danger>Hapus</ds-menu-item>
</ds-menu>

<ds-tabs label="Bagian proyek">
    <ds-tab id="overview" label="Ringkasan" icon="home">Panel ringkasan.</ds-tab>
    <ds-tab id="files" label="Berkas" count="12">Panel berkas.</ds-tab>
</ds-tabs>
<ds-breadcrumb>
    <ds-breadcrumb-item href="/" icon="home">Beranda</ds-breadcrumb-item>
    <ds-breadcrumb-item href="/projects">Proyek</ds-breadcrumb-item>
    <ds-breadcrumb-item>PRJ-1024</ds-breadcrumb-item>
</ds-breadcrumb>
<ds-pagination page="3" page-count="12" />
<ds-language-switcher languages="en,id" current="@lang" href-template="/{0}/pricing" />

<ds-container size="lg">
    <ds-page-header title="Faktur" description="Terkirim, lunas, dan terlambat." sticky>
        <ds-page-header-actions>
            <ds-button variant="primary" icon="plus" href="/Invoices/Create">Faktur baru</ds-button>
        </ds-page-header-actions>
    </ds-page-header>
    <ds-accordion single>
        <ds-accordion-item title="Penagihan" open>Rincian penagihan.</ds-accordion-item>
        <ds-accordion-item title="Pengiriman">Rincian pengiriman.</ds-accordion-item>
    </ds-accordion>
</ds-container>

<ds-icon name="briefcase" size="lg" />
<ds-icon name="alert" label="Peringatan" />

<partial name="_DsHead" model='new HeadOptions(Stylesheet: "~/css/app.css", Storage: "app")' />
<partial name="_DsSortHeader" model='new SortHeaderModel("Anggaran", "budget", Model.Rows.Sort, Numeric: true)' />
<partial name="_DsPager" model='Model.Rows.Pager("proyek")' />
<partial name="_DsSidebarNav" model="Model.Nav" />

public static (string Label, Tone Tone) Status(InvoiceStatus s) => s switch
{
    InvoiceStatus.Draft => ("Draf", Tone.Neutral),
    InvoiceStatus.Sent => ("Menunggu pembayaran", Tone.Warning),
    InvoiceStatus.Paid => ("Lunas", Tone.Success),
    InvoiceStatus.Overdue => ("Lewat tempo", Tone.Error),
    _ => ("Tidak diketahui", Tone.Neutral),
};

[HttpPost, ValidateAntiForgeryToken]
public async Task<IActionResult> Save(ProjectForm form)
{
    if (!ModelState.IsValid) return View("Form", form);
    await _projects.SaveAsync(form);
    this.Toast(Tone.Success, "Proyek tersimpan", $"{form.Code} siap dipakai.");
    return RedirectToAction(nameof(Index));
}

static readonly string[] Sortable = ["code", "name", "budget"];

public async Task OnGetAsync(string? q, string? sort, string? direction, int page = 1, int? size = null)
{
    var order = ListSort.Parse(sort, direction, Sortable, defaultKey: "code");
    var pageSize = PageSizes.Normalize(size);
    var (rows, total) = await _projects.SearchAsync(q, order, page, pageSize);
    Rows = new ListPage<ProjectRow>(rows, q, page, pageSize, total, order);
}

<span class="ds-avatar @Avatar.ColorClass(user.Name)">@Avatar.Initials(user.Name)</span>

// Program.cs
DsText.Add("id", new Dictionary<string, string> { ["pager.next"] = "Lanjut" });
DsText.Add("ms", new Dictionary<string, string> { ["pager.next"] = "Seterusnya" });

builder.Services.Configure<RequestLocalizationOptions>(o =>
{
    o.SetDefaultCulture("en");
    o.AddSupportedCultures("en", "id").AddSupportedUICultures("en", "id");
});
app.UseRequestLocalization();