npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

h-list-ui

v1.0.0

Published

simple javascript list-ui library

Downloads

20

Readme

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/