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

xy-ui

v1.10.7

Published

a front end cross-framework ui library based on web-components

Downloads

2,929

Readme

xy-ui

NPM version npm npm GitHub stars GitHub stars

xy-ui是一套使用原生Web Components规范开发的跨框架UI组件库。查看文档

github项目地址

xy-ui

更新

  • 1.10.7

    • 修复 xy-textarea 行数rows响应式变化
  • 1.10.6

    • 给 select 指定宽度时,文字会自动省略
  • 1.10.5

    • 修复 xy-datalist 改变时不触发 onchange 事件的问题
  • 1.10.4

    • xy-dialog新增portal属性,可以指定渲染到指定节点
  • 1.10.3

    • xy-slider样式修复
  • 1.10.1

    • disconnectedCallback移除document事件监听
  • 1.10.0

    • 新增xy-datalist数据列表组件
    • 重新独立xy-option
    • xy-checkboxxy-raido键盘触发事件优化

update

特性

  • 跨框架。无论是reactvue还是原生项目均可使用。
  • 组件化。shadow dom真正意义上实现了样式和功能的组件化。
  • 类原生。一个组件就像使用一个div标签一样。
  • 无依赖。纯原生,无需任何预处理器编译。
  • 无障碍。支持键盘访问。

兼容性

现代浏览器。

包括移动端,不支持IE

IE不支持原生customElementswebcomponentsjs可以实现对IE的兼容,不过很多CSS特性仍然无效,所以放弃

安装

  • npm
npm i xy-ui
  • cdn
<script type="module">
    import 'https://unpkg.com/xy-ui';

    import 'https://unpkg.com/[email protected]';//指定版本号
</script>

<!--or-->

<script type="module" src="https://unpkg.com/xy-ui"></script>
  • 直接在github上获取最新文件(推荐)。

目录如下:

.
└── xy-ui
    ├── components //功能组件
    |   ├── xy-icon.js
    |   └── ...
    ├── iconfont //图标库
    |   └── icon.svg
    └── index.js

将整个文件夹放入项目当中(可选择以上几个目录文件即可,其他文件夹均为文档测试)。

<script type="module">
    import './node_modules/xy-ui/index.js'; //推荐
    //如需单独使用,文档中都是单独使用的情况,推荐全部引用,即第一种方式。
    import './node_modules/xy-ui/components/xy-button.js';
</script>

<!--or-->
<script type="module" src="./node_modules/xy-ui/index.js"></script>

<xy-button>button</xy-button>

现代浏览器支持原生import语法,不过需要注意script的类型type="module"

react项目引用

import 'xy-ui';//推荐
//如需单独使用
import 'xy-ui/components/xy-button.js';
ReactDOM.render(<xy-button>button</xy-button>, document.body);

demo

关于react中使用Web Components的注意细节可参考https://react.docschina.org/docs/web-components.html

vue项目引用

import 'xy-ui';//推荐
//如需单独使用
import 'xy-ui/components/xy-button.js';

使用同原生组件类似

你可能已经注意到 Vue 组件非常类似于自定义元素,它是 Web 组件规范的一部分,这是因为 Vue 的组件语法部分参考了该规范。

为了避免歧义,需要将自定义元素忽略掉,可参考官方文档

Vue.config.ignoredElements = [
  'my-custom-web-component',
  'another-web-component',
  // 用一个 `RegExp` 忽略所有“ion-”开头的元素
  // 仅在 2.5+ 支持
  /^ion-/
]

其他事件绑定可自行搜索~

其他

大部分情况下,可以把组件当成普通的html标签,

比如给<xy-button>button</xy-button>添加事件,有以下几种方式

<xy-button onclick="alert(5)">button</xy-button>
btn.onclick = function(){
    alert(5)
}

btn.addEventListener('click',function(){
    alert(5)
})

自定义事件只能通过addEventListener绑定

比如元素的获取,完全符合html规则

<xy-tab>
    <xy-tab-content label="tab1">tab1</xy-tab-content>
    <xy-tab-content label="tab2">tab2</xy-tab-content>
    <xy-tab-content label="tab3" id="tab3">tab3</xy-tab-content>
</xy-tab>
const tab3 = document.getElementById('tab3');
tab3.parentNode;//xy-tab

组件的布尔类型的属性也遵从原生规范(添加和移除属性),比如

<xy-dialog show></xy-dialog> <!-- 显示 -->
<xy-dialog></xy-dialog> <!-- 隐藏 -->
<xy-button loading>button</xy-button> <!-- 加载中 -->
<xy-button>button</xy-button> <!-- 正常 -->

总之,大部分情况下把它当成普通的html标签(不用关注shadow dom的结构)就好了,以前怎么做现在仍然怎么做,只是新增了方法而已。

License

MIT