From b08f1be56210fbbc71f3f268d8ba203d73d2c407 Mon Sep 17 00:00:00 2001 From: liaoxuezhi <2betop.cn@gmail.com> Date: Mon, 30 Nov 2020 00:37:09 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/concepts/style.md | 13 ++- docs/css-utilities/index.md | 108 ++++++++++++++++++ examples/components/App.tsx | 16 +++ examples/components/CssDocs.tsx | 63 ++++++++++ examples/doc.css | 4 +- examples/style.scss | 6 +- fis-conf.js | 8 +- mock/server.conf | 6 +- package.json | 2 +- scripts/code-md-parser.js | 11 ++ scss/_utilities.scss | 6 +- scss/themes/_common.scss | 7 +- .../background/_background-color.scss | 25 +++- scss/utilities/border/_border-color.scss | 1 + scss/utilities/border/_border-radius.scss | 33 +----- scss/utilities/border/_border-width.scss | 1 + scss/utilities/effect/_box-shadow.scss | 1 + scss/utilities/effect/_opacity.scss | 1 + scss/utilities/spacing/_margin.scss | 14 +++ scss/utilities/spacing/_padding.scss | 1 + scss/utilities/typography/_text-color.scss | 1 + 21 files changed, 268 insertions(+), 60 deletions(-) create mode 100644 docs/css-utilities/index.md create mode 100644 examples/components/CssDocs.tsx create mode 100644 scripts/code-md-parser.js diff --git a/docs/concepts/style.md b/docs/concepts/style.md index a916563d2..d98910ddc 100755 --- a/docs/concepts/style.md +++ b/docs/concepts/style.md @@ -10,6 +10,11 @@ order: 18 amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，也可以用在自定义组件开发中，掌握这些 class, 几乎可以不用写样式。 +
+
注意
+
CSS辅助类样式做了全新的升级，请前往新版样式查看使用文档。旧版本可以继续，但将不再做迭代更新。
+
+ ## 基本使用 例如，下面这个例子，我们内容区渲染了两个按钮，但是可以看到，两个按钮紧贴在一起，并不是很美观，于是我们想添加一定的间隔 @@ -17,7 +22,7 @@ amis 中有大量的功能类 class 可以使用，即可以用在 schema 中， ```schema:height="100" scope="body" [ { - "type": "action", + "type": "button", "label": "按钮1", "actionType": "dialog", "dialog": { @@ -26,7 +31,7 @@ amis 中有大量的功能类 class 可以使用，即可以用在 schema 中， } }, { - "type": "action", + "type": "button", "label": "按钮2", "actionType": "dialog", "dialog": { @@ -44,7 +49,7 @@ amis 中有大量的功能类 class 可以使用，即可以用在 schema 中， ```schema:height="100" scope="body" [ { - "type": "action", + "type": "button", "label": "按钮1", "actionType": "dialog", "dialog": { @@ -53,7 +58,7 @@ amis 中有大量的功能类 class 可以使用，即可以用在 schema 中， } }, { - "type": "action", + "type": "button", "label": "按钮2", "className": "m-l", "actionType": "dialog", diff --git a/docs/css-utilities/index.md b/docs/css-utilities/index.md new file mode 100644 index 000000000..c019b9e17 --- /dev/null +++ b/docs/css-utilities/index.md @@ -0,0 +1,108 @@ +--- +title: 样式 +--- + +amis 参考 [tailwindcss](https://tailwindcss.com/) 加入了大量的帮助类 css，掌握这些用法，完全不用手写 css。 + +这个文件大概有 300K 左右，所以并没有和主题文件合并在一起，用户可以选择性加载。 + +``` + +``` + +## 基本使用 + +例如，下面这个例子，我们内容区渲染了两个按钮，但是可以看到，两个按钮紧贴在一起，并不是很美观，于是我们想添加一定的间隔 + +```schema:height="100" scope="body" +[ + { + "type": "button", + "label": "按钮1", + "actionType": "dialog", + "dialog": { + "title": "弹框", + "body": "Hello World!" + } + }, + { + "type": "button", + "label": "按钮2", + "actionType": "dialog", + "dialog": { + "title": "弹框", + "body": "Hello World!" + } + } +] +``` + +1. 通过查阅按钮文档可知，按钮支持 className 配置项，也就是说可以在按钮上添加 CSS 类名； +2. 再查阅样式相关文档，我们可以添加`m-l`类名实现`margin-left: 15px;`的 CSS 效果 +3. 于是我们在`按钮2`的配置中添加`"className": "m-l"`，就能实现间距效果了 + +```schema:height="100" scope="body" +[ + { + "type": "button", + "label": "按钮1", + "actionType": "dialog", + "dialog": { + "title": "弹框", + "body": "Hello World!" + } + }, + { + "type": "button", + "label": "按钮2", + "className": "m-l", + "actionType": "dialog", + "dialog": { + "title": "弹框", + "body": "Hello World!" + } + } +] +``` + +除了按钮提供的默认样式外，还可以自己自定义比如。 + +```schema:height="100" scope="body" +[ + { + "type": "button", + "label": "按钮1", + "actionType": "dialog", + "className": "border-pink-700 shadow-md text-light bg-pink-500 hover:bg-pink-600 hover:text-light hover:border-pink-800", + "dialog": { + "title": "弹框", + "body": "Hello World!" + } + }, + + { + "type": "button", + "label": "按钮2", + "actionType": "dialog", + "className": "m-l-xs border-purple-700 shadow-md text-light bg-purple-500 hover:bg-purple-600 hover:text-light hover:border-purple-800", + "dialog": { + "title": "弹框", + "body": "Hello World!" + } + } +] +``` + +绝大部分组件都支持各种形式的 CSS 类名自定义，然后搭配该文档中的各种类名可以实现各式各样的样式调整。具体请查阅组件文档； + +
+
+
+ +
+
+
ChitChat
+

You have a new message!

+
+
+
diff --git a/examples/components/App.tsx b/examples/components/App.tsx index e1bc569fe..89d0a2508 100644 --- a/examples/components/App.tsx +++ b/examples/components/App.tsx @@ -24,6 +24,8 @@ import Select from '../../src/components/Select'; import DocSearch from './DocSearch'; import Doc, {docs} from './Doc'; import Example, {examples} from './Example'; +import CssDocs, {cssDocs} from './CssDocs'; +import CSSDocs from './CssDocs'; let ExamplePathPrefix = '/examples'; let DocPathPrefix = '/docs'; @@ -35,6 +37,10 @@ if (process.env.NODE_ENV === 'production') { ContextPath = '/amis'; } +export function getContextPath() { + return ContextPath; +} + const themes = [ { label: '默认主题', @@ -225,6 +231,9 @@ export class App extends React.PureComponent { 示例 + + 样式 + + {navigations2route(DocPathPrefix, docs)} @@ -475,6 +488,9 @@ export default function entry({pathPrefix}) { {navigations2route(ExamplePathPrefix, examples)} + + {navigations2route(ExamplePathPrefix, cssDocs)} + diff --git a/examples/components/CssDocs.tsx b/examples/components/CssDocs.tsx new file mode 100644 index 000000000..4230b43e8 --- /dev/null +++ b/examples/components/CssDocs.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import makeMarkdownRenderer from './MdRenderer'; + +export const cssDocs = [ + { + label: '📌 开始', + children: [ + { + label: '自定义样式', + path: '/style/index', + getComponent: (location: any, cb: any) => + (require as any)( + ['../../docs/css-utilities/index.md'], + (doc: any) => { + cb(null, makeMarkdownRenderer(doc)); + } + ) + } + ] + }, + + { + // prefix: ({classnames: cx}) =>
  • , + children: [ + { + label: 'CSS', + path: '/style/css', + getComponent: (location: any, cb: any) => + (require as any)( + ['../../scss/utilities/background/_background-color.scss'], + (doc: any) => { + cb(null, makeMarkdownRenderer(doc)); + } + ) + } + ] + } +]; + +export default class CSSDocs extends React.PureComponent { + componentDidMount() { + this.props.setNavigations(cssDocs); + } + + componentDidUpdate() { + this.props.setNavigations(cssDocs); + } + + render() { + return ( + <> + {React.cloneElement(this.props.children as any, { + ...(this.props.children as any).props, + theme: this.props.theme, + classPrefix: this.props.classPrefix, + locale: this.props.locale, + viewMode: this.props.viewMode, + offScreen: this.props.offScreen + })} + + ); + } +} diff --git a/examples/doc.css b/examples/doc.css index d82974bc2..459c3401f 100644 --- a/examples/doc.css +++ b/examples/doc.css @@ -110,7 +110,7 @@ sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; } -.markdown-body a:not(.btn) { +/* .markdown-body a:not(.btn) { color: #4078c0; text-decoration: none; } @@ -119,7 +119,7 @@ .markdown-body a:active:not(.btn) { color: #4078c0; text-decoration: underline; -} +} */ .markdown-body hr { height: 0; diff --git a/examples/style.scss b/examples/style.scss index a7f1bf946..5fffb0142 100644 --- a/examples/style.scss +++ b/examples/style.scss @@ -13,9 +13,9 @@ body { } } -a { - text-decoration: none !important; -} +// a { +// text-decoration: none !important; +// } .page-play, .page-edit { diff --git a/fis-conf.js b/fis-conf.js index 7d81fbb6e..a6e2a6af3 100644 --- a/fis-conf.js +++ b/fis-conf.js @@ -5,6 +5,7 @@ const path = require('path'); const fs = require('fs'); const package = require('./package.json'); const parserMarkdown = require('./scripts/md-parser'); +const parserCodeMarkdown = require('./scripts/code-md-parser'); fis.get('project.ignore').push('public/**', 'npm/**', 'gh-pages/**'); // 配置只编译哪些文件。 @@ -31,7 +32,8 @@ Resource.extend({ fis.set('project.files', [ 'schema.json', - 'scss/**.scss', + '/scss/utilities.scss', + '/scss/themes/*.scss', '/examples/*.html', '/examples/*.tpl', '/examples/static/*.png', @@ -81,7 +83,9 @@ fis.match('/src/icons/**.svg', { }); fis.match('_*.scss', { - release: false + parser: parserCodeMarkdown, + isMod: true, + rExt: '.js' }); fis.match('/node_modules/**.js', { diff --git a/mock/server.conf b/mock/server.conf index 2beb9914a..2f8e30d7d 100644 --- a/mock/server.conf +++ b/mock/server.conf @@ -1,7 +1,9 @@ -rewrite ^\/(?:examples|docs)\/[a-z0-9\-_\/]+$ /examples/index.html +rewrite ^\/(?:examples|docs|style)(?:\/[a-z0-9\-_\/]+)?$ /examples/index.html + rewrite ^\/play$ /examples/index.html rewrite ^\/edit$ /examples/index.html rewrite ^\/api\/ /mock/index.js -rewrite ^\/cxd /examples/cxd.html \ No newline at end of file +rewrite ^\/cxd /examples/cxd.html +redirect ^\/$ /docs/index \ No newline at end of file diff --git a/package.json b/package.json index 3701321fa..0ea6cd1ea 100644 --- a/package.json +++ b/package.json @@ -112,7 +112,7 @@ "@types/react-json-tree": "^0.6.6", "@types/react-onclickoutside": "^6.0.2", "@types/react-overlays": "^0.8.4", - "@types/react-router": "^4.0.16", + "@types/react-router": "^3.0.24", "@types/react-select": "^1.0.59", "@types/react-test-renderer": "^16.8.1", "@types/react-transition-group": "^2.0.6", diff --git a/scripts/code-md-parser.js b/scripts/code-md-parser.js new file mode 100644 index 000000000..fdc1dadc2 --- /dev/null +++ b/scripts/code-md-parser.js @@ -0,0 +1,11 @@ +const parserMarkdown = require('./md-parser'); + +module.exports = function (content, file) { + const markdowns = []; + + content.replace(/\/\*\!markdown\n([\s\S]+?)\*\//g, function (_, md) { + markdowns.push(md.trim()); + }); + + return parserMarkdown(markdowns.join('\n\n'), file); +}; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index e62b7b1ad..a0215bd4e 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -156,9 +156,9 @@ display: none; } -.inline { - display: inline-block !important; -} +// .inline { +// display: inline-block !important; +// } .none { display: none; diff --git a/scss/themes/_common.scss b/scss/themes/_common.scss index 82b0ae5a0..29060075b 100644 --- a/scss/themes/_common.scss +++ b/scss/themes/_common.scss @@ -96,9 +96,4 @@ @import '../components/form/icon-picker'; @import '../components/form/form'; -// js 功能依赖这个 -@keyframes apearSensor { - from { - opacity: 0; - } -} +@import '../utilities'; diff --git a/scss/utilities/background/_background-color.scss b/scss/utilities/background/_background-color.scss index 76f3b438a..ace192f4e 100644 --- a/scss/utilities/background/_background-color.scss +++ b/scss/utilities/background/_background-color.scss @@ -1,9 +1,28 @@ +/*!markdown + +--- +title: 介绍 +--- + +233 + + +*/ + @mixin bg-colors-map( $colors: $colors, $namePrefix: '', $prefix: '.', $suffix: '' ) { + #{$prefix}bg#{$namePrefix}-transparent#{$suffix} { + background-color: transparent; + } + + #{$prefix}bg#{$namePrefix}-current#{$suffix} { + background-color: currentColor; + } + @each $name, $color in $colors { @if (is-map($color)) { @include bg-colors-map($color, #{'-' + $name}, $prefix, $suffix); @@ -25,11 +44,6 @@ @include bg-colors-map($colors, '', $prefix, $suffix); } -.no-bg { - background-color: transparent; - color: inherit; -} - @include bg-colors(); @each $deivce in map-keys($devices) { @include media-device($deivce) { @@ -39,4 +53,5 @@ @include bg-colors('.' + selector-escape('hover:'), ':hover'); @include bg-colors('.' + selector-escape('active:'), '.is-active'); +@include bg-colors('.' + selector-escape('disabled:'), '.is-disabled'); @include bg-colors('.group:hover .' + selector-escape('group-hover:')); diff --git a/scss/utilities/border/_border-color.scss b/scss/utilities/border/_border-color.scss index 8d2662577..88dcf6b64 100644 --- a/scss/utilities/border/_border-color.scss +++ b/scss/utilities/border/_border-color.scss @@ -28,4 +28,5 @@ @include border-colors('.' + selector-escape('hover:'), ':hover'); @include border-colors('.' + selector-escape('active:'), '.is-active'); +@include border-colors('.' + selector-escape('disabled:'), '.is-disabled'); @include border-colors('.group:hover .' + selector-escape('group-hover:')); diff --git a/scss/utilities/border/_border-radius.scss b/scss/utilities/border/_border-radius.scss index 0c2ff8b9b..d398a1ee9 100644 --- a/scss/utilities/border/_border-radius.scss +++ b/scss/utilities/border/_border-radius.scss @@ -46,38 +46,6 @@ } } -.r { - border-radius: $borderRadius $borderRadius $borderRadius $borderRadius; -} - -.r-2x { - border-radius: $borderRadiusMd; -} - -.r-3x { - border-radius: $borderRadiusLg; -} - -.r-l { - border-radius: $borderRadius 0 0 $borderRadius; -} - -.r-r { - border-radius: 0 $borderRadius $borderRadius 0; -} - -.r-t { - border-radius: $borderRadius $borderRadius 0 0; -} - -.r-b { - border-radius: 0 0 $borderRadius $borderRadius; -} - -.no-radius { - border-radius: 0; -} - @include border-radius(); @each $deivce in map-keys($devices) { @include media-device($deivce) { @@ -87,4 +55,5 @@ // @include border-radius('.' + selector-escape('hover:'), ':hover'); // @include border-radius('.' + selector-escape('active:'), '.is-active'); +// @include border-radius('.' + selector-escape('disabled:'), '.is-disabled'); // @include border-radius('.group:hover .' + selector-escape('group-hover:')); diff --git a/scss/utilities/border/_border-width.scss b/scss/utilities/border/_border-width.scss index 25d14b3dd..625172208 100644 --- a/scss/utilities/border/_border-width.scss +++ b/scss/utilities/border/_border-width.scss @@ -30,4 +30,5 @@ // @include border-radius('.' + selector-escape('hover:'), ':hover'); // @include border-radius('.' + selector-escape('active:'), '.is-active'); +// @include border-radius('.' + selector-escape('disabled:'), '.is-disabled'); // @include border-radius('.group:hover .' + selector-escape('group-hover:')); diff --git a/scss/utilities/effect/_box-shadow.scss b/scss/utilities/effect/_box-shadow.scss index 376919458..9b76b3abc 100644 --- a/scss/utilities/effect/_box-shadow.scss +++ b/scss/utilities/effect/_box-shadow.scss @@ -15,4 +15,5 @@ @include make-box-shadow('.' + selector-escape('hover:'), ':hover'); @include make-box-shadow('.' + selector-escape('active:'), '.is-active'); +@include make-box-shadow('.' + selector-escape('disabled:'), '.is-disabled'); @include make-box-shadow('.group:hover .' + selector-escape('group-hover:')); diff --git a/scss/utilities/effect/_opacity.scss b/scss/utilities/effect/_opacity.scss index 096a12186..6752810e5 100644 --- a/scss/utilities/effect/_opacity.scss +++ b/scss/utilities/effect/_opacity.scss @@ -34,4 +34,5 @@ // @include border-radius('.' + selector-escape('hover:'), ':hover'); // @include border-radius('.' + selector-escape('active:'), '.is-active'); +// @include border-radius('.' + selector-escape('disabled:'), '.is-disabled'); // @include border-radius('.group:hover .' + selector-escape('group-hover:')); diff --git a/scss/utilities/spacing/_margin.scss b/scss/utilities/spacing/_margin.scss index d5568f4d1..4903ff5cc 100644 --- a/scss/utilities/spacing/_margin.scss +++ b/scss/utilities/spacing/_margin.scss @@ -10,6 +10,9 @@ } } } + #{$prefix}m-auto#{$suffix} { + margin: auto; + } } @mixin margin-negative-spacing($spacing: $spacing, $prefix: '.', $suffix: '') { @@ -40,6 +43,11 @@ } } } + + #{$prefix}m-x-auto#{$suffix} { + margin-left: auto; + margin-right: auto; + } } @mixin margin-negative-x-spacing( @@ -76,6 +84,11 @@ } } } + + #{$prefix}m-y-auto#{$suffix} { + margin-top: auto; + margin-bottom: auto; + } } @mixin margin-negative-y-spacing( @@ -252,4 +265,5 @@ // @include bg-colors('.' + selector-escape('hover:'), ':hover'); // @include bg-colors('.' + selector-escape('active:'), '.is-active'); +// @include bg-colors('.' + selector-escape('disabled:'), '.is-disabled'); // @include bg-colors('.group:hover .' + selector-escape('group-hover:')); diff --git a/scss/utilities/spacing/_padding.scss b/scss/utilities/spacing/_padding.scss index c4650a1ff..ae7b28cbd 100644 --- a/scss/utilities/spacing/_padding.scss +++ b/scss/utilities/spacing/_padding.scss @@ -118,4 +118,5 @@ } // @include bg-colors('.' + selector-escape('hover:'), ':hover'); // @include bg-colors('.' + selector-escape('active:'), '.is-active'); +// @include bg-colors('.' + selector-escape('disabled:'), '.is-disabled'); // @include bg-colors('.group:hover .' + selector-escape('group-hover:')); diff --git a/scss/utilities/typography/_text-color.scss b/scss/utilities/typography/_text-color.scss index 4215bb7ec..1b0c72a1e 100644 --- a/scss/utilities/typography/_text-color.scss +++ b/scss/utilities/typography/_text-color.scss @@ -41,4 +41,5 @@ @include text-colors('.' + selector-escape('hover:'), ':hover'); @include text-colors('.' + selector-escape('active:'), '.is-active'); +@include text-colors('.' + selector-escape('disabled:'), '.is-disabled'); @include text-colors('.group:hover .' + selector-escape('group-hover:'));