Vue3horizontalcollapse NPM

Vue3 Horizontal Collapse

npm install -S vue3horizontalcollapse

Main component requires few props

Items (required)
- title: String | required => shown when inactive
- body: Object | required => shown when active
  - activeTitle: String | optional => active tab title
  - description: String | required => can render html
  - link: Object | optional => show another link
    - el: String | required => href or router-link
    - url: String | required => target url
    - text: String | required => link text
defaultHeight: String | optional => default: 16rem
activeIndex: String/Boolean | optional => set active tab for first load, default: false
itemSpan: Number | optional => span active tab for itemSpan count, default: 0
itemMinWidth: String | optional => inactive tab width, default: 10rem
itemMaxWidth: String | optional => container width, default: 100%

Example

preview

<script setup>
import HorizontalCollapse from 'vue3horizontalcollapse';
import 'vue3horizontalcollapse/dist/style.css'
defineProps({
  items: {
    default: [
      {
        title: "List",
        bgColor: '#bfbdbd',
        body: {
          activeTitle: "List active",
          description: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates
                            modi laudantium facere aut, nemo praesentium, labore doloremque,
                            porro ipsam qui nihil animi ea maiores. Ut excepturi quae veritatis.
                            Recusandae, cupiditate? Lorem ipsum dolor sit amet consectetur
                            adipisicing elit. Voluptates modi laudantium facere aut, nemo
                            praesentium, labore doloremque, porro ipsam qui nihil animi ea
                            maiores. Ut excepturi quae veritatis. Recusandae, cupiditate?`,
          link: {
            el: 'href',
            url: 'https://sejan.xyz',
            text: 'Click here'
          }
        }
      },
      {
        title: "Edit",
        bgColor: '#8a8989',
        body: {
          activeTitle: "Edit active",
          description: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates
                            modi laudantium facere aut, nemo praesentium, labore doloremque,
                            porro ipsam qui nihil animi ea maiores. Ut excepturi quae veritatis.
                            Recusandae, cupiditate? Lorem ipsum dolor sit amet consectetur
                            adipisicing elit. Voluptates modi laudantium facere aut, nemo
                            praesentium, labore doloremque, porro ipsam qui nihil animi ea
                            maiores. Ut excepturi quae veritatis. Recusandae, cupiditate?`
        }
      },
      {
        title: "Create",
        bgColor: '#bfbdbd',
        body: {
          activeTitle: "Create active",
          description: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates
                            modi laudantium facere aut, nemo praesentium, labore doloremque,
                            porro ipsam qui nihil animi ea maiores. Ut excepturi quae veritatis.
                            Recusandae, cupiditate? Lorem ipsum dolor sit amet consectetur
                            adipisicing elit. Voluptates modi laudantium facere aut, nemo
                            praesentium, labore doloremque, porro ipsam qui nihil animi ea
                            maiores. Ut excepturi quae veritatis. Recusandae, cupiditate?`
        }
      },
      {
        title: "Delete",
        bgColor: '#8a8989',
        body: {
          activeTitle: "Delete active",
          description: `<b>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates
                            modi laudantium facere aut, nemo praesentium, labore doloremque,
                            porro ipsam qui nihil animi ea maiores. Ut excepturi quae veritatis.
                            Recusandae, cupiditate? Lorem ipsum dolor sit amet consectetur
                            adipisicing elit. Voluptates modi laudantium facere aut, nemo
                            praesentium, labore doloremque, porro ipsam qui nihil animi ea
                            maiores. Ut excepturi quae veritatis. Recusandae, cupiditate?
                            </b>`,
          link: {
            el: 'router-link',
            url: '/path/subpath',
            text: 'Click here'
          }
        }
      }
    ]
  }
})
</script>
<template>
  <div>
    <HorizontalCollapse :items="items" defaultHeight="300px"></HorizontalCollapse>
  </div>
</template>