Demonstração de Layout de Cartões

A pode mostrar seus registros como cartões em vez de linhas de tabela. Os cartões se enrolam para preencher a largura da grade, mostram a foto de cada contato ao lado do nome e mantêm todo o resto que MainGrid a grade faz: visualizações, busca, ordenação, paginação e seleção.

Contatos como Cartões

Escolha uma largura mínima de cartão para ver os cartões reflowjarem: MinCardWidth pega qualquer comprimento de CSS e por padrão é 320px. O menu suspenso da barra de ferramentas alterna entre cartões, linhas de tabela e automático, que mostra cartões apenas no celular, e o botão Ordenar ordena os cartões, que não têm cabeçalhos de coluna para clicar.

Exemplo de Blazor Razor
Qualquer pessoa pode ver os contatos na grade abaixo. Faça login para criar, visualizar e atualizar seus próprios contatos. 200px260px320px400px50%
Meus ContatosTodos os Contatos
AutomáticoTabelaCartas
Meus ContatosTodos os Contatos
AutomáticoTabelaCartas
Tamanho da página 102050100
Abagail Miller
Telefone Celular
(501) 801-9303
E-mail
Abagail_Miller30@yahoo.com
Nome da empresa
Lowe Inc
Idade
26
Aniversário
08/04/2000
Abdul Pollich
Telefone Celular
(319) 579-4439
E-mail
Abdul73@yahoo.com
Nome da empresa
Wiza, Bradtke and Hintz
Idade
70
Aniversário
03/08/1956
Abel Parisian
Telefone Celular
(631) 444-9854
E-mail
Abel84@gmail.com
Nome da empresa
Raynor - Lakin
Idade
21
Aniversário
16/08/2005
Abigale Kuvalis
Telefone Celular
(369) 810-9954
E-mail
Abigale71@gmail.com
Nome da empresa
Murazik Group
Idade
58
Aniversário
14/03/1968
Adell Paucek
Telefone Celular
(260) 615-0566
E-mail
Adell99@yahoo.com
Nome da empresa
Windler, Toy and D'Amore
Idade
47
Aniversário
06/12/1979
Adella Roob
Telefone Celular
(535) 638-9390
E-mail
Adella.Roob88@hotmail.com
Nome da empresa
Pollich - Kling
Idade
67
Aniversário
04/06/1959
Adolf Weber
Telefone Celular
(978) 300-6533
E-mail
Adolf.Weber10@gmail.com
Nome da empresa
West Group
Idade
69
Aniversário
22/05/1957
Adonis Torphy
Telefone Celular
(842) 804-9308
E-mail
Adonis_Torphy35@hotmail.com
Nome da empresa
Mohr and Sons
Idade
34
Aniversário
08/08/1992
Agustin Goyette
Telefone Celular
(374) 932-0000
E-mail
Agustin_Goyette@gmail.com
Nome da empresa
Lebsack, Homenick and Carter
Idade
34
Aniversário
08/01/1992
Agustin Rau
Telefone Celular
(986) 867-9045
E-mail
Agustin_Rau@gmail.com
Nome da empresa
Lehner Group
Idade
40
Aniversário
24/02/1986
Aidan Kihn
Telefone Celular
(800) 748-6993
E-mail
Aidan_Kihn@yahoo.com
Nome da empresa
Boyer - Schaefer
Idade
37
Aniversário
27/03/1989
Aileen Fahey
Telefone Celular
(234) 070-9387
E-mail
Aileen_Fahey@yahoo.com
Nome da empresa
Funk and Sons
Idade
25
Aniversário
12/08/2001
Aileen Walsh
Telefone Celular
(127) 426-0490
E-mail
Aileen75@gmail.com
Nome da empresa
Hyatt - Toy
Idade
45
Aniversário
22/09/1981
Aisha Collins
Telefone Celular
(186) 696-4315
E-mail
Aisha.Collins@gmail.com
Nome da empresa
Balistreri, Heller and Murphy
Idade
36
Aniversário
06/05/1990
Aiyana Upton
Telefone Celular
(703) 053-8351
E-mail
Aiyana_Upton30@gmail.com
Nome da empresa
Abshire - Marks
Idade
41
Aniversário
09/10/1985
Al Leannon
Telefone Celular
(140) 969-5761
E-mail
Al71@yahoo.com
Nome da empresa
Schroeder - Murphy
Idade
35
Aniversário
25/02/1991
Alana Barton
Telefone Celular
(621) 817-8829
E-mail
Alana_Barton48@hotmail.com
Nome da empresa
Bashirian - Weber
Idade
38
Aniversário
04/02/1988
Alanna Schowalter
Telefone Celular
(966) 074-0638
E-mail
Alanna.Schowalter53@gmail.com
Nome da empresa
Schmeler and Sons
Idade
30
Aniversário
11/11/1996
Albert Kreiger
Telefone Celular
(439) 429-5128
E-mail
Albert50@yahoo.com
Nome da empresa
Hyatt - Toy
Idade
46
Aniversário
24/08/1980
Alberto Kutch
Telefone Celular
(018) 306-3524
E-mail
Alberto_Kutch@hotmail.com
Nome da empresa
VonRueden, Hilpert and Borer
Idade
56
Aniversário
08/12/1970