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

nodomui

v0.0.1-beta1

Published

nodomui是基于nodom3.0的一套为开发者、设计者和产品经理准备的前端组件库。

Downloads

0

Readme

nodomui是基于nodom3.0的一套为开发者、设计者和产品经理准备的前端组件库。

源码

gitee:https://gitee.com/weblabsw/nodomuidev.git

npm 安装及编译

  1. 安装依赖包后,安装nodom3,在命令行执行:
npm i
npm install nodom3
  1. 开始编译,生成nodomui.js及相关文件,在命令行执行:

生成nodomui.*.js文件

npm run build

生成nodom.css文件

npm run sass

文件结构

  1. 组件源码目录:./plugins

  2. 组件样式远嘛目录:./sass

编译js文件目录:

  • 开发环境:./dist/nodomui.js
  • 生产环境:./dist/nodomui.min.js

编译css文件目录:

  • 开发环境./example/css/nodomui.css
  • 生产环境./example/css/nodomui.min.css

实例所在目录:./examples,其中html文件展示组件效果及属性方法介绍,具体实现方式参考其子目录./app的组件名文件夹,example入口文件在 ./examples/index.html

版本

版本信息参考版本信息

引入

引入完整的nodomui.js,使用ES Module实现模块化,此外还需引入组件相关css文件nodomui.css,使用方式如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>nodomui example - grid usage</title>
    <link rel="stylesheet" type="text/css" href="css/nodomui.css" />
</head>
<body>
</body>
<script type='module'>
    import{Nodom,Module} from '/dist/nodomui.js'
    class gridModule extends Module{
      //your code
    }	
    Nodom.app(gridModule);
</script>
</html>

简单介绍

注意:建议拥有html,css及js基础,此外需要了解一定的nodom相关知识。

接下来,你可以通过标签的形式使用nodomui的组件,如:<ui-button />来使用按钮组件。nodomui的其他组件的使用,也都是通过使用ui开头的标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>nodomui example - button usage</title>
    <link rel="stylesheet" type="text/css" href="css/nodomui.css" />
</head>
<body>
    <div></div>
</body>
<script type='module'>
    import{Nodom,Module} from '/dist/nodomui.js'
    class buttonModule extends Module {
        template(props) {
            return `
                <div>
                    <ui-button size="small"  title='small' /> 
                    <ui-button size="normal"  title='normal' />
                    <ui-button size="large"  title='large' />
                </div>
            `;
        }
    }
    Nodom.app(buttonModule,'div');
</script>
</html>

开始使用

至此,一个基于nodom和 nodomui 的开发环境已经搭建完毕,现在就可以编写代码了。各个组件的使用方法及相关属性,请运行并参阅说明文档--./examples/index.html

注意:运行'.example'中的html文件,需在live-server模式下。