/* This file is part of GNU Taler (C) 2022 Taler Systems S.A. GNU Taler is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3, or (at your option) any later version. GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see */ /** * * @author Sebastian Javier Marchano (sebasjm) */ import { Grid } from "./Grid.js"; import { Fragment, h, VNode } from "preact"; export default { title: "mui/grid", component: Grid, }; function Item({ children }: any): VNode { return (
{children}
); } function Wrapper({ children }: any): VNode { return (
{children}
); } export const BasicExample = (): VNode => ( xs=8 xs=4 xs=4 xs=8 xs=6 md=8 xs=6 md=4 xs=6 md=4 xs=6 md=8 ); export const Responsive12ColumnsSize = (): VNode => (

Item size is responsive: xs=6 sm=4 md=2

{Array.from(Array(6)).map((_, index) => ( item {index} ))}

Item size is fixed

{Array.from(Array(6)).map((_, index) => ( item {index} ))}
); export const Responsive12Spacing = (): VNode => (

Item space is responsive: xs=1 sm=2 md=3

{Array.from(Array(6)).map((_, index) => ( item {index} ))}

Item space is fixed

{Array.from(Array(6)).map((_, index) => ( item {index} ))}

Item row space is responsive: xs=6 sm=4 md=1

{Array.from(Array(6)).map((_, index) => ( item {index} ))}

Item col space is responsive: xs=6 sm=3 md=1

{Array.from(Array(6)).map((_, index) => ( item {index} ))}
); export const ResponsiveAuthWidth = (): VNode => ( item 1 item 2 short item 3 with long text item 4 ); export const Example = (): VNode => (

Item row space is responsive: xs=6 sm=4 md=1

{Array.from(Array(6)).map((_, index) => ( item {index} ))}
);