MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): card component has topright action slot

This commit is contained in:
upsiflu 2025-01-16 11:10:17 +02:00
parent 4da49c0bd6
commit d4e1991427
3 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
front/src/components/ui/Card.vue
View File

@ -68,6 +68,12 @@ const attributes = computed(() =>
{{ title }} {{ title }}
</component> </component>
<!-- Topright action -->
<div v-if="$slots.topright" :class="$style.topright">
<slot name="topright" />
</div>
<!-- Content --> <!-- Content -->
<Alert blue v-if="$slots.alert" :class="$style.alert"> <Alert blue v-if="$slots.alert" :class="$style.alert">
@ -184,6 +190,13 @@ const attributes = computed(() =>
margin-top:16px; margin-top:16px;
} }
>.topright {
position: absolute;
top: 0;
right: 0;
padding: 14px;
}
>.alert { >.alert {
padding-left: var(--fw-card-padding); padding-left: var(--fw-card-padding);
padding-right: var(--fw-card-padding); padding-right: var(--fw-card-padding);

16
front/ui-docs/components/ui/card.md
View File

@ -198,6 +198,22 @@ You can combine this prop with any other prop configuration. If you combine it w
</Card> </Card>
</div> </div>
## Add a topright action
```vue-html
<Card title="Topright action">
<template #topright>
<OptionsButton square-small />
</template>
</Card>
```
<Card title="Topright action">
<template #topright>
<OptionsButton square-small />
</template>
</Card>
## Add a Footer ## Add a Footer
Items in this region are secondary and will be displayed smaller than the main content. Items in this region are secondary and will be displayed smaller than the main content.