vue-link-grid

vue-link-grid

I don't know about you, but I very regularly find that I need to display a list of links, and usually the nicest way is in a grid, maybe with icons. So here's a vue component that does just that. It's simple, but saves on time and duplication.

You can either use a pre-built theme, or pass your CSS/SCSS styles in. By default, it's fully responsive, and touch-screen enabled.

Usage

You know the drill, install yarn add vue-link-grid And then import: import { TileSection, Tile } from 'vue-link-grid';

You can either use Tile, or TileSection which is a group of tiles.

<TileSection
    :tileSectionTitle="mySectionTitle"
    :tileSectionSubTitle="mySectionSubTitle"
    :tiles = "tilesArray"
    theme="material"
    :styles="myStyles"
/>

<Tile
    v-for="tile in this.tiles"
    :key="tile.id"
    :name="tile.name"
    :description="tile.description"
    :url="tile.url"
    :icon="tile.icon"
/>

TileSection Configuration Options

• tileSectionTitle: String, Title of section
• tileSectionSubTitle: String, subtitle of section
• tiles: Array, array of tile objects. See below for the structure
• theme: String, optional name of prebuilt theme. material, material-dark...
• styles: Object, optional object containing JavaScript CSS style overides.

Tile Configuration Options

• name: String, the title of a given tile
• description: String optional, the subtitle of a given tile
• url: String, optional, the path of tile link on click
• icon: String optional, the path to an image to be used

The tile data used by TileSection needs to be structured following for format below. description, url and icon are optional

"tiles": [
    {
        "id": "0",
        "name": "Tile One",
        "description": "Description of first tile",
        "url": "https://google.com",
        "icon": "https://via.placeholder.com/100/E8117F"
    },
    {
        "id": "1",
        "name": "Tile Two",
        "description": "Lorem ipsum dolar",
        "url": "https://bbc.co.uk",
        "icon": "https://via.placeholder.com/100x100"
    },
    {
        "id": "2",
        "name": "Tile Three",
        "description": "Hello World.",
        "url": "https://google.com",
        "icon": ""
    }
]

Custom styles

When you add in your custom styles, you can use any of the following classes to reference different parts of a TileSection or Tile

/* The specified tile section */
.tile-section.NAME-OF-THEME-theme{

    /* Heading and sub-heading of tile section */
    header.tile-section-header{

        h2.tile-section-title{

        }
        span.tile-section-sub-title{

        }
    }

    /* Wrapper for the tiles */
    .tile-wraper{
        a.tile{
            /* Image/ icon within a tile */
            img.tile-icon{

            }
            /* Tile name, and description text */
            .tile-texts{
                .tile-name{

                }
                .tile-description{

                }
            }
        }
    }
}

Contributing

It'd be really cool if you'd like to contribute, either to add a feature or theme, or to fix or improve something - pull requests are always very welcome.

Running locally

• Clone: git clone https://github.com/Lissy93/vue-link-grid.git && cd vue-link-grid
• Project setup: yarn install
• Compiles and hot-reloads for development: yarn run serve
• Compiles and minifies for production: yarn run build
• Lints and fixes files: yarn run lint
• Run the end-to-end tests: yarn run test:e2e

Creating a new theme

To add a new themeL

• Just add a new stylesheet into src/styles/, with the -theme.scss prefix
• There is a theme template in ./src/styles/template-theme.scss
• Then import it into src/styles/index.scss. (e.g. @import '../styles/hello-theme.scss';)
• Use your theme, by adding theme="hello" to your instance of TileSection component

License

Licensed under MIT, (C) Alicia Sykes 2018. Read full License.