Skip to content

Commit

Permalink
feat(NcAppSidebar): Add subname slot for advanced usage
Browse files Browse the repository at this point in the history
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
  • Loading branch information
susnux committed Feb 21, 2024
1 parent ce635cc commit 470a5be
Showing 1 changed file with 40 additions and 6 deletions.
46 changes: 40 additions & 6 deletions src/components/NcAppSidebar/NcAppSidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -312,6 +312,36 @@ export default {
</script>
```

### Custom subname

Instead of using the `subname` prop you can use the same called slot. This is handy if you need to add accessible information.
Like in the following example where the goal is to show a star icon to mark the file a favorite.
Simplying adding `★` would not work as screen readers might not or wrongly announce the icon meaning this information is lost.

A working alternative would be using an icon together with an `aria-label`:

```vue
<template>
<NcAppSidebar name="cat-picture.jpg">
<template #subname>
<NcIconSvgWrapper inline :path="mdiStar" name="Favorite" />
123 KiB, a month ago
</template>
</NcAppSidebar>
</template>
<script>
import { mdiStar } from '@mdi/js'
export default {
setup() {
return {
mdiStar,
}
}
}
</script>
```

### Empty sidebar for e.g. empty content component.

```vue
Expand Down Expand Up @@ -443,11 +473,13 @@ export default {
</NcActions>
</div>
<!-- secondary name -->
<p v-if="subname.trim() !== ''"
:aria-label="subtitle"
:title="subtitle"
<p v-if="subname.trim() !== '' || $slots['subname']"
:title="subtitle || undefined"
class="app-sidebar-header__subname">
{{ subname }}
<!-- @slot Alternative to the `subname` prop can be used for more complex conent. It will be rendered within a `p` tag. -->
<slot name="subname">
{{ subname }}
</slot>
</p>
</div>
</div>
Expand Down Expand Up @@ -1163,9 +1195,11 @@ $top-buttons-spacing: 6px;
// subname
.app-sidebar-header__subname {
padding: 0;
opacity: $opacity_normal;
align-items: center;
color: var(--color-text-maxcontrast);
display: flex;
font-size: var(--default-font-size);
padding: 0;
}
}
}
Expand Down

0 comments on commit 470a5be

Please sign in to comment.