Wrapper 包裹容器

简单的一个包裹容器组件,相当于用 div 包含起来,最大的用处是用来配合 css 进行布局。

基本用法

```schema: scope=”body” { “type”: “wrapper”, “body”: “内容”, “className”: “b” }

  1. > 上面例子中的 `"className": "b"` 是为了增加边框,不然看不出来。
  2. ## 动态获取
  3. 直接返回一个对象
  4. ```schema: scope="body"
  5. {
  6. "type": "page",
  7. "data": {
  8. "style": {
  9. "color": "#aaa"
  10. }
  11. },
  12. "body": [
  13. {
  14. "type": "wrapper",
  15. "body": "内容",
  16. "className": "b",
  17. "style": "${style}"
  18. }
  19. ]
  20. }

返回变量

```schema: scope=”body” { “type”: “page”, “data”: { “color”: “#aaa” }, “body”: [ { “type”: “wrapper”, “body”: “内容”, “className”: “b”, “style”: { “color”: “${color}”, “fontSize”: “30px” } } ] }

  1. ## 不同内边距
  2. 通过配置`size`属性,可以调整内边距
  3. ```schema: scope="body"
  4. [
  5. {
  6. "type": "wrapper",
  7. "body": "默认内边距",
  8. "className": "b"
  9. },
  10. {
  11. "type": "divider"
  12. },
  13. {
  14. "type": "wrapper",
  15. "body": "极小的内边距",
  16. "size": "xs",
  17. "className": "b"
  18. },
  19. {
  20. "type": "divider"
  21. },
  22. {
  23. "type": "wrapper",
  24. "body": "小的内边距",
  25. "size": "sm",
  26. "className": "b"
  27. },
  28. {
  29. "type": "divider"
  30. },
  31. {
  32. "type": "wrapper",
  33. "body": "中等的内边距",
  34. "size": "md",
  35. "className": "b"
  36. },
  37. {
  38. "type": "divider"
  39. },
  40. {
  41. "type": "wrapper",
  42. "body": "大的内边距",
  43. "size": "lg",
  44. "className": "b"
  45. },
  46. {
  47. "type": "divider"
  48. },
  49. {
  50. "type": "wrapper",
  51. "body": "无内边距",
  52. "size": "none",
  53. "className": "b"
  54. }
  55. ]

style

1.1.5 版本

wrapper 可以设置 style,当成一个 div 标签来用

属性表

属性名 类型 默认值 说明
type string "wrapper" 指定为 Wrapper 渲染器
className string 外层 Dom 的类名
size string 支持: xssmmdlg
style Object \ string 自定义样式
body SchemaNode 内容容器