Skip to content
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

feat(VTreeview): Add subtitle & divider slots support #20938

Merged
merged 2 commits into from
Feb 3, 2025
Merged

Conversation

yuwu9145
Copy link
Member

@yuwu9145 yuwu9145 commented Jan 29, 2025

fixes #20781

Description

Markup:

<template>
  <v-treeview :items="items" item-value="id" activatable>
    <template v-slot:title="{ item }"> <b>title - {{ item.title }}</b>  </template>
    <template v-slot:subtitle> subtitle </template>
    <template v-slot:append> append </template>
    <template v-slot:prepend> prepend </template>
    <template v-slot:divider> <v-divider /> </template>
  </v-treeview>
</template>

<script>
  export default {
    data: () => ({
      items: [
        {
          id: 1,
          title: 'Applications :',
          children: [
            { id: 2, title: 'Calendar : app', subtitle: 'CSub' },
            { type: 'divider' },
            { id: 3, title: 'Chrome : app' },
            { type: 'divider' },
            { id: 4, title: 'Webstorm : app' },
          ],
        },
        { type: 'divider' },
        {
          id: 5,
          title: 'Documents :',
          children: [
            {
              id: 6,
              title: 'vuetify :',
              children: [
                {
                  id: 7,
                  title: 'src :',
                  children: [
                    { id: 8, title: 'index : ts' },
                    { type: 'divider' },
                    { id: 9, title: 'bootstrap : ts' },
                  ],
                },
              ],
            },
            {
              id: 10,
              title: 'material2 :',
              children: [
                {
                  id: 11,
                  title: 'src :',
                  children: [
                    { id: 12, title: 'v-btn : ts' },
                    { id: 13, title: 'v-card : ts' },
                    { id: 14, title: 'v-window : ts' },
                  ],
                },
              ],
            },
          ],
        },
        { type: 'divider' },
        {
          id: 15,
          title: 'Downloads :',
          children: [
            { id: 16, title: 'October : pdf' },
            { id: 17, title: 'November : pdf' },
            { id: 18, title: 'Tutorial : html' },
          ],
        },
        { type: 'divider' },
        {
          id: 19,
          title: 'Videos :',
          children: [
            {
              id: 20,
              title: 'Tutorials :',
              children: [
                { id: 21, title: 'Basic layouts : mp4' },
                { id: 22, title: 'Advanced techniques : mp4' },
                { id: 23, title: 'All about app : dir' },
              ],
            },
            { id: 24, title: 'Intro : mov' },
            { id: 25, title: 'Conference introduction : avi' },
          ],
        },
      ],
    }),
  }
</script>

@yuwu9145 yuwu9145 changed the title Fix 20781 feat(VTreeview): Add subtitle & divider slots support Jan 29, 2025
@yuwu9145 yuwu9145 marked this pull request as ready for review January 31, 2025 15:48
@yuwu9145 yuwu9145 requested review from KaelWD and johnleider January 31, 2025 15:48
@yuwu9145
Copy link
Member Author

title, subtitle, append, prepend & divider slots are supported now.

As for "header" & "subheader", I'm happy to implement them when feature requests come. At this stage and in my opinion, they are less likely to be used in treeview context.

@KaelWD KaelWD merged commit e63b322 into master Feb 3, 2025
19 checks passed
@KaelWD KaelWD deleted the fix-20781 branch February 3, 2025 10:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug Report][3.7.5] VTreeView slots [subtitle, divider, header, subheader] are not working
3 participants