Skip to content

Commit

Permalink
Merge pull request #4783 from nextcloud-libraries/bugfix/noid/outline…
Browse files Browse the repository at this point in the history 
…d-counter-color

fix(docs): Add samples for counters so they are never forgotten on ad…
  • Loading branch information
@nickvergessen
nickvergessen authored Nov 9, 2023
2 parents bc6f8b9 + d063699 commit 83e17ff
Showing 1 changed file with 109 additions and 4 deletions.
113 changes: 109 additions & 4 deletions src/components/NcListItem/NcListItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,12 @@
<template>
<ul>
<NcListItem
:name="'This is an active element'"
:name="'This is an active element with highlighted counter'"
:bold="false"
:active="true"
:details="'1h'"
:counter-number="44"
counterType="highlighted"
class="active">
counterType="highlighted">
<template #icon>
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
</template>
Expand All @@ -56,7 +55,64 @@
</template>
</NcListItem>
<NcListItem
:name="'Name of the element'"
:name="'This is an active element with outlined counter'"
:bold="false"
:active="true"
:details="'1h'"
:counter-number="44"
counterType="outlined">
<template #icon>
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
</template>
<template #subname>
In this slot you can put both text and other components such as icons
</template>
<template #indicator>
<!-- Color dot -->
<CheckboxBlankCircle :size="16" fill-color="#fff" />
</template>
<template #actions>
<NcActionButton>
Button one
</NcActionButton>
<NcActionButton>
Button two
</NcActionButton>
<NcActionButton>
Button three
</NcActionButton>
</template>
</NcListItem>
<NcListItem
:name="'This is an active element with normal counter'"
:bold="false"
:active="true"
:details="'1h'"
:counter-number="44">
<template #icon>
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
</template>
<template #subname>
In this slot you can put both text and other components such as icons
</template>
<template #indicator>
<!-- Color dot -->
<CheckboxBlankCircle :size="16" fill-color="#fff" />
</template>
<template #actions>
<NcActionButton>
Button one
</NcActionButton>
<NcActionButton>
Button two
</NcActionButton>
<NcActionButton>
Button three
</NcActionButton>
</template>
</NcListItem>
<NcListItem
:name="'Name of the element with highlighted counter'"
:bold="false"
:force-display-actions="true"
:details="'1h'"
Expand All @@ -80,6 +136,55 @@
</NcActionButton>
</template>
</NcListItem>
<NcListItem
:name="'Name of the element with outlined counter'"
:bold="false"
:force-display-actions="true"
:details="'1h'"
:counter-number="44"
counterType="outlined">
<template #icon>
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
</template>
<template #subname>
In this slot you can put both text and other components such as icons
</template>
<template #actions>
<NcActionButton>
Button one
</NcActionButton>
<NcActionButton>
Button two
</NcActionButton>
<NcActionButton>
Button three
</NcActionButton>
</template>
</NcListItem>
<NcListItem
:name="'Name of the element with normal counter'"
:bold="false"
:force-display-actions="true"
:details="'1h'"
:counter-number="44">
<template #icon>
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
</template>
<template #subname>
In this slot you can put both text and other components such as icons
</template>
<template #actions>
<NcActionButton>
Button one
</NcActionButton>
<NcActionButton>
Button two
</NcActionButton>
<NcActionButton>
Button three
</NcActionButton>
</template>
</NcListItem>
<NcListItem
:name="'Name of the element'"
:bold="false">
Expand Down

0 comments on commit 83e17ff

Please sign in to comment.