h-list-ui

v1.0.0

Published

2 years ago

simple javascript list-ui library

Downloads

0High
0Medium
0Low

htmlhead

list ui keypress

H-list-ui

Getting Started

<head> tag안에 아래의 jsDelivr CDN을 통해서 만들어진 코드를 추가해서 사용해주세요.

<script src="https://cdn.jsdelivr.net/gh/HTMLhead/H-list-ui/dist/listUi.min.js"></script>

혹은 다운로드받아서 '/{압축해제한 폴더}/dist/listUi.min.js'를 script태그로 받아사용해 주세요.

<script src="{folder}/dist/listUi.min.js"></script>

HTML

list-ui를 넣고싶은 곳에 HTML Tag를 한 줄 추가 합니다.

<div id="h-list"></div>

이 후 자바스크립트 파일에 아래와 같이 사용합니다. -require옵션이 붙은 객체는 필수로 작성 해야하는 option입니다.

Type-A

listUi.createList({
  type: "typeA", //typeA - carousel-list-UI를 뜻합니다. -require
  domElement: "#h-list", // 아까 작성한 html의 id값
  data: {
    // -require
    titleArr: titleArray, // 넣고싶은 title들을 모아놓은 배열
    descriptionArr: descArray, // 넣고싶은 description을 모아놓은 배열
    linkArr: linkArray, // 넣고싶은 link를 모아놓은 배열
    thumbnailArr: thumbnailArray, // 넣고싶은 thumbnail을 모아놓은 배열
    // 배열의 길이는 모두 같아야 합니다.
  },
  style: {
    // -require
    container: {
      // -require
      width: "500", //container의 가로길이를 px단위로 설정할 수 있습니다.
      height: "200", //container의 높이를 px단위로 설정할 수 있습니다.
    },
    content: {
      // -require
      width: "150", //content의 가로길이를 px단위로 설정할 수 있습니다.
      height: "200", // content의 높이를 px단위로 설정할 수 있습니다.
    },
    title: {
      // -require
      fontSize: "0.8rem", //title의 fontSize를 설정할 수 있습니다.
      bold: true, // title에 bold옵션을 줄 수 있습니다.
    },
    description: {
      // -require
      fontSize: "0.3rem", // description의 fontSize를 설정할 수 있습니다.
    },
    border: {
      size: "1", //border의 사이즈를 변경할 수 있습니다.
      color: "#000", //border의 색상을 변경할 수 있습니다.
    },
    selector: {
      // -require
      color: "#008000", // selector의 색상을 정해줄 수 있습니다.
      opacity: "0.3", // selector의 opacity를 결정할 수 있습니다.
    },
  },
});

Type-B

listUi.createList({
  type: "typeB", // typeB - grid-list-ui를 뜻합니다. -require
  domElement: "#h-list-grid", // html파일에 작성한 grid-list-ui를 넣고싶은 곳의 id를 입력합니다.
  data: {
    // -require
    titleArr: titleArray, // 넣고싶은 title들을 모아놓은 배열
    descriptionArr: descArray, // 넣고싶은 description을 모아놓은 배열
    linkArr: linkArray, // 넣고싶은 link를 모아놓은 배열
    thumbnailArr: thumbnailArray, // 넣고싶은 thumbnail을 모아놓은 배열
    // 배열의 길이는 모두 같아야 합니다.
  },
  style: {
    container: {
      width: "auto", // container의 가로길이를 px단위로 설정할 수 있습니다. auto로 작성하면 자동적으로 column값을 반영하여 설정됩니다.
      height: "500", // container의 높이를 px단위로 설정할 수 있습니다.
      column: "5", // container가 가질 column값을 의미합니다.
    },
    content: {
      // -require
      width: "150", // content의 가로길이를 px단위로 설정할 수 있습니다.
      height: "200", // content의 높이를 px단위로 설정할 수 있습니다.
    },
    title: {
      // -require
      fontSize: "0.8rem", //title의 fontSize를 설정할 수 있습니다.
      bold: true, //title의 bold옵션을 설정할 수 있습니다.
    },
    description: {
      // -require
      fontSize: "0.3rem", // description의 fontSize를 설정할 수 있습니다.
    },
    border: {
      size: "1", //border의 사이즈를 변경할 수 있습니다.
      color: "#000", //border의 색상을 변경할 수 있습니다.
    },
    selector: {
      // -require
      color: "#008000", // selector의 색상을 정해줄 수 있습니다.
      opacity: "0.3", // selector의 opacity를 결정할 수 있습니다.
    },
  },
});

데모페이지 : https://htmlhead.github.io/H-list-ui/

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

H-list-ui

Getting Started

HTML

Type-A

Type-B