@inkline/inkline
Version:
Inkline is the Vue.js UI/UX Library built for creating your next design system
155 lines (153 loc) • 4.86 kB
text/typescript
export const manifest = {
name: 'hamburger-menu',
events: [
{
description: 'Event emitted for setting the modelValue',
name: 'update:modelValue'
}
],
props: [
{
name: 'animation',
type: [
'close',
'arrow-up',
'arrow-down',
'arrow-left',
'arrow-right',
'plus',
'minus'
],
default: 'close',
description: 'The animation of the hamburger menu'
},
{
name: 'color',
type: [
'light',
'dark'
],
default: 'light',
description: 'The color variant of the hamburger menu'
},
{
name: 'modelValue',
type: [
'Boolean'
],
default: 'false',
description: 'Used to set the hamburger menu as opened or closed'
}
],
css: {
selector: '.hamburger-menu',
defaults: {
size: 'md',
color: 'light'
},
variables: [
{
name: 'background',
type: 'color',
value: 'color(\'dark\')',
description: 'The background of the hamburger-menu component'
},
{
name: 'opacity',
type: '',
value: '0.7',
description: 'The opacity of the hamburger-menu component'
},
{
name: 'opacity--hover',
type: '',
value: '1',
description: 'The opacity of the hamburger-menu component'
},
{
name: 'padding-top',
type: '',
value: 'calc(var(--padding-top) / 2)',
description: 'The padding top of the card component'
},
{
name: 'padding-right',
type: '',
value: 'calc(var(--padding-right) / 2)',
description: 'The padding right of the card component'
},
{
name: 'padding-bottom',
type: '',
value: 'calc(var(--padding-bottom) / 2)',
description: 'The padding bottom of the card component'
},
{
name: 'padding-left',
type: '',
value: 'calc(var(--padding-left) / 2)',
description: 'The padding left of the card component'
},
{
name: 'padding',
type: '',
value: 'var(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)',
description: 'The padding of the card component'
},
{
name: 'bar--border-radius',
type: '',
value: '2px',
description: 'The border radius of the hamburger-menu component bars'
},
{
name: 'bar--spacing',
type: '',
value: '5px',
description: 'The spacing between the hamburger-menu component bars'
},
{
name: 'bar--width',
type: '',
value: '30px',
description: 'The width of the hamburger-menu component bars'
},
{
name: 'bar--height',
type: '',
value: '3px',
description: 'The height of the hamburger-menu component bars'
}
],
variants: [
{
name: 'light',
type: 'variant',
description: 'Variables for the light color variant',
variables: [
{
name: 'background',
type: '',
value: 'color(\'dark\')',
description: 'The background of the hamburger-menu component, for the light color variant'
}
]
},
{
name: 'dark',
type: 'variant',
description: 'Variables for the dark color variant',
variables: [
{
name: 'background',
type: '',
value: 'color(\'light\')',
description: 'The background of the hamburger-menu component, for the dark color variant'
}
]
}
]
},
slots: []
};
export default manifest;