gov-gui
Version:
Gov UI Component Library Typscript Build
96 lines (95 loc) • 3.11 kB
JavaScript
import { html } from "lit-html";
/**
* Row components can be used to quickly create basic grid layouts or to control your other component layouts,
* with options to align and justify content. They allow for flexible spacing and layout control at the column level.
*/
export default {
title: 'Layouts/Row',
tags: ['autodocs'],
parameters: {
actions: {
handles: ['click'],
},
},
argTypes: {
align: {
control: 'select',
options: ['start', 'center', 'end', 'stretch', 'baseline'],
description: 'Defines vertical alignment of the content within the row.',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'start' },
category: 'Attributes',
},
},
justify: {
control: 'select',
options: ['start', 'center', 'end', 'between', 'around', 'evenly'],
description: 'Defines horizontal alignment and distribution of content in the row.',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'start' },
category: 'Attributes',
},
},
gap: {
control: 'text',
description: 'Controls the gap (spacing) between items within the row. Accepts CSS values like "10px" or "1rem".',
table: {
type: { summary: 'string' },
defaultValue: { summary: '0' },
category: 'Attributes',
},
},
reverse: {
control: 'boolean',
description: 'Reverses the order of the row content.',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
category: 'Attributes',
},
},
classes: {
control: 'text',
description: 'Custom CSS classes to apply to the row component.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
category: 'Attributes',
},
},
styles: {
control: 'object',
description: 'Custom inline styles to apply to the row component. Accepts an object of CSS properties.',
table: {
type: { summary: 'object' },
defaultValue: { summary: '{}' },
category: 'Attributes',
},
},
},
};
const Template = (args) => html `
<gov-row
align="${args.align}"
justify="${args.justify}"
gap="${args.gap}"
reverse="${args.reverse}"
classes="${args.classes}"
.styles="${args.styles}"
>
<gov-chip label="UI/UX Design"></gov-chip>
<gov-chip label="Development"></gov-chip>
</gov-row>
`;
export const Row = Template.bind({});
Row.args = {
align: 'start',
justify: 'start',
gap: '10px',
reverse: false,
classes: '',
styles: {},
};
//# sourceMappingURL=gov-row.stories.js.map