Legde framework is a documentation as code practises framework.
demo page: https://devops.phodal.com/helper
online editor: https://devops.phodal.com/helper
```process-step
- step1
- demo
- kanban
```
- Chart
- echarts. Echarts chart.
- chart. Echarts bar chart.
- mindmap. Markdown List to mindmap.
- radar. Markdown List to radar chart.
- tech radar. Markdown list to tech radar chart.
- pie。Pie chart
- quadrant。quadrant chart
- pyramid。pyramid chart
- graphviz。dot to graph
- process visualization
- process-table。process chart
- process-step。process chart 2
- process-card。card process chart
- dev-process。process with logo
- step-line。title only line chart
- table-step。with arrow table chart
- checklist。checklists
- mermaid。use mermaid as visual tools
- toolset。use toolset components to extends
- slider
- line-chart
- pipeline。ci pipeline
- maturity。check, rating with radrar for maturity
```toolset
- 用户体验
- 时间
- 成本
- 安全
- 范围
config: {"type": "slider"}
```
- import styles
<link rel="stylesheet" href="https://theme.ledge.ink/styles.css">
- import code
<div id="ledge-content"></div> <script> var content = document.getElementById('ledge-content'); var tile = document.createElement('ledge-theme'); var text = "{{ page.content | uri_escape }}" tile.setAttribute('content', decodeURIComponent(text)); content.appendChild(tile); </script>
- import script
<script src="https://theme.ledge.ink/runtime-es5.js"></script> <script src="https://theme.ledge.ink/polyfills-es5.js"></script> <script src="https://theme.ledge.ink/main-es5.js"></script>
1.install: yarn add @ledge-framework/render
2.import module
import { LedgeRenderModule } from '@ledge-framework/render';
@NgModule({
imports: [
...
LedgeRenderModule,
]
...
})
- import styles
@import "~@ledge-framework/render/prebuild-theme/index.css";
or import in angular.json
4.use it
<ledge-render [content]="content"></ledge-render>
@ 2020 LiuuY && Phodal Huang. This code is distributed under the MPL license. See LICENSE in this directory.