Skip to content
Snippets Groups Projects
index.md 1.84 KiB
Newer Older
  • Learn to ignore specific revisions
  • Kasper Seweryn's avatar
    Kasper Seweryn committed
    <script setup lang="ts">
    import { ref } from 'vue'
    
    const items = [
      {
        type: 'button',
        text: 'Play next',
        icon: 'bi-arrow-up-right',
        click: () => {}
      },
      {
        type: 'button',
        text: 'Append to queue',
        icon: 'bi-arrow-down-right',
        click: () => {}
      },
      {
        type: 'button',
        text: 'Add to playlist',
        icon: 'bi-music-note-list',
        click: () => {},
        items: [
          {
            type: 'button',
            text: 'Sample playlist',
            icon: 'bi-music-note-list',
            click: () => {}
          },
          { type: 'separator', },
          {
            type: 'button',
            text: 'New playlist',
            icon: 'bi-plus-lg',
            click: () => {}
          },
        ]
      },
      { type: 'separator', },
      {
        type: 'button',
        text: 'Add to favorites',
        icon: 'bi-heart',
        click: () => {}
      },
      {
        type: 'button',
        text: 'Organize and share',
        icon: 'bi-collection',
        click: () => {},
        items: [
          {
            type: 'button',
            text: 'Bandcamp',
            icon: '',
            click: () => {}
          },
          {
            type: 'button',
            text: 'Creative Commons',
            icon: '',
            click: () => {}
          },
          { type: 'separator', },
          {
            type: 'button',
            text: 'New library',
            icon: 'bi-plus-lg',
            click: () => {}
          },
          { type: 'separator', },
          {
            type: 'button',
            text: 'Share by link',
            icon: '',
            click: () => {}
          },
        ]
      },
      {
        type: 'button',
        text: 'Download',
        icon: 'bi-cloud-download',
        click: () => {}
      },
      { type: 'separator', },
      {
        type: 'button',
        text: 'Report',
        icon: 'bi-exclamation',
        click: () => {}
      },
    ]
    
    const open = ref(false)
    </script>
    
    # Popover
    ```html
    <fw-popover :items="items" />
    ```
    
    <fw-options-button @click="open = !open" />
    <fw-popover :items="items" v-model:open="open" />