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

feat(ui-docs): improve card documentation

This commit is contained in:
upsiflu 2024-12-18 16:55:24 +01:00
parent 84eb16bb01
commit 6ee1343443
1 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -67,22 +67,27 @@ TODO: Test if it works. Set up a mock router in vitest.
Add a `:to` prop, either containing an external link (`"https://..."`) or a Vue Router destination: Add a `:to` prop, either containing an external link (`"https://..."`) or a Vue Router destination:
<Layout flex>
```ts ```ts
:to="{name: 'library.albums.detail', params: {id: album.id}}" <Card small title="Link"
:to="{name: 'library.albums.detail', params: {id: album.id}}"
/>
``` ```
<div class="preview"> <Layout class="preview">
<Card <Card small title="Link"
title="Frequently Asked Questions" :to="{name: 'library.albums.detail', params: {id: 1}}"
@click="alert('A quick answer!')" />
> </Layout>
Got a question about Funkwhale? Get a quick answer! </Layout>
</Card></div>
## Card as a Category header ## Card as a Category header
Category cards are basic cards that contain only a title. To create a category card, pass a `category` prop. Category cards are basic cards that contain only a title. To create a category card, pass a `category` prop.
<Layout flex>
```vue-html{1} ```vue-html{1}
<Card category <Card category
title="Example Translations" title="Example Translations"
@ -94,12 +99,13 @@ Category cards are basic cards that contain only a title. To create a category c
title="Example Translations" title="Example Translations"
/> />
</div> </div>
</Layout>
## Add an Image ## Add an Image
Pass an image source to the `image` prop or set `image.src` and `image.style`. Pass an image source to the `image` prop or set `image.src` and `image.style`.
<Layout flex> <Layout :columnWidth="200" grid>
```vue-html{4,11-12} ```vue-html{4,11-12}
<Card <Card
@ -117,20 +123,18 @@ Pass an image source to the `image` prop or set `image.src` and `image.style`.
</Card> </Card>
``` ```
<div class="preview"> <Layout stack class="preview">
<Card <Card
style="--width:208px" style="--width:208px"
title="For music lovers" title="For music lovers"
image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb" /> image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb" />
</div>
<div class="preview">
<Card <Card
style="--width:208px" style="--width:208px"
title="For music lovers" title="For music lovers"
:image="{ src:'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb', :image="{ src:'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
style:'withPadding' }" /> style:'withPadding' }" />
</div> </Layout>
</Layout> </Layout>
## Add an Alert ## Add an Alert