-
Notifications
You must be signed in to change notification settings - Fork 92
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Get the possibility to have a sub-list #4755
Comments
This is already possible as "Element with children" |
Yes, but you get one level children and not more. Except if I'm wrong ? Edit - November 4th, 2023I can't to get more than one level with the example from the documentation : <template>
<NcAppNavigationItem name="Item with children" :allowCollapse="true" :open="true">
<template #icon>
<Folder :size="20" />
</template>
<template #counter>
<NcCounterBubble>
99+
</NcCounterBubble>
</template>
<template #actions>
<NcActionButton @click="alert('Edit')">
<template #icon>
<Pencil :size="20" />
</template>
Edit
</NcActionButton>
<NcActionButton @click="alert('Delete')">
<template #icon>
<Delete :size="20" />
</template>
Delete
</NcActionButton>
<NcActionLink name="Link" href="https://nextcloud.com">
<template #icon>
<OpenInNew :size="20" />
</template>
</NcActionLink>
</template>
<template>
<NcAppNavigationItem name="AppNavigationItemChild1">
<template>
<NcAppNavigationItem name="AppNavigationItemChild1-1">
</NcAppNavigationItem>
</template>
</NcAppNavigationItem>
<NcAppNavigationItem name="AppNavigationItemChild2" />
<NcAppNavigationItem name="AppNavigationItemChild3" />
<NcAppNavigationItem name="AppNavigationItemChild4" />
</template>
</NcAppNavigationItem>
</template>
<script>
import Folder from 'vue-material-design-icons/Folder'
import Delete from 'vue-material-design-icons/Delete'
import OpenInNew from 'vue-material-design-icons/OpenInNew'
import Pencil from 'vue-material-design-icons/Pencil'
export default {
components: {
Folder,
Delete,
OpenInNew,
Pencil,
},
}
</script> Edit - November, 7th 2023I saw that the The padding-left rule : https://github.com/nextcloud-libraries/nextcloud-vue/blob/1c2f926107725244a17b7d152163e5508ac76990/src/components/NcAppNavigationItem/NcAppNavigationItem.vue#L897C18-L897C27 The nextcloud-vue/src/assets/variables.scss Line 30 in 7795cfd
I create this gist as a draw : https://gist.github.com/zak39/1e2ddb4ca768e25743c606b24dae0101 The idea here is to declare a new props which is props {
/**
* code...
*/
/**
* The step level of the components
*/
level: {
type: Number,
default: 1,
},
},
} /* Second level nesting for lists */
.app-navigation-entry__children {
position: relative;
display: flex;
flex: 0 1 auto;
flex-direction: column;
width: 100%;
gap: var(--default-grid-baseline, 4px);
.app-navigation-entry {
display: inline-flex;
flex-wrap: wrap;
padding-left: calc(($icon-size - 8px) + (8px * $level));
}
} What do you think @susnux ? Knowing that it's possibile with Vue3 : https://learnvue.co/articles/reactive-styles-vue-3 . |
Do you have a use case for more than one level nesting? |
Yes of course ! I have this mockup made by a UX colleague : The idea is that "Project cloud", "Workspace Groups" ("Groupes Workspace" in french) and "Connected Groups" ("Groupes Connectés" in french) are However, "Workspace groups" and "Connected Groups" could be
It depends on the case. In the left sidebar, I agree with you on this point. But, if it's in the main content or in a modal window, it could make sense. |
Yes but that is what
I do not think you should use cc @jancborchardt as this probably is a design decision. |
We habe this one-subfolder level in Files for "Shares", is that not a component? |
@jancborchardt yes but this is about arbitrary levels, e.g. "Shares -> Shared by you -> shared to XY -> list of shares". |
Hi everyone 👋
As a web developer, I would like to add a sub-list to a NcAppNavigationItem component.
In fact, I would like to get an equivalent of this HTML code :
Currently, it's not possible. Because, the NcAppNavigation component gives developers just one level of a
<ul>
html element.We can write an equivalent to this code :
However, this requires to apply a custom css and it may break Nextcloud's flow design.
What do you think ?
The text was updated successfully, but these errors were encountered: