样式

amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，也可以用在自定义组件开发中，掌握这些 class, 几乎可以不用写样式。

注意
CSS辅助类样式做了全新的升级，请点击顶部的「样式」查看新版。旧版本可以继续，但将不再更新。

基本使用

例如，下面这个例子，我们内容区渲染了两个按钮，但是可以看到，两个按钮紧贴在一起，并不是很美观，于是我们想添加一定的间隔

```schema: scope=”body” [ { “type”: “button”, “label”: “按钮1”, “actionType”: “dialog”, “dialog”: { “title”: “弹框”, “body”: “Hello World!” } }, { “type”: “button”, “label”: “按钮2”, “actionType”: “dialog”, “dialog”: { “title”: “弹框”, “body”: “Hello World!” } } ]

  2. 1. 通过查阅按钮文档可知，按钮支持 className 配置项，也就是说可以在按钮上添加 CSS 类名；
  3. 2. 再查阅当前页面下面 [外边距部分](#%E5%A4%96%E8%BE%B9%E8%B7%9D) 可知，我们可以添加`m-l`类名实现`margin-left: 15px;`的 CSS 效果
  4. 3. 于是我们在`按钮2`的配置中添加`"className": "m-l"`，就能实现间距效果了
  6. ```schema: scope="body"
  7. [
  8.   {
  9.     "type": "button",
  10.     "label": "按钮1",
  11.     "actionType": "dialog",
  12.     "dialog": {
  13.       "title": "弹框",
  14.       "body": "Hello World!"
  15.     }
  16.   },
  17.   {
  18.     "type": "button",
  19.     "label": "按钮2",
  20.     "className": "m-l",
  21.     "actionType": "dialog",
  22.     "dialog": {
  23.       "title": "弹框",
  24.       "body": "Hello World!"
  25.     }
  26.   }
  27. ]

绝大部分组件都支持各种形式的 CSS 类名自定义，然后搭配该文档中的各种类名可以实现各式各样的样式调整。具体请查阅组件文档；

你可能需要掌握一些基础的 CSS 知识

字体颜色

实际颜色取决于主题，下面示例是默认主题的颜色。

  1. .text-primary {
  2.   color: #7266ba;
  3. }
  5. .text-primary-lt {
  6.   color: #6254b2;
  7. }
  9. .text-primary-lter {
  10.   color: #564aa3;
  11. }
  13. .text-primary-dk {
  14.   color: #6254b2;
  15. }
  17. .text-primary-dker {
  18.   color: #564aa3;
  19. }
  21. .text-info {
  22.   color: #23b7e5;
  23. }
  25. .text-info-lt {
  26.   color: #19a9d5;
  27. }
  29. .text-info-lter {
  30.   color: #1797be;
  31. }
  33. .text-info-dk {
  34.   color: #19a9d5;
  35. }
  37. .text-info-dker {
  38.   color: #1797be;
  39. }
  41. .text-success {
  42.   color: #27c24c;
  43. }
  45. .text-success-lt {
  46.   color: #23ad44;
  47. }
  49. .text-success-lter {
  50.   color: #1e983b;
  51. }
  53. .text-success-dk {
  54.   color: #23ad44;
  55. }
  57. .text-success-dker {
  58.   color: #1e983b;
  59. }
  61. .text-warning {
  62.   color: #fad733;
  63. }
  65. .text-warning-lt {
  66.   color: #f9d21a;
  67. }
  69. .text-warning-lter {
  70.   color: #f4ca06;
  71. }
  73. .text-warning-dk {
  74.   color: #f9d21a;
  75. }
  77. .text-warning-dker {
  78.   color: #f4ca06;
  79. }
  81. .text-danger {
  82.   color: #f05050;
  83. }
  85. .text-danger-lt {
  86.   color: #ee3939;
  87. }
  89. .text-danger-lter {
  90.   color: #ec2121;
  91. }
  93. .text-danger-dk {
  94.   color: #ee3939;
  95. }
  97. .text-danger-dker {
  98.   color: #ec2121;
  99. }
  101. .text-dark {
  102.   color: #3a3f51;
  103. }
  105. .text-dark-lt {
  106.   color: #2f3342;
  107. }
  109. .text-dark-lter {
  110.   color: #252833;
  111. }
  113. .text-dark-dk {
  114.   color: #2f3342;
  115. }
  117. .text-dark-dker {
  118.   color: #252833;
  119. }
  121. .text-white {
  122.   color: #fff;
  123. }
  125. .text-white-lt {
  126.   color: #f2f2f2;
  127. }
  129. .text-white-lter {
  130.   color: #e6e6e6;
  131. }
  133. .text-white-dk {
  134.   color: #f2f2f2;
  135. }
  137. .text-white-dker {
  138.   color: #e6e6e6;
  139. }
  141. .text-black {
  142.   color: #1c2b36;
  143. }
  145. .text-black-lt {
  146.   color: #131e25;
  147. }
  149. .text-black-lter {
  150.   color: #0b1014;
  151. }
  153. .text-black-dk {
  154.   color: #131e25;
  155. }
  157. .text-black-dker {
  158.   color: #0b1014;
  159. }
  161. .text-muted {
  162.   color: var(--text--muted-color);
  163. }
  165. .text-loud {
  166.   color: var(--text--loud-color);
  167. }

图标

amis 集成了 fontawesome，所以关于图标部分，请前往 fontawesome 查看。

布局

水平布局可以考虑用 Bootstrap 的 Grids 或者用 hobx 加 col

  1. <div class="hbox b-a">
  2.   <div class="col wrapper-sm bg-success">Col A</div>
  3.   <div class="col wrapper-sm bg-info">Col B</div>
  4.   <div class="col wrapper-sm bg-danger">Col C</div>
  5. </div>

宽高

  2.   width: 1em;
  3. }
  5. .w-2x {
  6.   width: 2em;
  7. }
  9. .w-3x {
  10.   width: 3em;
  11. }
  13. .w-xxs {
  14.   width: 60px;
  15. }
  17. .h-xxs {
  18.   height: 60px;
  19. }
  21. .w-xs {
  22.   width: 90px;
  23. }
  25. .h-xs {
  26.   height: 90px;
  27. }
  29. .w-ssm {
  30.   width: 120px;
  31. }
  33. .w-sm {
  34.   width: 150px;
  35. }
  37. .h-sm {
  38.   height: 150px;
  39. }
  41. .h-ssm {
  42.   height: 120px;
  43. }
  45. .w {
  46.   width: 200px;
  47. }
  49. .h {
  50.   height: 200px;
  51. }
  53. .w-md {
  54.   width: 240px;
  55. }
  57. .h-md {
  58.   height: 240px;
  59. }
  61. .w-lg {
  62.   width: 280px;
  63. }
  65. .h-lg {
  66.   height: 280px;
  67. }
  69. .w-xl {
  70.   width: 320px;
  71. }
  73. .h-xl {
  74.   height: 320px;
  75. }
  77. .w-xxl {
  78.   width: 360px;
  79. }
  81. .h-xxl {
  82.   height: 360px;
  83. }
  85. .w-xxxl {
  86.   width: 420px;
  87. }
  89. .h-xxxl {
  90.   height: 420px;
  91. }
  93. .w-full {
  94.   width: 100%;
  95. }
  97. .w-auto {
  98.   width: auto;
  99. }
  101. .h-auto {
  102.   height: auto;
  103. }
  105. .h-full {
  106.   height: 100%;
  107. }
  1. <div class="hbox b-a bg-primary">
  2.   <div class="col wrapper-sm b-r w-1x">w-1x</div>
  3.   <div class="col wrapper-sm b-r w-2x">w-2x</div>
  4.   <div class="col wrapper-sm b-r w-3x">w-3x</div>
  5.   <div class="col wrapper-sm b-r w-xxs">w-xxs</div>
  6.   <div class="col wrapper-sm b-r w-xs">w-xs</div>
  7.   <div class="col wrapper-sm b-r w-sm">w-sm</div>
  8.   <div class="col wrapper-sm b-r w">w</div>
  9.   <div class="col wrapper-sm  lter">...</div>
  10. </div>
  11. <div class="hbox b-a bg-primary m-t">
  12.   <div class="col wrapper-sm b-r w-md">w-md</div>
  13.   <div class="col wrapper-sm b-r w-lg">w-lg</div>
  14.   <div class="col wrapper-sm b-r w-xl">w-xl</div>
  15.   <div class="col wrapper-sm lter">...</div>
  16. </div>
  17. <div class="hbox b-a bg-primary m-t">
  18.   <div class="col wrapper-sm b-r w-xxl">w-xxl</div>
  19.   <div class="col wrapper-sm lter">...</div>
  20. </div>

外边距

  1. .m-xxs {
  2.   margin: 2px 4px;
  3. }
  4. .m-xs {
  5.   margin: 5px;
  6. }
  7. .m-sm {
  8.   margin: 10px;
  9. }
  10. .m {
  11.   margin: 15px;
  12. }
  13. .m-md {
  14.   margin: 20px;
  15. }
  16. .m-lg {
  17.   margin: 30px;
  18. }
  19. .m-xl {
  20.   margin: 50px;
  21. }
  22. .m-n {
  23.   margin: 0 !important;
  24. }
  25. .m-l-none {
  26.   margin-left: 0 !important;
  27. }
  28. .m-l-xs {
  29.   margin-left: 5px;
  30. }
  31. .m-l-sm {
  32.   margin-left: 10px;
  33. }
  34. .m-l {
  35.   margin-left: 15px;
  36. }
  37. .m-l-md {
  38.   margin-left: 20px;
  39. }
  40. .m-l-lg {
  41.   margin-left: 30px;
  42. }
  43. .m-l-xl {
  44.   margin-left: 40px;
  45. }
  46. .m-l-xxl {
  47.   margin-left: 50px;
  48. }
  49. .m-l-n-xxs {
  50.   margin-left: -1px;
  51. }
  52. .m-l-n-xs {
  53.   margin-left: -5px;
  54. }
  55. .m-l-n-sm {
  56.   margin-left: -10px;
  57. }
  58. .m-l-n {
  59.   margin-left: -15px;
  60. }
  61. .m-l-n-md {
  62.   margin-left: -20px;
  63. }
  64. .m-l-n-lg {
  65.   margin-left: -30px;
  66. }
  67. .m-l-n-xl {
  68.   margin-left: -40px;
  69. }
  70. .m-l-n-xxl {
  71.   margin-left: -50px;
  72. }
  73. .m-t-none {
  74.   margin-top: 0 !important;
  75. }
  76. .m-t-xxs {
  77.   margin-top: 1px;
  78. }
  79. .m-t-xs {
  80.   margin-top: 5px;
  81. }
  82. .m-t-sm {
  83.   margin-top: 10px;
  84. }
  85. .m-t {
  86.   margin-top: 15px;
  87. }
  88. .m-t-md {
  89.   margin-top: 20px;
  90. }
  91. .m-t-lg {
  92.   margin-top: 30px;
  93. }
  94. .m-t-xl {
  95.   margin-top: 40px;
  96. }
  97. .m-t-xxl {
  98.   margin-top: 50px;
  99. }
  100. .m-t-n-xxs {
  101.   margin-top: -1px;
  102. }
  103. .m-t-n-xs {
  104.   margin-top: -5px;
  105. }
  106. .m-t-n-sm {
  107.   margin-top: -10px;
  108. }
  109. .m-t-n {
  110.   margin-top: -15px;
  111. }
  112. .m-t-n-md {
  113.   margin-top: -20px;
  114. }
  115. .m-t-n-lg {
  116.   margin-top: -30px;
  117. }
  118. .m-t-n-xl {
  119.   margin-top: -40px;
  120. }
  121. .m-t-n-xxl {
  122.   margin-top: -50px;
  123. }
  124. .m-r-none {
  125.   margin-right: 0 !important;
  126. }
  127. .m-r-xxs {
  128.   margin-right: 1px;
  129. }
  130. .m-r-xs {
  131.   margin-right: 5px;
  132. }
  133. .m-r-sm {
  134.   margin-right: 10px;
  135. }
  136. .m-r {
  137.   margin-right: 15px;
  138. }
  139. .m-r-md {
  140.   margin-right: 20px;
  141. }
  142. .m-r-lg {
  143.   margin-right: 30px;
  144. }
  145. .m-r-xl {
  146.   margin-right: 40px;
  147. }
  148. .m-r-xxl {
  149.   margin-right: 50px;
  150. }
  151. .m-r-n-xxs {
  152.   margin-right: -1px;
  153. }
  154. .m-r-n-xs {
  155.   margin-right: -5px;
  156. }
  157. .m-r-n-sm {
  158.   margin-right: -10px;
  159. }
  160. .m-r-n {
  161.   margin-right: -15px;
  162. }
  163. .m-r-n-md {
  164.   margin-right: -20px;
  165. }
  166. .m-r-n-lg {
  167.   margin-right: -30px;
  168. }
  169. .m-r-n-xl {
  170.   margin-right: -40px;
  171. }
  172. .m-r-n-xxl {
  173.   margin-right: -50px;
  174. }
  175. .m-b-none {
  176.   margin-bottom: 0 !important;
  177. }
  178. .m-b-xxs {
  179.   margin-bottom: 1px;
  180. }
  181. .m-b-xs {
  182.   margin-bottom: 5px;
  183. }
  184. .m-b-sm {
  185.   margin-bottom: 10px;
  186. }
  187. .m-b {
  188.   margin-bottom: 15px;
  189. }
  190. .m-b-md {
  191.   margin-bottom: 20px;
  192. }
  193. .m-b-lg {
  194.   margin-bottom: 30px;
  195. }
  196. .m-b-xl {
  197.   margin-bottom: 40px;
  198. }
  199. .m-b-xxl {
  200.   margin-bottom: 50px;
  201. }
  202. .m-b-n-xxs {
  203.   margin-bottom: -1px;
  204. }
  205. .m-b-n-xs {
  206.   margin-bottom: -5px;
  207. }
  208. .m-b-n-sm {
  209.   margin-bottom: -10px;
  210. }
  211. .m-b-n {
  212.   margin-bottom: -15px;
  213. }
  214. .m-b-n-md {
  215.   margin-bottom: -20px;
  216. }
  217. .m-b-n-lg {
  218.   margin-bottom: -30px;
  219. }
  220. .m-b-n-xl {
  221.   margin-bottom: -40px;
  222. }
  223. .m-b-n-xxl {
  224.   margin-bottom: -50px;
  225. }

内边距

  1. .wrapper-xs {
  2.   padding: 5px;
  3. }
  4. .wrapper-sm {
  5.   padding: 10px;
  6. }
  7. .wrapper {
  8.   padding: 15px;
  9. }
  10. .wrapper-md {
  11.   padding: 20px;
  12. }
  13. .wrapper-lg {
  14.   padding: 30px;
  15. }
  16. .wrapper-xl {
  17.   padding: 50px;
  18. }
  19. .padder-xs {
  20.   padding-left: 5px;
  21.   padding-right: 5px;
  22. }
  23. .padder-sm {
  24.   padding-left: 10px;
  25.   padding-right: 10px;
  26. }
  27. .padder-lg {
  28.   padding-left: 30px;
  29.   padding-right: 30px;
  30. }
  31. .padder-md {
  32.   padding-left: 20px;
  33.   padding-right: 20px;
  34. }
  35. .padder {
  36.   padding-left: 15px;
  37.   padding-right: 15px;
  38. }
  39. .padder-v-xs {
  40.   padding-top: 5px;
  41.   padding-bottom: 5px;
  42. }
  43. .padder-v-sm {
  44.   padding-top: 10px;
  45.   padding-bottom: 10px;
  46. }
  47. .padder-v-lg {
  48.   padding-top: 30px;
  49.   padding-bottom: 30px;
  50. }
  51. .padder-v-md {
  52.   padding-top: 20px;
  53.   padding-bottom: 20px;
  54. }
  55. .padder-v {
  56.   padding-top: 15px;
  57.   padding-bottom: 15px;
  58. }
  59. .no-padder {
  60.   padding: 0 !important;
  61. }
  62. .pull-in {
  63.   margin-left: -15px;
  64.   margin-right: -15px;
  65. }
  66. .pull-out {
  67.   margin: -10px -15px;
  68. }

边框

  1. .b {
  2.   border: 1px solid rgba(0, 0, 0, 0.05);
  3. }
  4. .b-a {
  5.   border: 1px solid @border-color;
  6. }
  7. .b-t {
  8.   border-top: 1px solid @border-color;
  9. }
  10. .b-r {
  11.   border-right: 1px solid @border-color;
  12. }
  13. .b-b {
  14.   border-bottom: 1px solid @border-color;
  15. }
  16. .b-l {
  17.   border-left: 1px solid @border-color;
  18. }
  19. .b-light {
  20.   border-color: @brand-light;
  21. }
  22. .b-dark {
  23.   border-color: @brand-dark;
  24. }
  25. .b-black {
  26.   border-color: @brand-dark;
  27. }
  28. .b-primary {
  29.   border-color: @brand-primary;
  30. }
  31. .b-success {
  32.   border-color: @brand-success;
  33. }
  34. .b-info {
  35.   border-color: @brand-info;
  36. }
  37. .b-warning {
  38.   border-color: @brand-warning;
  39. }
  40. .b-danger {
  41.   border-color: @brand-danger;
  42. }
  43. .b-white {
  44.   border-color: #fff;
  45. }
  46. .b-dashed {
  47.   border-style: dashed !important;
  48. }
  49. .b-l-light {
  50.   border-left-color: @brand-light;
  51. }
  52. .b-l-dark {
  53.   border-left-color: @brand-dark;
  54. }
  55. .b-l-black {
  56.   border-left-color: @brand-dark;
  57. }
  58. .b-l-primary {
  59.   border-left-color: @brand-primary;
  60. }
  61. .b-l-success {
  62.   border-left-color: @brand-success;
  63. }
  64. .b-l-info {
  65.   border-left-color: @brand-info;
  66. }
  67. .b-l-warning {
  68.   border-left-color: @brand-warning;
  69. }
  70. .b-l-danger {
  71.   border-left-color: @brand-danger;
  72. }
  73. .b-l-white {
  74.   border-left-color: #fff;
  75. }
  76. .b-l-2x {
  77.   border-left-width: 2px;
  78. }
  79. .b-l-3x {
  80.   border-left-width: 3px;
  81. }
  82. .b-l-4x {
  83.   border-left-width: 4px;
  84. }
  85. .b-l-5x {
  86.   border-left-width: 5px;
  87. }
  88. .b-2x {
  89.   border-width: 2px;
  90. }
  91. .b-3x {
  92.   border-width: 3px;
  93. }
  94. .b-4x {
  95.   border-width: 4px;
  96. }
  97. .b-5x {
  98.   border-width: 5px;
  99. }

圆角

  1. .r {
  2.   border-radius: @border-radius-base @border-radius-base @border-radius-base
  3.     @border-radius-base;
  4. }
  5. .r-2x {
  6.   border-radius: @border-radius-base * 2;
  7. }
  8. .r-3x {
  9.   border-radius: @border-radius-base * 3;
  10. }
  11. .r-l {
  12.   border-radius: @border-radius-base 0 0 @border-radius-base;
  13. }
  14. .r-r {
  15.   border-radius: 0 @border-radius-base @border-radius-base 0;
  16. }
  17. .r-t {
  18.   border-radius: @border-radius-base @border-radius-base 0 0;
  19. }
  20. .r-b {
  21.   border-radius: 0 0 @border-radius-base @border-radius-base;
  22. }

字体相关

  1. .font-normal {
  2.   font-weight: normal;
  3. }
  4. .font-thin {
  5.   font-weight: 300;
  6. }
  7. .font-bold {
  8.   font-weight: 700;
  9. }
  10. .text-3x {
  11.   font-size: 3em;
  12. }
  13. .text-2x {
  14.   font-size: 2em;
  15. }
  16. .text-lg {
  17.   font-size: @font-size-lg;
  18. }
  19. .text-md {
  20.   font-size: @font-size-md;
  21. }
  22. .text-base {
  23.   font-size: @font-size-base;
  24. }
  25. .text-sm {
  26.   font-size: @font-size-sm;
  27. }
  28. .text-xs {
  29.   font-size: @font-size-xs;
  30. }
  31. .text-xxs {
  32.   text-indent: -9999px;
  33. }
  34. .text-ellipsis {
  35.   display: block;
  36.   white-space: nowrap;
  37.   overflow: hidden;
  38.   text-overflow: ellipsis;
  39. }
  40. .text-u-c {
  41.   text-transform: uppercase;
  42. }
  43. .text-l-t {
  44.   text-decoration: line-through;
  45. }
  46. .text-u-l {
  47.   text-decoration: underline;
  48. }
  49. .text-left {
  50.   text-align: left;
  51. }
  52. .text-center {
  53.   text-align: center;
  54. }
  55. .text-right {
  56.   text-align: right;
  57. }
  58. .word-break {
  59.   white-space: normal;
  60.   word-break: break-all;
  61.   word-wrap: break-word;
  62. }
  63. .white-space-pre {
  64.   white-space: pre;
  65. }

定位

  1. .pos-rlt {
  2.   position: relative;
  3. }
  4. .pos-stc {
  5.   position: static !important;
  6. }
  7. .pos-abt {
  8.   position: absolute;
  9. }
  10. .pos-fix {
  11.   position: fixed;
  12. }

背景

  1. <div class="hbox b-a bg-light">
  2.   <div class="col wrapper-sm b-r bg-white">bg-white</div>
  3.   <div class="col wrapper-sm b-r bg-dark">bg-dark</div>
  4.   <div class="col wrapper-sm b-r bg-info">bg-info</div>
  5.   <div class="col wrapper-sm b-r bg-success">bg-success</div>
  6.   <div class="col wrapper-sm b-r bg-warning">bg-warning</div>
  7.   <div class="col wrapper-sm b-r bg-danger">bg-danger</div>
  8.   <div class="col wrapper-sm bg-primary">bg-primary</div>
  9. </div>

其他

  1. .show {
  2.   visibility: visible;
  3. }
  4. .line {
  5.   width: 100%;
  6.   height: 2px;
  7.   margin: 10px 0;
  8.   font-size: 0;
  9.   overflow: hidden;
  10.   background-color: transparent;
  11.   border-width: 0;
  12.   border-top: 1px solid @border-color;
  13. }
  14. .line-xs {
  15.   margin: 0;
  16. }
  17. .line-lg {
  18.   margin-top: 15px;
  19.   margin-bottom: 15px;
  20. }
  21. .line-dashed {
  22.   border-style: dashed;
  23.   background: transparent;
  24. }
  25. .no-line {
  26.   border-width: 0;
  27. }
  28. .no-border,
  29. .no-borders {
  30.   border-color: transparent;
  31.   border-width: 0;
  32. }
  33. .no-radius {
  34.   border-radius: 0;
  35. }
  36. .block {
  37.   display: block;
  38. }
  39. .block.hide {
  40.   display: none;
  41. }
  42. .inline {
  43.   display: inline-block !important;
  44. }
  45. .none {
  46.   display: none;
  47. }
  48. .pull-left {
  49.   float: left;
  50. }
  51. .pull-right {
  52.   float: right;
  53. }
  54. .pull-none {
  55.   float: none;
  56. }
  57. .rounded {
  58.   border-radius: 500px;
  59. }
  60. .clear {
  61.   display: block;
  62.   overflow: hidden;
  63. }
  64. .no-bg {
  65.   background-color: transparent;
  66.   color: inherit;
  67. }
  68. .no-select {
  69.   -webkit-touch-callout: none;
  70.   -webkit-user-select: none;
  71.   -khtml-user-select: none;
  72.   -moz-user-select: none;
  73.   -ms-user-select: none;
  74.   user-select: none;
  75. }