✨ Add tips render
This commit is contained in:
parent
5d11c89f95
commit
8dbb28ad88
|
@ -0,0 +1,27 @@
|
|||
# Tips组件
|
||||
|
||||
使用`tips:[type]`来启用,type支持`info`, `success`, `danger`, `warn`四种类型
|
||||
|
||||
```
|
||||
tips:info
|
||||
|
||||
Here is success
|
||||
|
||||
---
|
||||
|
||||
tips:success
|
||||
|
||||
Here is success
|
||||
|
||||
---
|
||||
|
||||
tips:danger
|
||||
|
||||
Here is danger
|
||||
|
||||
---
|
||||
|
||||
tips:warn
|
||||
|
||||
Here is Warning
|
||||
```
|
|
@ -0,0 +1 @@
|
|||
export const RENDER_CLASS = "halo-render"
|
19
src/index.ts
19
src/index.ts
|
@ -1,3 +1,20 @@
|
|||
import "./less/tips.less"
|
||||
import "./less/render.less"
|
||||
import {RENDER_CLASS} from "./constant";
|
||||
|
||||
export const haloRender = (src: string): string => {
|
||||
return `<h2>${src.trim()}</h2>`
|
||||
src = src.trim()
|
||||
const lines = src.split("\n");
|
||||
let html: string = ""
|
||||
const type = lines[0]
|
||||
if (type.startsWith("tips")) {
|
||||
html = `<div class="${RENDER_CLASS} tips ${type.replace(":", "-")}">`
|
||||
lines.forEach((line: string, index: number) => {
|
||||
if (index === 0) return
|
||||
if (line) html += `<div>${line}</div>`
|
||||
})
|
||||
html += "</div>"
|
||||
return html
|
||||
}
|
||||
return "<p>Working</p>"
|
||||
}
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
.halo-render {
|
||||
margin: 5px;
|
||||
}
|
|
@ -0,0 +1,44 @@
|
|||
@border-width: 4px;
|
||||
@border-type: solid;
|
||||
// Warning
|
||||
@warn-color: darkorange;
|
||||
@warn-bg-color: lightyellow;
|
||||
// DANGER
|
||||
@danger-color: darkred;
|
||||
@danger-bg-color: lightpink;
|
||||
// Success
|
||||
@success-color: darkgreen;
|
||||
@success-bg: lightgreen;
|
||||
// Info
|
||||
@info-color: #0052d9;
|
||||
@info-bg: lightblue;
|
||||
|
||||
.tips {
|
||||
padding: 5px 10px;
|
||||
border-left-style: @border-type;
|
||||
border-left-width: @border-width;
|
||||
|
||||
&&-warn {
|
||||
background-color: @warn-bg-color;
|
||||
color: @warn-color;
|
||||
border-left-color: @warn-color;
|
||||
}
|
||||
|
||||
&&-danger {
|
||||
background-color: @danger-bg-color;
|
||||
color: @danger-color;
|
||||
border-left-color: @danger-color;
|
||||
}
|
||||
|
||||
&&-success {
|
||||
background-color: @success-bg;
|
||||
color: @success-color;
|
||||
border-left-color: @success-color;
|
||||
}
|
||||
|
||||
&&-info {
|
||||
background-color: @info-bg;
|
||||
color: @info-color;
|
||||
border-left-color: @info-color;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue