Browse Source

Pull request #2319: 无JIRAR任务 响应式布局

Merge in VISUAL/fineui from ~GUY/fineui:master to master

* commit 'f31f6541ac7647529b9d5ca532d05a89b81fc4be':
  优化
  响应式布局
es6
guy 3 years ago
parent
commit
73314a1cbc
  1. 6
      examples/config-render.html
  2. 413
      examples/dev.html
  3. 6
      examples/effect.html
  4. 6
      examples/hooks.html
  5. 6
      examples/loader-context.html
  6. 6
      examples/resize.html
  7. 6
      examples/style.html
  8. 6
      examples/tab-context.html
  9. 6
      examples/test-id.html
  10. 6
      examples/virtual-group.html
  11. 6
      examples/visible.html
  12. 6
      examples/worker.html
  13. 419
      examples/响应式布局.html
  14. 8
      examples/插件设计.html
  15. 51
      src/core/wrapper/layout.js
  16. 12
      src/core/wrapper/layout/layout.flow.js
  17. 21
      src/core/wrapper/layout/layout.td.js
  18. 76
      src/core/wrapper/layout/responsive/responsive.flex.horizontal.js
  19. 78
      src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js
  20. 75
      src/core/wrapper/layout/responsive/responsive.inline..js
  21. 11
      src/less/core/wrapper/flex.horizontal.less
  22. 13
      src/less/core/wrapper/flex.wrapper.horizontal.less

6
examples/config-render.html

@ -2,8 +2,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/> <!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> <script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head> </head>
<body> <body>
<div id="wrapper"></div> <div id="wrapper"></div>

413
examples/dev.html

@ -1,45 +1,418 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title></title> <meta name="viewport" content="width=device-width,minimum-scale=1" />
<link rel="stylesheet" type="text/css" href="http://localhost:9001/fineui.css"/> <meta http-equiv="x-ua-compatible" content="IE=edge" />
<title>PullRequest | Code Review as a Service</title>
<meta
name="description"
content="PullRequest is a platform for code review, built for teams of all sizes. We have thousands of on-demand reviewers and they are backed by best-in-class automation tools. Because code quality is important."
/>
<meta name="theme-color" content="#28557a" />
<link
rel="stylesheet"
type="text/css"
href="https://fanruan.design/fineui/2.0/fineui_without_normalize.css"
/>
<!-- <script src="../dist/2.0/fineui.js"></script>--> <!-- <script src="../dist/2.0/fineui.js"></script>-->
<script src="http://localhost:9001/fineui.js"></script> <script src="http://localhost:9001/fineui.js"></script>
<style>
*,
:after,
:before {
box-sizing: border-box;
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
helvetica neue, Arial, noto sans, liberation sans, sans-serif,
apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
height: 100vh;
background-color: #fff;
}
#wrapper {
height: 100vh;
}
.nav {
box-shadow: 0 2px 5px rgb(0 0 0 / 16%), 0 2px 10px rgb(0 0 0 / 12%);
}
.nav-logo {
background-image: url(https://www.pullrequest.com/images/pullrequest-logo.svg);
background-repeat: no-repeat;
background-position: 50%;
background-size: contain;
}
.image {
background-image: url(https://www.pullrequest.com/images/figures/home/hero-graphic.png);
background-repeat: no-repeat;
background-size: contain;
}
.demo {
cursor: pointer;
border-radius: 3px;
font-weight: 600;
color: #fff;
background: #4aa4e0 linear-gradient(180deg, #65b2e5, #4aa4e0) repeat-x;
border: 1px solid #4aa4e0;
}
.signup {
cursor: pointer;
border-radius: 3px;
font-weight: 600;
color: #4aa4e0;
border: 1px solid #4aa4e0;
}
.wave {
background-image: url(https://www.pullrequest.com/images/textures/home/wave1.png);
background-size: cover;
background-repeat: repeat-x;
}
</style>
</head> </head>
<body> <body>
<div id="wrapper"></div> <div id="wrapper"></div>
<script> <script>
BI.config("bi.provider.system", function (provider) { BI.config("bi.provider.system", function (provider) {
provider.setResponsiveMode(true); provider.setResponsiveMode(true);
}); });
var Widget = BI.inherit(BI.Widget, { var Widget = BI.inherit(BI.Widget, {
props: {}, props: {},
render: function () { render: function () {
return { return [
{
type: "bi.vertical", type: "bi.vertical",
items: [{ items: [
{
el: {
type: "bi.vertical_adapt",
cls: "nav",
css: {
position: "fixed",
left: 0,
right: 0,
zIndex: 1000,
},
height: 62,
hgap: 16,
items: [
{
type: "bi.layout",
cls: "nav-logo",
width: 185,
height: 46,
},
],
},
},
{
tgap: 112,
el: {
type: "bi.center_adapt", type: "bi.center_adapt",
verticalAlign: "top", columnSize: ["fill", "fill"],
height: 300, vgap: 24,
columnSize: [300, "fill"], items: [
items: [{ {
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.text",
css: {
fontSize: "24px",
fontWeight: "700",
color: "#092353",
},
text: "Code Review as a Service",
},
},
{
el: {
type: "bi.text",
css: {
fontSize: "16px",
lineHeight: "24px",
color: "#28557a",
},
text: "Increase velocity and reduce technical debt through quality code review by expert engineers backed by best-in-class automation.",
},
tgap: 24,
bgap: 24,
},
{
el: {
type: "bi.vertical_adapt",
vgap: 16,
items: [
{
el: {
type: "bi.label", type: "bi.label",
css: {background: "#eee"}, hgap: 24,
text: "123" height: 48,
}, { cls: "demo",
text: "Schedule demo",
},
},
{
el: {
type: "bi.label", type: "bi.label",
css: {background: "#e0e0e0"}, hgap: 24,
text: "123" height: 48,
}] cls: "signup",
}] text: "Sign up",
}; },
} lgap: 30,
rgap: 15,
},
],
},
},
],
},
},
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.vertical",
items: [
{
type: "bi.img",
attributes: {
width: 595,
},
css: {
maxWidth: "100%",
maxHeight: "100%",
},
src: "https://www.pullrequest.com/images/figures/home/hero-graphic.png",
width: "auto",
height: "auto",
},
],
},
},
],
},
},
],
},
},
{
type: "bi.layout",
cls: "wave",
height: 112,
},
{
el: {
type: "bi.center_adapt",
columnSize: ["fill"],
css: {
background: "#f5fbff",
},
hgap: 0.1,
vgap: 64,
items: [
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
type: "bi.text",
lineHeight: 30,
css: {
fontSize: "22px",
color: "#092353",
},
text: "Empower your development team with the help of world-class engineers. ",
},
{
type: "bi.text",
lineHeight: 24,
css: {
fontSize: "16px",
color: "#28557a",
},
text: "PullRequest provides on-demand code review by world-class engineers, built for teams of any size. We review within your tools to catch security threats, stop crashes, and fix performance issues before they reach production.",
},
],
},
},
],
},
},
{
el: {
type: "bi.center_adapt",
columnSize: ["fill", "fill"],
vgap: 48,
items: [
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.text",
css: {
fontSize: "24px",
fontWeight: "700",
color: "#092353",
},
text: "Move fast and reduce cycle times.",
},
},
{
el: {
type: "bi.text",
css: {
fontSize: "16px",
lineHeight: "24px",
color: "#28557a",
},
text: "Save time reviewing code so you can focus on shipping new features.",
},
tgap: 24,
bgap: 24,
},
],
},
},
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.vertical",
items: [
{
type: "bi.img",
attributes: {
width: 595,
},
css: {
maxWidth: "100%",
maxHeight: "100%",
},
src: "https://www.pullrequest.com/images/figures/home/velocity.png",
width: "auto",
height: "auto",
},
],
},
},
],
},
},
],
},
},
{
el: {
type: "bi.center_adapt",
css: {
background: "#f5fbff",
},
columnSize: ["fill", "fill"],
vgap: 48,
items: [
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.vertical",
items: [
{
type: "bi.img",
attributes: {
width: 595,
},
css: {
maxWidth: "100%",
maxHeight: "100%",
},
src: "https://www.pullrequest.com/images/figures/home/secure.png",
width: "auto",
height: "auto",
},
],
},
},
],
},
},
{
el: {
type: "bi.vertical",
rgap: 15,
lgap: 0.1,
items: [
{
el: {
type: "bi.text",
css: {
fontSize: "24px",
fontWeight: "700",
color: "#092353",
},
text: "Secure your codebase.",
},
},
{
el: {
type: "bi.text",
css: {
fontSize: "16px",
lineHeight: "24px",
color: "#28557a",
},
text: "Deliver high quality code with an extra line of defense to prevent security vulnerabilities and other fatal flaws.",
},
tgap: 24,
bgap: 24,
},
],
},
},
],
},
},
],
},
];
},
}); });
BI.shortcut("demo.responsive", Widget); BI.shortcut("demo.responsive", Widget);
BI.createWidget({ BI.createWidget({
type: "demo.responsive", type: "demo.responsive",
element: "#wrapper" element: "#wrapper",
}); });
</script> </script>
</body> </body>

6
examples/effect.html

@ -2,8 +2,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/> <!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> <script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head> </head>
<body> <body>
<div id="wrapper"></div> <div id="wrapper"></div>

6
examples/hooks.html

@ -2,8 +2,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/> <!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> <script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head> </head>
<body> <body>
<div id="wrapper"></div> <div id="wrapper"></div>

6
examples/loader-context.html

@ -2,8 +2,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/> <!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> <script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head> </head>
<body> <body>
<div id="wrapper"></div> <div id="wrapper"></div>

6
examples/resize.html

@ -2,8 +2,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/> <!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> <script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head> </head>
<body> <body>
<div id="wrapper"></div> <div id="wrapper"></div>

6
examples/style.html

@ -2,8 +2,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/> <!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> <script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head> </head>
<body> <body>
<div id="wrapper"></div> <div id="wrapper"></div>

6
examples/tab-context.html

@ -2,8 +2,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/> <!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> <script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head> </head>
<body> <body>
<div id="wrapper"></div> <div id="wrapper"></div>

6
examples/test-id.html

@ -2,8 +2,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/> <!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> <script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head> </head>
<body> <body>
<div id="wrapper"></div> <div id="wrapper"></div>

6
examples/virtual-group.html

@ -2,8 +2,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/> <!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> <script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head> </head>
<body> <body>
<div id="wrapper"></div> <div id="wrapper"></div>

6
examples/visible.html

@ -2,8 +2,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/> <!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> <script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head> </head>
<body> <body>
<div id="wrapper"></div> <div id="wrapper"></div>

6
examples/worker.html

@ -2,8 +2,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/> <!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> <script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
<script src="../dist/fix/worker.compact.js"></script> <script src="../dist/fix/worker.compact.js"></script>
<script src="demo.worker.js"></script> <script src="demo.worker.js"></script>
</head> </head>

419
examples/响应式布局.html

@ -0,0 +1,419 @@
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<title>PullRequest | Code Review as a Service</title>
<meta
name="description"
content="PullRequest is a platform for code review, built for teams of all sizes. We have thousands of on-demand reviewers and they are backed by best-in-class automation tools. Because code quality is important."
/>
<meta name="theme-color" content="#28557a" />
<link
rel="stylesheet"
type="text/css"
href="https://fanruan.design/fineui/2.0/fineui_without_normalize.css"
/>
<!-- <script src="../dist/2.0/fineui.js"></script>-->
<script src="https://fanruan.design/fineui/2.0/fineui.js"></script>
<style>
*,
:after,
:before {
box-sizing: border-box;
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
helvetica neue, Arial, noto sans, liberation sans, sans-serif,
apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
height: 100vh;
background-color: #fff;
}
#wrapper {
height: 100vh;
}
.nav {
box-shadow: 0 2px 5px rgb(0 0 0 / 16%), 0 2px 10px rgb(0 0 0 / 12%);
}
.nav-logo {
background-image: url(https://www.pullrequest.com/images/pullrequest-logo.svg);
background-repeat: no-repeat;
background-position: 50%;
background-size: contain;
}
.image {
background-image: url(https://www.pullrequest.com/images/figures/home/hero-graphic.png);
background-repeat: no-repeat;
background-size: contain;
}
.demo {
cursor: pointer;
border-radius: 3px;
font-weight: 600;
color: #fff;
background: #4aa4e0 linear-gradient(180deg, #65b2e5, #4aa4e0) repeat-x;
border: 1px solid #4aa4e0;
}
.signup {
cursor: pointer;
border-radius: 3px;
font-weight: 600;
color: #4aa4e0;
border: 1px solid #4aa4e0;
}
.wave {
background-image: url(https://www.pullrequest.com/images/textures/home/wave1.png);
background-size: cover;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div id="wrapper"></div>
<script>
BI.config("bi.provider.system", function (provider) {
provider.setResponsiveMode(true);
});
var Widget = BI.inherit(BI.Widget, {
props: {},
render: function () {
return [
{
type: "bi.vertical",
items: [
{
el: {
type: "bi.vertical_adapt",
cls: "nav",
css: {
position: "fixed",
left: 0,
right: 0,
zIndex: 1000,
},
height: 62,
hgap: 16,
items: [
{
type: "bi.layout",
cls: "nav-logo",
width: 185,
height: 46,
},
],
},
},
{
tgap: 112,
el: {
type: "bi.center_adapt",
columnSize: ["fill", "fill"],
vgap: 24,
items: [
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.text",
css: {
fontSize: "24px",
fontWeight: "700",
color: "#092353",
},
text: "Code Review as a Service",
},
},
{
el: {
type: "bi.text",
css: {
fontSize: "16px",
lineHeight: "24px",
color: "#28557a",
},
text: "Increase velocity and reduce technical debt through quality code review by expert engineers backed by best-in-class automation.",
},
tgap: 24,
bgap: 24,
},
{
el: {
type: "bi.vertical_adapt",
vgap: 16,
items: [
{
el: {
type: "bi.label",
hgap: 24,
height: 48,
cls: "demo",
text: "Schedule demo",
},
},
{
el: {
type: "bi.label",
hgap: 24,
height: 48,
cls: "signup",
text: "Sign up",
},
lgap: 30,
rgap: 15,
},
],
},
},
],
},
},
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.vertical",
items: [
{
type: "bi.img",
attributes: {
width: 595,
},
css: {
maxWidth: "100%",
maxHeight: "100%",
},
src: "https://www.pullrequest.com/images/figures/home/hero-graphic.png",
width: "auto",
height: "auto",
},
],
},
},
],
},
},
],
},
},
{
type: "bi.layout",
cls: "wave",
height: 112,
},
{
el: {
type: "bi.center_adapt",
columnSize: ["fill"],
css: {
background: "#f5fbff",
},
hgap: 0.1,
vgap: 64,
items: [
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
type: "bi.text",
lineHeight: 30,
css: {
fontSize: "22px",
color: "#092353",
},
text: "Empower your development team with the help of world-class engineers. ",
},
{
type: "bi.text",
lineHeight: 24,
css: {
fontSize: "16px",
color: "#28557a",
},
text: "PullRequest provides on-demand code review by world-class engineers, built for teams of any size. We review within your tools to catch security threats, stop crashes, and fix performance issues before they reach production.",
},
],
},
},
],
},
},
{
el: {
type: "bi.center_adapt",
columnSize: ["fill", "fill"],
vgap: 48,
items: [
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.text",
css: {
fontSize: "24px",
fontWeight: "700",
color: "#092353",
},
text: "Move fast and reduce cycle times.",
},
},
{
el: {
type: "bi.text",
css: {
fontSize: "16px",
lineHeight: "24px",
color: "#28557a",
},
text: "Save time reviewing code so you can focus on shipping new features.",
},
tgap: 24,
bgap: 24,
},
],
},
},
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.vertical",
items: [
{
type: "bi.img",
attributes: {
width: 595,
},
css: {
maxWidth: "100%",
maxHeight: "100%",
},
src: "https://www.pullrequest.com/images/figures/home/velocity.png",
width: "auto",
height: "auto",
},
],
},
},
],
},
},
],
},
},
{
el: {
type: "bi.center_adapt",
css: {
background: "#f5fbff",
},
columnSize: ["fill", "fill"],
vgap: 48,
items: [
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.vertical",
items: [
{
type: "bi.img",
attributes: {
width: 595,
},
css: {
maxWidth: "100%",
maxHeight: "100%",
},
src: "https://www.pullrequest.com/images/figures/home/secure.png",
width: "auto",
height: "auto",
},
],
},
},
],
},
},
{
el: {
type: "bi.vertical",
rgap: 15,
lgap: 0.1,
items: [
{
el: {
type: "bi.text",
css: {
fontSize: "24px",
fontWeight: "700",
color: "#092353",
},
text: "Secure your codebase.",
},
},
{
el: {
type: "bi.text",
css: {
fontSize: "16px",
lineHeight: "24px",
color: "#28557a",
},
text: "Deliver high quality code with an extra line of defense to prevent security vulnerabilities and other fatal flaws.",
},
tgap: 24,
bgap: 24,
},
],
},
},
],
},
},
],
},
];
},
});
BI.shortcut("demo.responsive", Widget);
BI.createWidget({
type: "demo.responsive",
element: "#wrapper",
});
</script>
</body>
</html>

8
examples/插件设计.html

@ -2,10 +2,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/> <!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> <script src="../dist/2.0/fineui.js"></script> -->
<!-- <link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />--> <link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<!-- <script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>--> <script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head> </head>
<body> <body>
<div id="wrapper"></div> <div id="wrapper"></div>

51
src/core/wrapper/layout.js

@ -267,26 +267,69 @@ BI.Layout = BI.inherit(BI.Widget, {
this.options.items.splice(index, 1); this.options.items.splice(index, 1);
}, },
_clearGap: function (w) {
w.element.css({
"margin-top": "",
"margin-bottom": "",
"margin-left": "",
"margin-right": "",
})
},
_handleGap: function (w, item, hIndex, vIndex) { _handleGap: function (w, item, hIndex, vIndex) {
var o = this.options; var o = this.options;
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
var top = ((BI.isNull(vIndex) || vIndex === 0) ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0);
w.element.css({ w.element.css({
"margin-top": (((BI.isNull(vIndex) || vIndex === 0) ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit "margin-top": top >= 1 ? top / BI.pixRatio + BI.pixUnit : (top * 100).toFixed(1) + "%"
}); });
} }
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
var left = ((BI.isNull(hIndex) || hIndex === 0) ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0);
w.element.css({ w.element.css({
"margin-left": (((BI.isNull(hIndex) || hIndex === 0) ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit "margin-left": left >= 1 ? left / BI.pixRatio + BI.pixUnit : (left * 100).toFixed(1) + "%"
}); });
} }
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
var right = o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0);
w.element.css({ w.element.css({
"margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit "margin-right": right >= 1 ? right / BI.pixRatio + BI.pixUnit : (right * 100).toFixed(1) + "%"
}); });
} }
if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
var bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0);
w.element.css({
"margin-bottom": bottom >= 1 ? bottom / BI.pixRatio + BI.pixUnit : (bottom * 100).toFixed(1) + "%"
});
}
},
// 横向换纵向
_handleReverseGap: function (w, item, index) {
var o = this.options;
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
var top = (index === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0);
w.element.css({
"margin-top": top >= 1 ? top / BI.pixRatio + BI.pixUnit : (top * 100).toFixed(1) + "%"
});
}
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
var left = o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0);
w.element.css({
"margin-left": left >= 1 ? left / BI.pixRatio + BI.pixUnit : (left * 100).toFixed(1) + "%"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
var right = o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0);
w.element.css({
"margin-right": right >= 1 ? right / BI.pixRatio + BI.pixUnit : (right * 100).toFixed(1) + "%"
});
}
// 这里的代码是关键
if (o.vgap + o.hgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
var bottom = (index === o.items.length - 1 ? o.vgap : o.hgap) + o.bgap + (item.bgap || 0) + (item.vgap || 0);
w.element.css({ w.element.css({
"margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit "margin-bottom": bottom >= 1 ? bottom / BI.pixRatio + BI.pixUnit : (bottom * 100).toFixed(1) + "%"
}); });
} }
}, },

12
src/core/wrapper/layout/layout.flow.js

@ -42,23 +42,27 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, {
w.element.css({bottom: BI.isNumber(item.bottom) ? item.bottom / BI.pixRatio + BI.pixUnit : item.bottom}); w.element.css({bottom: BI.isNumber(item.bottom) ? item.bottom / BI.pixRatio + BI.pixUnit : item.bottom});
} }
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
var top = o.vgap / 2 + o.tgap + (item.tgap || 0) + (item.vgap || 0);
w.element.css({ w.element.css({
"margin-top": (o.vgap / 2 + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit "margin-top": top >= 1 ? top / BI.pixRatio + BI.pixUnit : (top * 100).toFixed(1) + "%"
}); });
} }
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
var left = o.hgap / 2 + o.lgap + (item.lgap || 0) + (item.hgap || 0);
w.element.css({ w.element.css({
"margin-left": (o.hgap / 2 + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit "margin-left": left >= 1 ? left / BI.pixRatio + BI.pixUnit : (left * 100).toFixed(1) + "%"
}); });
} }
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
var right = o.hgap / 2 + o.rgap + (item.rgap || 0) + (item.hgap || 0);
w.element.css({ w.element.css({
"margin-right": (o.hgap / 2 + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit "margin-right": right >= 1 ? right / BI.pixRatio + BI.pixUnit : (right * 100).toFixed(1) + "%"
}); });
} }
if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
var bottom = o.vgap / 2 + o.bgap + (item.bgap || 0) + (item.vgap || 0);
w.element.css({ w.element.css({
"margin-bottom": (o.vgap / 2 + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit "margin-bottom": bottom >= 1 ? bottom / BI.pixRatio + BI.pixUnit : (bottom * 100).toFixed(1) + "%"
}); });
} }
return w; return w;

21
src/core/wrapper/layout/layout.td.js

@ -96,26 +96,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
} }
w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"}); w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
var item = arr[i]; var item = arr[i];
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { this._handleGap(w, item, i);
w.element.css({
"margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
});
}
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({
"margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({
"margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
});
}
if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
w.element.css({
"margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
});
}
first(w, this.rows++, i); first(w, this.rows++, i);
var width = ""; var width = "";
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;

76
src/core/wrapper/layout/responsive/responsive.flex.horizontal.js

@ -6,42 +6,52 @@
* @extends BI.FlexHorizontalLayout * @extends BI.FlexHorizontalLayout
*/ */
BI.ResponsiveFlexHorizontalLayout = BI.inherit(BI.FlexHorizontalLayout, { BI.ResponsiveFlexHorizontalLayout = BI.inherit(BI.FlexHorizontalLayout, {
props: function () { // props: function () {
return BI.extend(BI.ResponsiveFlexHorizontalLayout.superclass.props.apply(this, arguments), { // return BI.extend(BI.ResponsiveFlexHorizontalLayout.superclass.props.apply(this, arguments), {
extraCls: "bi-responsive-f-h" // // extraCls: "bi-responsive-f-h"
// });
// },
mounted: function () {
var self = this, o = this.options;
if (o.horizontalAlign !== BI.HorizontalAlign.Center){
return;
}
var defaultResize = function () {
if (o.scrollable !== true && o.scrollx !== true) {
var clientWidth = document.body.clientWidth;
if(self.element.width() > 2/3 * clientWidth){
if (clientWidth <= 768) {
BI.each(self._children, function (i, child) {
self._clearGap(child);
self._handleReverseGap(child, o.items[i], i | 0);
}); });
self.element.css("flex-direction", "column");
}
}
}
}
var resize = function () {
defaultResize();
if (o.scrollable !== true && o.scrollx !== true) {
var clientWidth = document.body.clientWidth;
if(self.element.width() > 2/3 * clientWidth){
if (clientWidth > 768) {
BI.each(self._children, function (i, child) {
self._clearGap(child);
})
self.resize();
self.element.css("flex-direction", "row");
}
}
}
}
this.unResize = BI.Resizers.add(this.getName(), resize);
defaultResize();
}, },
_addElement: function (i, item) { destroyed: function () {
var w = BI.ResponsiveFlexHorizontalLayout.superclass._addElement.apply(this, arguments); this.unResize();
var o = this.options;
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width >= 1 ? null : item.width;
if (o.columnSize.length > 0) {
if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
columnSize = null;
}
}
if (columnSize === "fill") {
// 给自适应列设置一个min-width
var length = 0;
var fillCount = 0, autoCount = 0;
for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) {
var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width;
if (cz === "fill") {
fillCount++;
cz = 0;
} else if (cz === "" || BI.isNull(cz)) {
autoCount++;
cz = 0;
}
length += cz;
}
var count = (o.columnSize.length || o.items.length) - fillCount - autoCount;
if (count > 0) {
w.element.css("min-width", length / count / BI.pixRatio + BI.pixUnit);
}
}
return w;
} }
}); });
BI.shortcut("bi.responsive_flex_horizontal", BI.ResponsiveFlexHorizontalLayout); BI.shortcut("bi.responsive_flex_horizontal", BI.ResponsiveFlexHorizontalLayout);

78
src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js

@ -6,42 +6,54 @@
* @extends BI.FlexWrapperHorizontalLayout * @extends BI.FlexWrapperHorizontalLayout
*/ */
BI.ResponsiveFlexWrapperHorizontalLayout = BI.inherit(BI.FlexWrapperHorizontalLayout, { BI.ResponsiveFlexWrapperHorizontalLayout = BI.inherit(BI.FlexWrapperHorizontalLayout, {
props: function () { // props: function () {
return BI.extend(BI.ResponsiveFlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), { // return BI.extend(BI.ResponsiveFlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
extraCls: "bi-responsive-f-h" // extraCls: "bi-responsive-f-h"
// });
// },
mounted: function () {
var self = this, o = this.options;
if (o.horizontalAlign !== BI.HorizontalAlign.Center){
return;
}
var defaultResize = function () {
if (o.scrollable !== true && o.scrollx !== true) {
var clientWidth = document.body.clientWidth;
if(self.element.width() > 2/3 * clientWidth){
if (clientWidth <= 768) {
BI.each(self._children, function (i, child) {
self._clearGap(child);
self._handleReverseGap(child, o.items[i], i | 0);
}); });
self.element.css("flex-direction", "column");
self.$wrapper.element.css("flex-direction", "column");
}
}
}
}
var resize = function () {
defaultResize();
if (o.scrollable !== true && o.scrollx !== true) {
var clientWidth = document.body.clientWidth;
if(self.element.width() > 2/3 * clientWidth){
if (clientWidth > 768) {
BI.each(self._children, function (i, child) {
self._clearGap(child);
})
self.resize();
self.element.css("flex-direction", "row");
self.$wrapper.element.css("flex-direction", "row");
}
}
}
}
this.unResize = BI.Resizers.add(this.getName(), resize);
defaultResize();
}, },
_addElement: function (i, item) { destroyed: function () {
var w = BI.ResponsiveFlexHorizontalLayout.superclass._addElement.apply(this, arguments); this.unResize();
var o = this.options;
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width >= 1 ? null : item.width;
if (o.columnSize.length > 0) {
if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
columnSize = null;
}
}
if (columnSize === "fill") {
// 给自适应列设置一个min-width
var length = 0;
var fillCount = 0, autoCount = 0;
for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) {
var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width;
if (cz === "fill") {
fillCount++;
cz = 0;
} else if (cz === "" || BI.isNull(cz)) {
autoCount++;
cz = 0;
}
length += cz;
}
var count = (o.columnSize.length || o.items.length) - fillCount - autoCount;
if (count > 0) {
w.element.css("min-width", length / count / BI.pixRatio + BI.pixUnit);
}
}
return w;
} }
}); });
BI.shortcut("bi.responsive_flex_scrollable_horizontal", BI.ResponsiveFlexWrapperHorizontalLayout); BI.shortcut("bi.responsive_flex_scrollable_horizontal", BI.ResponsiveFlexWrapperHorizontalLayout);

75
src/core/wrapper/layout/responsive/responsive.inline..js

@ -6,60 +6,45 @@
* @extends BI.InlineLayout * @extends BI.InlineLayout
*/ */
BI.ResponsiveInlineLayout = BI.inherit(BI.InlineLayout, { BI.ResponsiveInlineLayout = BI.inherit(BI.InlineLayout, {
_addElement: function (i, item) { mounted: function () {
var o = this.options; var self = this, o = this.options;
var w = BI.InlineLayout.superclass._addElement.apply(this, arguments); if (o.horizontalAlign !== BI.HorizontalAlign.Center){
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width >= 1 ? null : item.width; return;
if (o.columnSize.length > 0) { }
if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { var defaultResize = function () {
columnSize = null; if (o.scrollable !== true && o.scrollx !== true) {
} var clientWidth = document.body.clientWidth;
} if(self.element.width() > 2/3 * clientWidth){
if (columnSize > 0) { if (clientWidth <= 768) {
w.element.width(columnSize < 1 ? ((columnSize * 100).toFixed(1) + "%") : (columnSize / BI.pixRatio + BI.pixUnit)); BI.each(self._children, function (i, child) {
} self._clearGap(child);
w.element.css({ self._handleReverseGap(child, o.items[i], i | 0);
position: "relative", child.elemenet.css("display", "");
"vertical-align": o.verticalAlign
}); });
w.element.addClass("i-item");
if (columnSize === "fill" || columnSize === "") {
var length = o.hgap, czs = 0;
var fillCount = 0, autoCount = 0;
for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) {
var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width;
if (cz === "fill") {
fillCount++;
cz = 0;
} else if (cz === "" || BI.isNull(cz)) {
autoCount++;
cz = 0;
} }
length += o.hgap + o.lgap + o.rgap + (o.items[k].lgap || 0) + (o.items[k].rgap || 0) + (o.items[k].hgap || 0) + cz;
czs += cz;
} }
if (columnSize === "fill") {
var count = (o.columnSize.length || o.items.length) - fillCount - autoCount;
if (count > 0) {
w.element.css("min-width", czs / count / BI.pixRatio + BI.pixUnit);
} }
w.element.css("width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
} }
if (o.horizontalAlign === BI.HorizontalAlign.Stretch || !(o.scrollable === true || o.scrollx === true)) { var resize = function () {
if (columnSize === "fill") { defaultResize();
w.element.css("max-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")"); if (o.scrollable !== true && o.scrollx !== true) {
} else { var clientWidth = document.body.clientWidth;
w.element.css("max-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (autoCount > 1 ? "/" + autoCount : "") + ")"); if(self.element.width() > 2/3 * clientWidth){
if (clientWidth > 768) {
BI.each(self._children, function (i, child) {
self._clearGap(child);
})
self.resize();
} }
} }
} }
this._handleGap(w, item, i);
if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) {
var top = o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0),
bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0);
w.element.css("height", "calc(100% - " + ((top + bottom) / BI.pixRatio + BI.pixUnit) + ")");
} }
return w; this.unResize = BI.Resizers.add(this.getName(), resize);
defaultResize();
},
destroyed: function () {
this.unResize();
} }
}); });
BI.shortcut("bi.responsive_inline", BI.ResponsiveInlineLayout); BI.shortcut("bi.responsive_inline", BI.ResponsiveInlineLayout);

11
src/less/core/wrapper/flex.horizontal.less

@ -62,17 +62,6 @@
-o-flex-wrap: nowrap; -o-flex-wrap: nowrap;
flex-wrap: nowrap; flex-wrap: nowrap;
&.bi-responsive-f-h {
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
&.v-middle { &.v-middle {
/* 09版 */ /* 09版 */
-webkit-box-align: center; -webkit-box-align: center;

13
src/less/core/wrapper/flex.wrapper.horizontal.less

@ -269,17 +269,4 @@
flex-grow: 1; flex-grow: 1;
} }
} }
&.bi-responsive-f-h {
& .f-s-h-w {
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
}
} }

Loading…
Cancel
Save