Skip to content

Commit 83e17ff

Browse files
nickvergessennickvergessen
authored
Merge pull request #4783 from nextcloud-libraries/bugfix/noid/outlined-counter-color
fix(docs): Add samples for counters so they are never forgotten on ad…
2 parents bc6f8b9 + d063699 commit 83e17ff

File tree

1 file changed

+109
-4
lines changed

1 file changed

+109
-4
lines changed

‎src/components/NcListItem/NcListItem.vue

+109-4
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,12 @@
2626
<template>
2727
<ul>
2828
<NcListItem
29-
:name="'This is an active element'"
29+
:name="'This is an active element with highlighted counter'"
3030
:bold="false"
3131
:active="true"
3232
:details="'1h'"
3333
:counter-number="44"
34-
counterType="highlighted"
35-
class="active">
34+
counterType="highlighted">
3635
<template #icon>
3736
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
3837
</template>
@@ -56,7 +55,64 @@
5655
</template>
5756
</NcListItem>
5857
<NcListItem
59-
:name="'Name of the element'"
58+
:name="'This is an active element with outlined counter'"
59+
:bold="false"
60+
:active="true"
61+
:details="'1h'"
62+
:counter-number="44"
63+
counterType="outlined">
64+
<template #icon>
65+
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
66+
</template>
67+
<template #subname>
68+
In this slot you can put both text and other components such as icons
69+
</template>
70+
<template #indicator>
71+
<!-- Color dot -->
72+
<CheckboxBlankCircle :size="16" fill-color="#fff" />
73+
</template>
74+
<template #actions>
75+
<NcActionButton>
76+
Button one
77+
</NcActionButton>
78+
<NcActionButton>
79+
Button two
80+
</NcActionButton>
81+
<NcActionButton>
82+
Button three
83+
</NcActionButton>
84+
</template>
85+
</NcListItem>
86+
<NcListItem
87+
:name="'This is an active element with normal counter'"
88+
:bold="false"
89+
:active="true"
90+
:details="'1h'"
91+
:counter-number="44">
92+
<template #icon>
93+
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
94+
</template>
95+
<template #subname>
96+
In this slot you can put both text and other components such as icons
97+
</template>
98+
<template #indicator>
99+
<!-- Color dot -->
100+
<CheckboxBlankCircle :size="16" fill-color="#fff" />
101+
</template>
102+
<template #actions>
103+
<NcActionButton>
104+
Button one
105+
</NcActionButton>
106+
<NcActionButton>
107+
Button two
108+
</NcActionButton>
109+
<NcActionButton>
110+
Button three
111+
</NcActionButton>
112+
</template>
113+
</NcListItem>
114+
<NcListItem
115+
:name="'Name of the element with highlighted counter'"
60116
:bold="false"
61117
:force-display-actions="true"
62118
:details="'1h'"
@@ -80,6 +136,55 @@
80136
</NcActionButton>
81137
</template>
82138
</NcListItem>
139+
<NcListItem
140+
:name="'Name of the element with outlined counter'"
141+
:bold="false"
142+
:force-display-actions="true"
143+
:details="'1h'"
144+
:counter-number="44"
145+
counterType="outlined">
146+
<template #icon>
147+
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
148+
</template>
149+
<template #subname>
150+
In this slot you can put both text and other components such as icons
151+
</template>
152+
<template #actions>
153+
<NcActionButton>
154+
Button one
155+
</NcActionButton>
156+
<NcActionButton>
157+
Button two
158+
</NcActionButton>
159+
<NcActionButton>
160+
Button three
161+
</NcActionButton>
162+
</template>
163+
</NcListItem>
164+
<NcListItem
165+
:name="'Name of the element with normal counter'"
166+
:bold="false"
167+
:force-display-actions="true"
168+
:details="'1h'"
169+
:counter-number="44">
170+
<template #icon>
171+
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
172+
</template>
173+
<template #subname>
174+
In this slot you can put both text and other components such as icons
175+
</template>
176+
<template #actions>
177+
<NcActionButton>
178+
Button one
179+
</NcActionButton>
180+
<NcActionButton>
181+
Button two
182+
</NcActionButton>
183+
<NcActionButton>
184+
Button three
185+
</NcActionButton>
186+
</template>
187+
</NcListItem>
83188
<NcListItem
84189
:name="'Name of the element'"
85190
:bold="false">

0 commit comments

Comments
 (0)