62 lines
1.5 KiB
Markdown
62 lines
1.5 KiB
Markdown
<script setup lang="ts">
|
|
const track = {
|
|
name: 'Some lovely track',
|
|
artist: {
|
|
name: 'Artist'
|
|
},
|
|
cover: {
|
|
urls: {
|
|
original: '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'
|
|
}
|
|
}
|
|
}
|
|
|
|
const user = {
|
|
username: 'username'
|
|
}
|
|
</script>
|
|
|
|
# Activity
|
|
|
|
Activities display history entries for a Funkwhale pod. Each item contains the following information:
|
|
|
|
- An image
|
|
- A track title
|
|
- An artist name
|
|
- A username
|
|
- A [popover](./../popover.md)
|
|
|
|
| Prop | Data type | Required? | Description |
|
|
| ------- | ------------ | --------- | -------------------------------------------- |
|
|
| `track` | Track object | Yes | The track to render in the activity entry. |
|
|
| `user` | User object | Yes | The user associated with the activity entry. |
|
|
|
|
## Single items
|
|
|
|
You can render a single activity item by passing the track and user information to the `<fw-activity>` component.
|
|
|
|
```vue-html
|
|
<fw-activity :track="track" :user="user" />
|
|
```
|
|
|
|
<fw-activity :track="track" :user="user" />
|
|
|
|
## Activity lists
|
|
|
|
You can display a list of activity items by passing a `v-for` directive and adding a `key` to the item. The `key` must be unique to the list.
|
|
|
|
::: info
|
|
Items in a list are visually separated by a 1px border.
|
|
:::
|
|
|
|
```vue-html{4-5}
|
|
<fw-activity
|
|
:track="track"
|
|
:user="user"
|
|
v-for="i in 3"
|
|
:key="i"
|
|
/>
|
|
```
|
|
|
|
<fw-activity :track="track" :user="user" v-for="i in 3" :key="i" />
|