summaryrefslogtreecommitdiff
path: root/ui/app/components/layout/index.js
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/layout/index.js')
-rw-r--r--ui/app/components/layout/index.js62
1 files changed, 58 insertions, 4 deletions
diff --git a/ui/app/components/layout/index.js b/ui/app/components/layout/index.js
index 8e7c4b58..b32961a7 100644
--- a/ui/app/components/layout/index.js
+++ b/ui/app/components/layout/index.js
@@ -4,7 +4,8 @@ import './layout.less'
class HorizontalLayout extends React.Component {
static get defaultProps() {return{
- equalWidths: false
+ equalWidths: false,
+ className: ''
}}
constructor(props) {
@@ -12,7 +13,7 @@ class HorizontalLayout extends React.Component {
}
render() {
- let className = "horizontal-layout"
+ let className = "horizontal-layout " + this.props.className
if (this.props.equalWidths) {
className = className + " equal" + this.props.children.length
}
@@ -25,17 +26,70 @@ class HorizontalLayout extends React.Component {
}
class Column extends React.Component {
+ static get defaultProps() {return{
+ className: ''
+ }}
+
+ constructor(props) {
+ super(props)
+ }
+
+ render() {
+ let className = "layout-column " + this.props.className
+ return (
+ <div className={className}>
+ {this.props.children}
+ </div>
+ )
+ }
+}
+
+class VerticalLayout extends React.Component {
+ static get defaultProps() {return{
+ equalWidths: false,
+ className: ''
+ }}
+
constructor(props) {
super(props)
}
render() {
+ let className = "vertical-layout " + this.props.className
+ if (this.props.equalWidths) {
+ className = className + " equal" + this.props.children.length
+ }
+ return (
+ <div className={className}>
+ {this.props.children}
+ </div>
+ )
+ }
+}
+
+class Row extends React.Component {
+ static get defaultProps() {return{
+ className: '',
+ size: 'expand',
+ gutter: ''
+ }}
+
+ constructor(props) {
+ super(props)
+ }
+
+ render() {
+ let style = {}
+ if (this.props.gutter) {
+ style = {marginBottom: this.props.gutter}
+ }
+ let className = ["layout-row", this.props.className, this.props.size].join(" ")
return (
- <div className="layout-column">
+ <div style={style} className={className}>
{this.props.children}
</div>
)
}
}
-export {HorizontalLayout, Column} \ No newline at end of file
+export {HorizontalLayout, VerticalLayout, Column, Row} \ No newline at end of file