mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-11 19:42:54 +08:00
Improve iframe demo look
This commit is contained in:
afc163
parent
c361165352
commit
3740fb7f3c
@ -1,6 +1,6 @@
|
||||
---
|
||||
order: 2
|
||||
iframe: true
|
||||
iframe: 200
|
||||
title:
|
||||
zh-CN: 路由
|
||||
en-US: React Router Integration
|
||||
@ -30,7 +30,7 @@ const Apps = () => (
|
||||
);
|
||||
|
||||
const Home = ({ routes, params, children }) => (
|
||||
<div>
|
||||
<div className="demo">
|
||||
<div className="demo-nav">
|
||||
<Link to="/">Home</Link>
|
||||
<Link to="/apps">Application List</Link>
|
||||
@ -55,20 +55,20 @@ ReactDOM.render(
|
||||
````
|
||||
|
||||
````css
|
||||
#components-breadcrumb-demo-router iframe {
|
||||
height: 180px;
|
||||
.demo {
|
||||
margin: 16px;
|
||||
}
|
||||
.demo-nav {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 16px;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
.demo-nav a {
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.app-list {
|
||||
margin-top: 15px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
````
|
||||
|
||||
@ -1,98 +1,53 @@
|
||||
.window-frame {
|
||||
/* Browser mockup code
|
||||
* Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f
|
||||
* Live example: https://updown.io
|
||||
*/
|
||||
|
||||
.browser-mockup {
|
||||
border-top: 2em solid rgba(230, 230, 230, 0.7);
|
||||
box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #fff;
|
||||
line-height: 1;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.window-frame .top-bar {
|
||||
background: #dcd9dc;
|
||||
background-image: -webkit-linear-gradient(#f6f6f6, #dadada);
|
||||
background-image: linear-gradient(#f6f6f6, #dadada);
|
||||
min-height: 2rem;
|
||||
border-radius: 0.35rem 0.35rem 0 0;
|
||||
padding: 0.41528rem 0.83056rem;
|
||||
border-bottom: 1px solid transparent;
|
||||
border-bottom-color: #ccc;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.window-frame .top-bar .address-bar {
|
||||
border-radius: 0.245rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
color: black;
|
||||
box-shadow: 0 0.5px 0 0 rgba(255, 255, 255, 0.75), inset 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
display: inline-block;
|
||||
padding: 0 0.5em 0 1em;
|
||||
font-size: 0.75rem;
|
||||
line-height: 2;
|
||||
background: white;
|
||||
width: 60%;
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
.window-frame .top-bar .controls {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
padding-top: 0.2em;
|
||||
}
|
||||
.window-frame .top-bar .controls > * {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
margin-right: 0.41528rem;
|
||||
-webkit-transition: 0.1s linear;
|
||||
transition: 0.1s linear;
|
||||
}
|
||||
.window-frame .top-bar .control {
|
||||
width: 0.83056rem;
|
||||
height: 0.83056rem;
|
||||
background: #dcd9dc;
|
||||
border-radius: 0.83056rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
cursor: pointer;
|
||||
}
|
||||
.window-frame .top-bar .control:hover {
|
||||
background: #b0adb0;
|
||||
}
|
||||
.window-frame .top-bar .control:before,
|
||||
.window-frame .top-bar .control:after {
|
||||
line-height: 0.5;
|
||||
color: black;
|
||||
text-align: center;
|
||||
.browser-mockup:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.window-frame .top-bar .control.close {
|
||||
background: #fc625c;
|
||||
}
|
||||
.window-frame .top-bar .control.minify {
|
||||
background: #fdc041;
|
||||
}
|
||||
.window-frame .top-bar .control.expand {
|
||||
background: #35cd4b;
|
||||
}
|
||||
.window-frame .window-content {
|
||||
padding: 0;
|
||||
line-height: 1.5;
|
||||
overflow: auto;
|
||||
height: 440px;
|
||||
position: relative;
|
||||
border-radius: 0 0 5px 5px;
|
||||
background: #ececec;
|
||||
content: '';
|
||||
top: -1.25em;
|
||||
left: 1em;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
border-radius: 50%;
|
||||
background-color: #f44;
|
||||
box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
|
||||
}
|
||||
|
||||
.window-frame .status-bar {
|
||||
height: 2rem;
|
||||
border-radius: 0 0 0.35rem 0.35rem;
|
||||
display: none;
|
||||
.browser-mockup.with-tab:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: -2em;
|
||||
left: 5.5em;
|
||||
width: 20%;
|
||||
height: 0;
|
||||
border-bottom: 2em solid white;
|
||||
border-left: 0.8em solid transparent;
|
||||
border-right: 0.8em solid transparent;
|
||||
}
|
||||
|
||||
.browser-mockup.with-url:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: -1.6em;
|
||||
left: 5.5em;
|
||||
width: ~"calc(100% - 6em)";
|
||||
height: 1.2em;
|
||||
border-radius: 2px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.browser-mockup > * {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function BrowserDemo(props) {
|
||||
return (
|
||||
<article className="window-frame focus">
|
||||
<header className="top-bar">
|
||||
<div className="controls">
|
||||
<div className="control close" />
|
||||
<div className="control minify" />
|
||||
<div className="control expand" />
|
||||
</div>
|
||||
<input className="address-bar" defaultValue="http://www.example.com" />
|
||||
</header>
|
||||
<section className="window-content">
|
||||
{props.children}
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
7
site/theme/template/BrowserFrame.jsx
Normal file
7
site/theme/template/BrowserFrame.jsx
Normal file
@ -0,0 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
export default ({ children }) => (
|
||||
<div className="browser-mockup with-url">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
@ -5,6 +5,7 @@ import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
import classNames from 'classnames';
|
||||
import { Icon, Tooltip } from 'antd';
|
||||
import EditButton from './EditButton';
|
||||
import BrowserFrame from '../BrowserFrame';
|
||||
|
||||
export default class Demo extends React.Component {
|
||||
static contextTypes = {
|
||||
@ -82,7 +83,9 @@ export default class Demo extends React.Component {
|
||||
expand,
|
||||
} = props;
|
||||
if (!this.liveDemo) {
|
||||
this.liveDemo = meta.iframe ? <iframe src={src} height={meta.iframe} /> : preview(React, ReactDOM);
|
||||
this.liveDemo = meta.iframe
|
||||
? <BrowserFrame><iframe src={src} height={meta.iframe} /></BrowserFrame>
|
||||
: preview(React, ReactDOM);
|
||||
}
|
||||
const codeExpand = state.codeExpand || expand;
|
||||
const codeBoxClass = classNames({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user