Skip to content

Commit adccbab

Browse files
marcosmouramarcosmoura
committed
feat(MdList): lists now support single, double and triple line
1 parent a0053d3 commit adccbab

File tree

7 files changed

+359
-22
lines changed

7 files changed

+359
-22
lines changed

‎docs/app/pages/Components/List/List.vue

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<example src="./examples/RegularLists.vue" />
1+
<example src="./examples/SingleLine.vue" />
2+
<example src="./examples/DoubleLine.vue" />
3+
<example src="./examples/TripleLine.vue" />
24

35
<template>
46
<page-container centered :title="$t('pages.list.title')">
@@ -7,9 +9,11 @@
79
</div>
810

911
<div class="page-container-section">
10-
<h2>Lists</h2>
12+
<h2>Regular lists</h2>
1113

12-
<code-example title="Regular Lists" :component="examples['regular-lists']" />
14+
<code-example title="Single Line" :component="examples['single-line']" />
15+
<code-example title="Double Line" :component="examples['double-line']" />
16+
<code-example title="Triple Line" :component="examples['triple-line']" />
1317

1418
<api-item title="API - md-content">
1519
<p>This component do not have any extra option.</p>

‎docs/app/pages/Components/List/examples/DoubleLine.vue

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<template>
2+
<div>
3+
<md-list class="md-double-line">
4+
<md-subheader>Phone</md-subheader>
5+
6+
<md-list-item>
7+
<md-icon class="md-primary">phone</md-icon>
8+
9+
<div class="md-list-item-text">
10+
<span>(650) 555-1234</span>
11+
<span>Mobile</span>
12+
</div>
13+
14+
<md-button class="md-icon-button md-list-action">
15+
<md-icon>sms</md-icon>
16+
</md-button>
17+
</md-list-item>
18+
19+
<md-list-item class="md-inset">
20+
<div class="md-list-item-text">
21+
<span>(650) 555-1234</span>
22+
<span>Mobile</span>
23+
</div>
24+
25+
<md-button class="md-icon-button md-list-action">
26+
<md-icon>sms</md-icon>
27+
</md-button>
28+
</md-list-item>
29+
30+
<md-divider></md-divider>
31+
32+
<md-subheader>Email</md-subheader>
33+
34+
<md-list-item>
35+
<md-icon class="md-primary">email</md-icon>
36+
37+
<div class="md-list-item-text">
38+
<span>aliconnors@example.com</span>
39+
<span>Personal</span>
40+
</div>
41+
</md-list-item>
42+
43+
<md-list-item class="md-inset">
44+
<div class="md-list-item-text">
45+
<span>ali_connors@example.com</span>
46+
<span>Work</span>
47+
</div>
48+
</md-list-item>
49+
</md-list>
50+
51+
<md-list class="md-double-line md-dense">
52+
<md-subheader>Phone</md-subheader>
53+
54+
<md-list-item>
55+
<md-icon class="md-primary">phone</md-icon>
56+
57+
<div class="md-list-item-text">
58+
<span>(650) 555-1234</span>
59+
<span>Mobile</span>
60+
</div>
61+
62+
<md-button class="md-icon-button md-list-action">
63+
<md-icon>sms</md-icon>
64+
</md-button>
65+
</md-list-item>
66+
67+
<md-list-item class="md-inset">
68+
<div class="md-list-item-text">
69+
<span>(650) 555-1234</span>
70+
<span>Mobile</span>
71+
</div>
72+
73+
<md-button class="md-icon-button md-list-action">
74+
<md-icon>sms</md-icon>
75+
</md-button>
76+
</md-list-item>
77+
78+
<md-divider></md-divider>
79+
80+
<md-subheader>Email</md-subheader>
81+
82+
<md-list-item>
83+
<md-icon class="md-primary">email</md-icon>
84+
85+
<div class="md-list-item-text">
86+
<span>aliconnors@example.com</span>
87+
<span>Personal</span>
88+
</div>
89+
</md-list-item>
90+
91+
<md-list-item class="md-inset">
92+
<div class="md-list-item-text">
93+
<span>ali_connors@example.com</span>
94+
<span>Work</span>
95+
</div>
96+
</md-list-item>
97+
</md-list>
98+
</div>
99+
</template>
100+
101+
<script>
102+
export default {
103+
name: 'DoubleLine'
104+
}
105+
</script>
106+
107+
<style lang="scss" scoped>
108+
.md-list {
109+
width: 320px;
110+
max-width: 100%;
111+
display: inline-block;
112+
vertical-align: top;
113+
border: 1px solid rgba(#000, .12);
114+
}
115+
</style>

‎docs/app/pages/Components/List/examples/RegularLists.vue ‎docs/app/pages/Components/List/examples/SingleLine.vue

+7-7
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323

2424
<md-divider class="md-inset"></md-divider>
2525

26-
<md-list-item class="md-inset">
26+
<md-list-item>
2727
<md-avatar>
2828
<img src="https://placeimg.com/40/40/people/5" alt="People">
2929
</md-avatar>
@@ -35,7 +35,7 @@
3535
</md-button>
3636
</md-list-item>
3737

38-
<md-list-item class="md-inset">
38+
<md-list-item>
3939
<md-avatar>
4040
<img src="https://placeimg.com/40/40/people/1" alt="People">
4141
</md-avatar>
@@ -47,7 +47,7 @@
4747
</md-button>
4848
</md-list-item>
4949

50-
<md-list-item class="md-inset">
50+
<md-list-item>
5151
<md-avatar>
5252
<img src="https://placeimg.com/40/40/people/6" alt="People">
5353
</md-avatar>
@@ -83,7 +83,7 @@
8383

8484
<md-divider class="md-inset"></md-divider>
8585

86-
<md-list-item class="md-inset">
86+
<md-list-item>
8787
<md-avatar>
8888
<img src="https://placeimg.com/40/40/people/5" alt="People">
8989
</md-avatar>
@@ -95,7 +95,7 @@
9595
</md-button>
9696
</md-list-item>
9797

98-
<md-list-item class="md-inset">
98+
<md-list-item>
9999
<md-avatar>
100100
<img src="https://placeimg.com/40/40/people/1" alt="People">
101101
</md-avatar>
@@ -107,7 +107,7 @@
107107
</md-button>
108108
</md-list-item>
109109

110-
<md-list-item class="md-inset">
110+
<md-list-item>
111111
<md-avatar>
112112
<img src="https://placeimg.com/40/40/people/6" alt="People">
113113
</md-avatar>
@@ -124,7 +124,7 @@
124124

125125
<script>
126126
export default {
127-
name: 'RegularLists'
127+
name: 'SingleLine'
128128
}
129129
</script>
130130

‎docs/app/pages/Components/List/examples/TripleLine.vue

+163
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<template>
2+
<div>
3+
<md-list class="md-triple-line">
4+
<md-list-item>
5+
<md-avatar>
6+
<img src="https://placeimg.com/40/40/people/1" alt="People">
7+
</md-avatar>
8+
9+
<div class="md-list-item-text">
10+
<span>Ali Connors</span>
11+
<span>Brunch this weekend?</span>
12+
<p>I'll be in your neighborhood doing errands this week. Do you want to meet?</p>
13+
</div>
14+
15+
<md-button class="md-icon-button md-list-action">
16+
<md-icon class="md-primary">star</md-icon>
17+
</md-button>
18+
</md-list-item>
19+
20+
<md-divider class="md-inset"></md-divider>
21+
22+
<md-list-item>
23+
<md-avatar>
24+
<img src="https://placeimg.com/40/40/people/6" alt="People">
25+
</md-avatar>
26+
27+
<div class="md-list-item-text">
28+
<span>me, Scott, Jennifer</span>
29+
<span>Summer BBQ</span>
30+
<p>Wish I could come, but I'm out of town this week. :(</p>
31+
</div>
32+
33+
<md-button class="md-icon-button md-list-action">
34+
<md-icon>star_border</md-icon>
35+
</md-button>
36+
</md-list-item>
37+
38+
<md-divider class="md-inset"></md-divider>
39+
40+
<md-list-item>
41+
<md-avatar>
42+
<img src="https://placeimg.com/40/40/people/5" alt="People">
43+
</md-avatar>
44+
45+
<div class="md-list-item-text">
46+
<span>Sandra Adams</span>
47+
<span>Oui oui</span>
48+
<p>Do you have Paris recommendations? Have you visited good places?</p>
49+
</div>
50+
51+
<md-button class="md-icon-button md-list-action">
52+
<md-icon>star_border</md-icon>
53+
</md-button>
54+
</md-list-item>
55+
56+
<md-divider class="md-inset"></md-divider>
57+
58+
<md-list-item>
59+
<md-avatar>
60+
<img src="https://placeimg.com/40/40/people/8" alt="People">
61+
</md-avatar>
62+
63+
<div class="md-list-item-text">
64+
<span>Trevor Hansen</span>
65+
<span>Order confirmation</span>
66+
<p>Thank you for your recent order from Amazon</p>
67+
</div>
68+
69+
<md-button class="md-icon-button md-list-action">
70+
<md-icon>star_border</md-icon>
71+
</md-button>
72+
</md-list-item>
73+
</md-list>
74+
75+
<md-list class="md-triple-line md-dense">
76+
<md-list-item>
77+
<md-avatar>
78+
<img src="https://placeimg.com/40/40/people/1" alt="People">
79+
</md-avatar>
80+
81+
<div class="md-list-item-text">
82+
<span>Ali Connors</span>
83+
<span>Brunch this weekend?</span>
84+
<p>I'll be in your neighborhood doing errands this week. Do you want to meet?</p>
85+
</div>
86+
87+
<md-button class="md-icon-button md-list-action">
88+
<md-icon class="md-primary">star</md-icon>
89+
</md-button>
90+
</md-list-item>
91+
92+
<md-divider class="md-inset"></md-divider>
93+
94+
<md-list-item>
95+
<md-avatar>
96+
<img src="https://placeimg.com/40/40/people/6" alt="People">
97+
</md-avatar>
98+
99+
<div class="md-list-item-text">
100+
<span>me, Scott, Jennifer</span>
101+
<span>Summer BBQ</span>
102+
<p>Wish I could come, but I'm out of town this week. :(</p>
103+
</div>
104+
105+
<md-button class="md-icon-button md-list-action">
106+
<md-icon>star_border</md-icon>
107+
</md-button>
108+
</md-list-item>
109+
110+
<md-divider class="md-inset"></md-divider>
111+
112+
<md-list-item>
113+
<md-avatar>
114+
<img src="https://placeimg.com/40/40/people/5" alt="People">
115+
</md-avatar>
116+
117+
<div class="md-list-item-text">
118+
<span>Sandra Adams</span>
119+
<span>Oui oui</span>
120+
<p>Do you have Paris recommendations? Have you visited good places?</p>
121+
</div>
122+
123+
<md-button class="md-icon-button md-list-action">
124+
<md-icon>star_border</md-icon>
125+
</md-button>
126+
</md-list-item>
127+
128+
<md-divider class="md-inset"></md-divider>
129+
130+
<md-list-item>
131+
<md-avatar>
132+
<img src="https://placeimg.com/40/40/people/8" alt="People">
133+
</md-avatar>
134+
135+
<div class="md-list-item-text">
136+
<span>Trevor Hansen</span>
137+
<span>Order confirmation</span>
138+
<p>Thank you for your recent order from Amazon</p>
139+
</div>
140+
141+
<md-button class="md-icon-button md-list-action">
142+
<md-icon>star_border</md-icon>
143+
</md-button>
144+
</md-list-item>
145+
</md-list>
146+
</div>
147+
</template>
148+
149+
<script>
150+
export default {
151+
name: 'TripleLine'
152+
}
153+
</script>
154+
155+
<style lang="scss" scoped>
156+
.md-list {
157+
width: 320px;
158+
max-width: 100%;
159+
display: inline-block;
160+
vertical-align: top;
161+
border: 1px solid rgba(#000, .12);
162+
}
163+
</style>

‎src/components/MdAvatar/MdAvatar.vue

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
2424
.md-avatar {
2525
width: $md-avatar-size;
26+
min-width: $md-avatar-size;
2627
height: $md-avatar-size;
2728
margin: auto;
2829
display: inline-flex;

0 commit comments

Comments
 (0)