svelte-grid-layout

    1.0.3 • Public • Published

    Svelte Grid Layout

    npm GitHub npm

    Description

    Svelte Grid Layout is a tool that make it easier to create a page template for applications built with Svelte.

    The page templates specify the layout of the page through a set of predetermined rules of how the components of the page should be laid out.

    Why?

    All the nitty gritty details, such as responsive sizing and styling, has already been taken care of by Svelte Grid Layout, and will be automagically generated as long as you provide data for the starting point.

    Therefore, you can focus entirely on the content part of your app, without having to worry about the layout. Once you have the layout that you want, it's easy to reuse and apply the same one to multiple pages.


    Installation

    npm install svelte-grid-layout

    Dependencies

    svelte ^3.44.2


    Import & Use component

    <script>
      import { Grid, Row, Column } from "svelte-grid-layout";
    </script>
    
    <Grid>
      <Row>
        <Column height="1" width="4">
          {your content}
        </Column>
      </Row>
    </Grid>
    

    Props

    Column

    Prop Type Description
    width number Cell (column) width.
    height number Cell (row) height

    Demo

    Link to example


    Future development

    The goal for Svelte Grid Layout is a tool that gives the user a graphical interface to create a page template for applications built with Svelte. This will be possible through arrow-buttons that lets the user add rows or columns and resize individual columns. Other possible upcomming features are: drag and drop, change the spacing between columns and animation for smooth transitions.

    Install

    npm i svelte-grid-layout

    DownloadsWeekly Downloads

    3

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    8 kB

    Total Files

    8

    Last publish

    Collaborators

    • wiviwonderwoman
    • kerstinmarie