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

<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>

Authors

• @sejanH

Acknowledgements

• Inspired from -- Idea and some css were taken
• Readme.so -- to write this readme