Spacing issue

[ciops]

Hey, there's a spacing issue on the first element when using "big" size. It also affects custom spacing options.

[a62527776a]

Thanks for your feedback!

<vue-fab 
      size="big"
      :globalOptions="{spacing: 50,delay: 0.1}" // Please try to increase the line
/>

If it doesn't work, please send me a code snippet.

thank you!

[ciops]

I've created a new Vue project just to be sure there's no conflict with existing code, problem persists:

Changing the spacing value doesn't affect the first element.

My code:

<template>
    <vue-fab 
        icon="menu" 
        size="big" 
        :scrollAutoHide="false" 
        :globalOptions="{ spacing: 50, delay: 0.05 }" 
        :mainBtnColor="mainBtnColor" 
        >
        <!-- :style="{ transform: 'translateX(10px)' }" -->
        <fab-item 
            v-for="(item, idx) in menu"
            :idx="idx"
            :key="idx"
            :title="item.title"
            :color="item.color"
            :icon="item.icon"
            @clickItem="navigateTo" 
            />
    </vue-fab>
</template>

<script>
export default {
    name: "FloatingNavigation",
    data () {
        return {
            menu: [
                {
                    idx: 0,
                    title: 'actionable',
                    icon: 'whatshot',
                    color: '#ff9900',
                    titleColor: '#fff',
                    titleBgColor: '#000',
                },
                {
                    idx: 1,
                    title: 'assets',
                    icon: 'savings',
                    color: '#729DCB'
                },
                {
                    idx: 2,
                    title: 'stats',
                    icon: 'analytics',
                    color: '#729DCB'
                },
                {
                    idx: 3,
                    title: 'profile',
                    icon: 'perm_identity',
                    color: '#729DCB'
                }
            ],
            mainBtnColor: '#729DCB'
        }
    },
    methods: {
        navigateTo: function (item) {
            return;
        },

    }
}
</script>

Awesome work on this project, love it!

[a62527776a]

thank you! I missed this situation. This problem is fixed in the latest @0.7.9 version! You can check the latest situation in https://vue-fab.github.io/!

[ciops]

Works, thank you so much, really appreciated!

I would suggest using the spacing attribute to define the space between elements (excluding their size). This way, the elements are evenly spaced out (including the first one) in any context. Something like this:

let itemSize = 32;
if (this.$parent.size == 'big') {
    itemSize = 38;
} else if (this.$parent.size == 'small') {
    itemSize = 26;
}
defaultY = -((this.idx+1) * (itemSize + this.$parent.globalOptions.spacing)) + 'px';