更新说明

pull/1/head
yutent 2023-03-14 15:51:21 +08:00
parent efd6e0862d
commit 4463d0bc5e
1 changed files with 15 additions and 48 deletions

View File

@ -1,27 +1,38 @@
## 9号UI组件库的核心 ## 9号UI组件库的核心
### 开发文档 ### 开发文档
[开发文档](https://github.com/9th-js/core/wiki) [开发文档](https://github.com/bd-js/core/wiki)
### 示例 ### 示例
```js ```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 { class Hello extends Component {
static props = { static props = {
count: { count: {
type: Number, type: Number,
default: 0 default: 0,
} attribute: true // 是否显式表现为html属性
},
foo: 0, // 简写
bar: String // 简写
} }
// 若需要支持 scss, 则需要使用 @bd/wcui-cli,预处理。
// 可支持数组
static styles = css` static styles = css`
button { color: #09f; } button { color: #09f; }
span { color: #f30; } span { color: #f30; }
` `
// 支持多个
static styles = [
css`...`,
css`...`
]
render(){ render(){
return html` return html`
<div> <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>
*/
```