Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
wbc-ui
Advanced tools
Readme
wbc-ui
是一套使用原生Web Components
规范开发的跨框架 UI 组件库。查看文档
react
、vue
还是原生项目均可使用。shadow dom
真正意义上实现了样式和功能的组件化。div
标签一样。现代浏览器。
包括移动端,不支持IE
。
IE
不支持原生customElements
,webcomponentsjs可以实现对IE
的兼容,不过很多CSS
特性仍然无效,所以放弃
npm i wbc-ui
<script type="module">
import 'https://unpkg.com/wbc-ui'
import 'https://unpkg.com/wbc-ui@0.0.3' //指定版本号
</script>
<!--or-->
<script type="module" src="https://unpkg.com/wbc-ui"></script>
github
上获取最新文件(推荐)。目录如下:
.
└── wbc-ui
├── components //功能组件
| ├── c-icon.js
| └── ...
├── iconfont //图标库
| └── icon.svg
└── index.js
将整个文件夹放入项目当中(可选择以上几个目录文件即可,其他文件夹均为文档测试)。
<script type="module">
import './node_modules/wbc-ui/index.js' //推荐
//如需单独使用,文档中都是单独使用的情况,推荐全部引用,即第一种方式。
import './node_modules/wbc-ui/components/c-button.js'
</script>
<!--or-->
<script type="module" src="./node_modules/wbc-ui/index.js"></script>
<c-button>button</c-button>
现代浏览器支持原生
import
语法,不过需要注意script
的类型type="module"
。
import 'wbc-ui' //推荐
//如需单独使用
import 'wbc-ui/components/c-button.js'
ReactDOM.render(<c-button>button</c-button>, document.body)
关于
react
中使用Web Components
的注意细节可参考https://react.docschina.org/docs/web-components.html
import 'wbc-ui' //推荐
//如需单独使用
import 'wbc-ui/components/c-button.js'
使用同原生组件类似
你可能已经注意到 Vue
组件非常类似于自定义元素,它是 Web 组件规范的一部分,这是因为 Vue
的组件语法部分参考了该规范。
为了避免歧义,需要将自定义元素忽略掉,可参考官方文档
Vue.config.ignoredElements = [
'my-custom-web-component',
'another-web-component',
// 用一个 `RegExp` 忽略所有“ion-”开头的元素
// 仅在 2.5+ 支持
/^ion-/,
]
其他事件绑定可自行搜索~
大部分情况下,可以把组件当成普通的html
标签,
比如给<c-button>button</c-button>
添加事件,有以下几种方式
<c-button onclick="alert(5)">button</c-button>
btn.onclick = function () {
alert(5)
}
btn.addEventListener('click', function () {
alert(5)
})
自定义事件只能通过
addEventListener
绑定
比如元素的获取,完全符合html
规则
<c-tab>
<c-tab-content label="tab1">tab1</c-tab-content>
<c-tab-content label="tab2">tab2</c-tab-content>
<c-tab-content label="tab3" id="tab3">tab3</c-tab-content>
</c-tab>
const tab3 = document.getElementById('tab3')
tab3.parentNode //c-tab
组件的布尔类型的属性也遵从原生规范(添加和移除属性),比如
<c-dialog show></c-dialog>
<!-- 显示 -->
<c-dialog></c-dialog>
<!-- 隐藏 -->
<c-button loading>button</c-button>
<!-- 加载中 -->
<c-button>button</c-button>
<!-- 正常 -->
总之,大部分情况下把它当成普通的html
标签(不用关注 shadow dom 的结构)就好了,以前怎么做现在仍然怎么做,只是新增了方法而已。
FAQs
a front end cross-framework ui library based on web-components
The npm package wbc-ui receives a total of 16 weekly downloads. As such, wbc-ui popularity was classified as not popular.
We found that wbc-ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.