Skip to content

Commit b14b368

Browse files
author
pablohpsilva
committed
List.vue enhanced with examples
1 parent 369f3f0 commit b14b368

File tree

1 file changed

+107
-27
lines changed

1 file changed

+107
-27
lines changed

‎docs/src/pages/components/List.vue

Lines changed: 107 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -848,7 +848,7 @@
848848
</div>
849849
</example-box>
850850

851-
<example-box card-title="Controls">
851+
<example-box card-title="Multiple Options">
852852
<div slot="demo">
853853
<div class="phone-viewport">
854854
<md-toolbar md-theme="white">
@@ -864,7 +864,30 @@
864864
</md-list-item>
865865
</md-list>
866866
</div>
867+
</div>
868+
869+
<div slot="code">
870+
<code-block lang="xml">
871+
&lt;div class=&quot;phone-viewport&quot;&gt;
872+
&lt;md-toolbar md-theme=&quot;white&quot;&gt;
873+
&lt;span class=&quot;md-title&quot;&gt;Multiple options&lt;/span&gt;
874+
&lt;/md-toolbar&gt;
875+
876+
&lt;md-list&gt;
877+
&lt;md-list-item&gt;Plain Text&lt;/md-list-item&gt;
878+
&lt;md-list-item target=&quot;_blank&quot; href=&quot;https://google.com&quot;&gt;Link&lt;/md-list-item&gt;
879+
&lt;md-list-item @click.native=&quot;openAlert&quot;&gt;Button&lt;/md-list-item&gt;
880+
&lt;md-list-item&gt;
881+
&lt;router-link to=&quot;/components/list&quot;&gt;Router View&lt;/router-link&gt;
882+
&lt;/md-list-item&gt;
883+
&lt;/md-list&gt;
884+
&lt;/div&gt;
885+
</code-block>
886+
</div>
887+
</example-box>
867888

889+
<example-box card-title="Expand List">
890+
<div slot="demo">
868891
<div class="phone-viewport">
869892
<md-toolbar md-theme="white">
870893
<span class="md-title">Single Expand</span>
@@ -975,52 +998,109 @@
975998
<div slot="code">
976999
<code-block lang="xml">
9771000
&lt;div class=&quot;phone-viewport&quot;&gt;
978-
&lt;md-list&gt;
1001+
&lt;md-toolbar md-theme=&quot;white&quot;&gt;
1002+
&lt;span class=&quot;md-title&quot;&gt;Single Expand&lt;/span&gt;
1003+
&lt;/md-toolbar&gt;
1004+
1005+
&lt;md-list&gt;
9791006
&lt;md-list-item&gt;
980-
&lt;md-icon&gt;whatshot&lt;/md-icon&gt;
981-
&lt;span&gt;News&lt;/span&gt;
1007+
&lt;md-icon&gt;whatshot&lt;/md-icon&gt;
1008+
&lt;span&gt;News&lt;/span&gt;
9821009

983-
&lt;md-list-expand&gt;
1010+
&lt;md-list-expand&gt;
9841011
&lt;md-list&gt;
985-
&lt;md-list-item class=&quot;md-inset&quot;&gt;World&lt;/md-list-item&gt;
986-
&lt;md-list-item class=&quot;md-inset&quot;&gt;Americas&lt;/md-list-item&gt;
987-
&lt;md-list-item class=&quot;md-inset&quot;&gt;Europe&lt;/md-list-item&gt;
1012+
&lt;md-list-item class=&quot;md-inset&quot;&gt;World&lt;/md-list-item&gt;
1013+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Americas&lt;/md-list-item&gt;
1014+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Europe&lt;/md-list-item&gt;
9881015
&lt;/md-list&gt;
989-
&lt;/md-list-expand&gt;
1016+
&lt;/md-list-expand&gt;
9901017
&lt;/md-list-item&gt;
9911018

9921019
&lt;md-list-item&gt;
993-
&lt;md-icon&gt;videogame_asset&lt;/md-icon&gt;
994-
&lt;span&gt;Games&lt;/span&gt;
1020+
&lt;md-icon&gt;videogame_asset&lt;/md-icon&gt;
1021+
&lt;span&gt;Games&lt;/span&gt;
9951022

996-
&lt;md-list-expand&gt;
1023+
&lt;md-list-expand&gt;
9971024
&lt;md-list&gt;
998-
&lt;md-list-item class=&quot;md-inset&quot;&gt;Console&lt;/md-list-item&gt;
999-
&lt;md-list-item class=&quot;md-inset&quot;&gt;PC&lt;/md-list-item&gt;
1000-
&lt;md-list-item class=&quot;md-inset&quot;&gt;Phone&lt;/md-list-item&gt;
1025+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Console&lt;/md-list-item&gt;
1026+
&lt;md-list-item class=&quot;md-inset&quot;&gt;PC&lt;/md-list-item&gt;
1027+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Phone&lt;/md-list-item&gt;
10011028
&lt;/md-list&gt;
1002-
&lt;/md-list-expand&gt;
1029+
&lt;/md-list-expand&gt;
10031030
&lt;/md-list-item&gt;
10041031

10051032
&lt;md-list-item&gt;
1006-
&lt;md-icon&gt;video_library&lt;/md-icon&gt;
1007-
&lt;span&gt;Video&lt;/span&gt;
1033+
&lt;md-icon&gt;video_library&lt;/md-icon&gt;
1034+
&lt;span&gt;Video&lt;/span&gt;
10081035

1009-
&lt;md-list-expand&gt;
1036+
&lt;md-list-expand&gt;
10101037
&lt;md-list&gt;
1011-
&lt;md-list-item class=&quot;md-inset&quot;&gt;Humor&lt;/md-list-item&gt;
1012-
&lt;md-list-item class=&quot;md-inset&quot;&gt;Music&lt;/md-list-item&gt;
1013-
&lt;md-list-item class=&quot;md-inset&quot;&gt;Movies&lt;/md-list-item&gt;
1014-
&lt;md-list-item class=&quot;md-inset&quot;&gt;TV Shows&lt;/md-list-item&gt;
1038+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Humor&lt;/md-list-item&gt;
1039+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Music&lt;/md-list-item&gt;
1040+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Movies&lt;/md-list-item&gt;
1041+
&lt;md-list-item class=&quot;md-inset&quot;&gt;TV Shows&lt;/md-list-item&gt;
10151042
&lt;/md-list&gt;
1016-
&lt;/md-list-expand&gt;
1043+
&lt;/md-list-expand&gt;
10171044
&lt;/md-list-item&gt;
10181045

10191046
&lt;md-list-item&gt;
1020-
&lt;md-icon&gt;shopping_basket&lt;/md-icon&gt;
1021-
&lt;span&gt;Shop&lt;/span&gt;
1047+
&lt;md-icon&gt;shopping_basket&lt;/md-icon&gt;
1048+
&lt;span&gt;Shop&lt;/span&gt;
10221049
&lt;/md-list-item&gt;
1023-
&lt;/md-list&gt;
1050+
&lt;/md-list&gt;
1051+
&lt;/div&gt;
1052+
1053+
&lt;div class=&quot;phone-viewport&quot;&gt;
1054+
&lt;md-toolbar md-theme=&quot;white&quot;&gt;
1055+
&lt;span class=&quot;md-title&quot;&gt;Multiple Expand&lt;/span&gt;
1056+
&lt;/md-toolbar&gt;
1057+
1058+
&lt;md-list&gt;
1059+
&lt;md-list-item md-expand-multiple&gt;
1060+
&lt;md-icon&gt;whatshot&lt;/md-icon&gt;
1061+
&lt;span&gt;News&lt;/span&gt;
1062+
1063+
&lt;md-list-expand&gt;
1064+
&lt;md-list&gt;
1065+
&lt;md-list-item class=&quot;md-inset&quot;&gt;World&lt;/md-list-item&gt;
1066+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Americas&lt;/md-list-item&gt;
1067+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Europe&lt;/md-list-item&gt;
1068+
&lt;/md-list&gt;
1069+
&lt;/md-list-expand&gt;
1070+
&lt;/md-list-item&gt;
1071+
1072+
&lt;md-list-item md-expand-multiple&gt;
1073+
&lt;md-icon&gt;videogame_asset&lt;/md-icon&gt;
1074+
&lt;span&gt;Games&lt;/span&gt;
1075+
1076+
&lt;md-list-expand&gt;
1077+
&lt;md-list&gt;
1078+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Console&lt;/md-list-item&gt;
1079+
&lt;md-list-item class=&quot;md-inset&quot;&gt;PC&lt;/md-list-item&gt;
1080+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Phone&lt;/md-list-item&gt;
1081+
&lt;/md-list&gt;
1082+
&lt;/md-list-expand&gt;
1083+
&lt;/md-list-item&gt;
1084+
1085+
&lt;md-list-item md-expand-multiple&gt;
1086+
&lt;md-icon&gt;video_library&lt;/md-icon&gt;
1087+
&lt;span&gt;Video&lt;/span&gt;
1088+
1089+
&lt;md-list-expand&gt;
1090+
&lt;md-list&gt;
1091+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Humor&lt;/md-list-item&gt;
1092+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Music&lt;/md-list-item&gt;
1093+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Movies&lt;/md-list-item&gt;
1094+
&lt;md-list-item class=&quot;md-inset&quot;&gt;TV Shows&lt;/md-list-item&gt;
1095+
&lt;/md-list&gt;
1096+
&lt;/md-list-expand&gt;
1097+
&lt;/md-list-item&gt;
1098+
1099+
&lt;md-list-item&gt;
1100+
&lt;md-icon&gt;shopping_basket&lt;/md-icon&gt;
1101+
&lt;span&gt;Shop&lt;/span&gt;
1102+
&lt;/md-list-item&gt;
1103+
&lt;/md-list&gt;
10241104
&lt;/div&gt;
10251105
</code-block>
10261106
</div>

0 commit comments

Comments
 (0)