更新说明
parent
efd6e0862d
commit
4463d0bc5e
63
Readme.md
63
Readme.md
|
@ -1,27 +1,38 @@
|
|||
## 9号UI组件库的核心
|
||||
|
||||
### 开发文档
|
||||
[开发文档](https://github.com/9th-js/core/wiki)
|
||||
[开发文档](https://github.com/bd-js/core/wiki)
|
||||
|
||||
### 示例
|
||||
|
||||
```js
|
||||
import { css, html, Component } from '//jscdn.ink/@ninejs/core/latest/index.js'
|
||||
import { css, html, Component } from '//jscdn.ink/@bd/core/latest/index.js'
|
||||
|
||||
class Hello extends Component {
|
||||
|
||||
static props = {
|
||||
count: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
default: 0,
|
||||
attribute: true // 是否显式表现为html属性
|
||||
},
|
||||
foo: 0, // 简写
|
||||
bar: String // 简写
|
||||
}
|
||||
|
||||
// 若需要支持 scss, 则需要使用 @bd/wcui-cli,预处理。
|
||||
// 可支持数组
|
||||
static styles = css`
|
||||
button { color: #09f; }
|
||||
span { color: #f30; }
|
||||
`
|
||||
|
||||
// 支持多个
|
||||
static styles = [
|
||||
css`...`,
|
||||
css`...`
|
||||
]
|
||||
|
||||
render(){
|
||||
return html`
|
||||
<div>
|
||||
|
@ -49,49 +60,5 @@ customElements.define('wc-hello', Hello)
|
|||
|
||||
```
|
||||
|
||||
若需要支持 scss, 则需要使用构建工具,预处理。
|
||||
|
||||
```js
|
||||
import { css, html, Component } from '@ninejs/core'
|
||||
|
||||
@customElement('wc-hello')
|
||||
class Hello extends Component {
|
||||
|
||||
static props = {
|
||||
count: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
}
|
||||
|
||||
// 这个scss会被解析进来
|
||||
@extendStyle('hello.scss')
|
||||
static styles
|
||||
|
||||
render(){
|
||||
return html`
|
||||
<div>
|
||||
<button @click="${this.increase}">点击我</button>
|
||||
</div>
|
||||
<div>所有点击数为: <span>${this.count}</span></div>
|
||||
`
|
||||
}
|
||||
|
||||
increase(){
|
||||
this.count++
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 这个可以省略
|
||||
// customElements.define('wc-hello', Hello)
|
||||
|
||||
|
||||
/*
|
||||
|
||||
<!-- 在html中,便可以直接使用 -->
|
||||
<wc-hello></wc-hello>
|
||||
|
||||
*/
|
||||
|
||||
```
|
||||
|
|
Loading…
Reference in New Issue