@implements IDisposable @* Styleguide: the Data display components (Accordion, Aura, Avatar, Badge, Card, Carousel, Chat, Collapse, Countdown, Diff, Hover 3D, Hover gallery, Kbd, List, Stat, Status, Table, Text rotate, Timeline). *@

DAccordion

Active: @accordionActive
How do I create an account?
Click the "Sign up" button and follow the steps.
I forgot my password
Use "Forgot password" on the login page.
Disabled item
Never shown. Joined, plus icon
First
Only one item is open at a time.
Second
Opening this one closes the first.
Third
Clicking an open item closes it.

DCollapse

Arrow (open: @collapseArrowOpen)
Click the header, or focus it and press Enter or Space.
Plus (starts open)
Bound with @@bind-IsOpen.
No icon, closed
Content.
Disabled, open
Can't be closed.

DAura

@foreach (var variant in Enum.GetValues()) { @variant }
@foreach (var color in Enum.GetValues().Skip(1)) { @color }
Xs Sm Md Lg Xl

A card with a rainbow aura, 2s loop (duration-2000).

DAvatar

D AI MX UI
+99

DBadge

@foreach (var color in Enum.GetValues()) { @color }
@foreach (var variant in Enum.GetValues().Skip(1)) {
@variant @foreach (var color in Enum.GetValues()) { @color }
}
Xs Sm Md Lg Xl Inbox +99 Heading new

DCard

Landscape
Default new

Figure, heading, body and actions.

 Buy now Border

card-border has no neo shadow.
Landscape
Dash, figure last

The figure comes after the body.
@foreach (var size in new[] { DSize.Xs, DSize.Sm, DSize.Md, DSize.Lg, DSize.Xl }) { @size

Padding and text scale with the size.

 }
Portrait
Side

The figure sits beside the body.

 Watch
Background
Image full

The figure is the background.

 Open

DCarousel

@foreach (var snap in Enum.GetValues()) { Snap @snap @foreach (var i in Enumerable.Range(1, 6)) { Slide @i } } ShowNavigation and ShowIndicators (links to the slides, no script) @foreach (var i in Enumerable.Range(1, 4)) { Slide @i } Full-width items, vertical
@foreach (var i in Enumerable.Range(1, 4)) { Slide @i } @foreach (var i in Enumerable.Range(1, 4)) { Slide @i }

DChat

Obi-Wan
Obi-Wan Kenobi
You were the Chosen One!
Delivered
Anakin
Anakin
I hate you!
Seen at 12:46
 @foreach (var color in Enum.GetValues()) { @color bubble }

DCountdown

::
days
hours
min
sec
-1 +1 +100

DDiff

DAISY
DAISY

DHover3D

Tilting card

As a link

The whole card is the link.

DHoverGallery

First Second Third

DKbd

Xs Sm Md Lg Xl
ctrl + shift + del Press F to pay respects.

DList

  • Most played songs this week
    • @foreach (var i in Enumerable.Range(1, 3)) {
    Cover
    Song @i
    Artist @i
     }
    04
    Cover
    list-col-grow
    The third column fills the row

    list-col-wrap moves this paragraph to its own line under the row.

    DStats

    Total likes 25.6K 21% more than last month
    Page views 2.6M ↗︎ 14%
    Tasks done 86% 31 tasks remaining
    Downloads 31K Jan 1st - Feb 1st New users 4,200 ↗︎ 400 (22%) Account balance $89,400 Add funds

    DStatus

    @foreach (var color in Enum.GetValues()) { }
    Online Server down Bounce

    DTable

    NameJobColour @for (var i = 0; i < people.Length; i++) { @(i + 1)@people[i].Name@people[i].Job@people[i].Colour } NameJobColourCompanyLocation @for (var i = 0; i < 12; i++) { var p = people[i % people.Length]; @(i + 1)@p.Name@p.Job@p.ColourCompany @(i + 1)City @(i + 1)@(i + 1) } NameJobColourCompanyLocation
    @foreach (var size in new[] { DSize.Xs, DSize.Sm, DSize.Md, DSize.Lg, DSize.Xl }) { @sizeJob @people[0].Name@people[0].Job }

    DTextRotate

    Items:
    Built for designers developers managers

    DTimeline

    Horizontal, end boxes, primary line up to 2001
    @foreach (var i in Enumerable.Range(0, events.Length)) { var done = i < 2; @events[i].Year @events[i].Text }
    Vertical, both sides, start boxes @foreach (var i in Enumerable.Range(0, events.Length)) { @(i % 2 == 0 ? events[i].Text : events[i].Year) @(i % 2 == 0 ? events[i].Year : events[i].Text) }
    Vertical, compact, snap icon @foreach (var e in events) {
    @e.Text
    Every item sits on the same side; the icon aligns with the top of the text.     }
    @code { int accordionActive; int joinedActive = -1; bool collapseArrowOpen; bool collapsePlusOpen = true; int hours = 10, minutes = 24, seconds = 59, counter = 42; System.Threading.Timer timer; readonly string[] galleryImages = [ "imgs/styleguide/scene-5.svg", "imgs/styleguide/scene-6.svg", "imgs/styleguide/scene-1.svg", "imgs/styleguide/scene-2.svg" ]; readonly string[] rotateWords = ["ONE", "TWO", "THREE"]; readonly string[] bigWords = ["DESIGN", "DEVELOP", "DEPLOY", "SCALE", "MAINTAIN", "REPEAT"]; readonly (string Name, string Job, string Colour)[] people = [ ("Cy Ganderton", "Quality Control Specialist", "Blue"), ("Hart Hagerty", "Desktop Support Technician", "Purple"), ("Brice Swyre", "Tax Accountant", "Red"), ("Marjy Ferencz", "Office Assistant I", "Crimson") ]; readonly (string Year, string Text)[] events = [ ("1984", "First Macintosh"), ("1998", "iMac"), ("2001", "iPod"), ("2007", "iPhone"), ("2015", "Apple Watch") ]; protected override void OnInitialized() => timer = new System.Threading.Timer(_ => InvokeAsync(() => { Tick(); StateHasChanged(); }), null, 1000, 1000); void Tick() { if (--seconds >= 0) return; seconds = 59; if (--minutes >= 0) return; minutes = 59; hours = hours == 0 ? 23 : hours - 1; } public void Dispose() => timer?.Dispose(); }