Skip to content

Commit

Permalink
Merge pull request #89 from vaadin/fix/rename-vertical-to-orientation
Browse files Browse the repository at this point in the history 
Rename vertical attribute to orientation.
  • Loading branch information
@tomivirkki
tomivirkki committed Dec 15, 2017
2 parents 8e04ebf + f3a62b9 commit ab7ddfe
Show file tree
Hide file tree
Showing 10 changed files with 67 additions and 66 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,11 @@
-->
```html
<vaadin-split-layout>
<vaadin-split-layout vertical>
<vaadin-split-layout orientation="vertical">
<div>First layout content</div>
<div>Second layout content</div>
</vaadin-split-layout>
<vaadin-split-layout vertical>
<vaadin-split-layout orientation="vertical">
<div>Third layout content</div>
<div>Fourth layout content</div>
</vaadin-split-layout>
Expand Down
72 changes: 36 additions & 36 deletions analysis.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,39 +8,39 @@
"sourceRange": {
"file": "src/vaadin-split-layout.html",
"start": {
"line": 328,
"line": 330,
"column": 6
},
"end": {
"line": 328,
"line": 330,
"column": 42
}
},
"elements": [
{
"description": "`<vaadin-split-layout>` is a Polymer element implementing a split layout for two\ncontent elements with a draggable splitter between them.\n\n```html\n<vaadin-split-layout>\n <div>First content element</div>\n <div>Second content element</div>\n</vaadin-split-layout>\n```\n\n### Horizontal and Vertical Layouts\n\nBy default, the split is horizontal, meaning that the content elements are\npositioned side by side in a flex container with a horizontal layout.\n\nYou can change the split mode to vertical by adding the `vertical` attribute:\n\n```html\n<vaadin-split-layout vertical>\n <div>Content on the top</div>\n <div>Content on the bottom</div>\n</vaadin-split-layout>\n```\n\n### Layouts Combination\n\nFor the layout contents, we usually use `<div>` elements in the examples,\nalthough you can use any other elements as well.\n\nFor instance, in order to have a nested vertical split layout inside a\nhorizontal one, you can include `<vaadin-split-layout>` as a content element\ninside another split layout:\n\n```html\n<vaadin-split-layout>\n <div>First content element</div>\n <vaadin-split-layout vertical>\n <div>Second content element</div>\n <div>Third content element</div>\n </vaadin-split-layout>\n</vaadin-split-layout>\n```\n\nYou can also trigger the vertical mode by setting the property:\n`splitLayout.vertical = true;`.\n\n### Split Layout Element Height\n\n`<vaadin-split-layout>` element itself is a flex container. It does not inherit\nthe parent height by default, but rather sets its height depending on the\ncontent.\n\nYou can use CSS to set the fixed height for the split layout, as usual with any\nblock element:\n\n```html\n<vaadin-split-layout style=\"height: 200px;\">\n <div>First content element</div>\n <div>Second content element</div>\n</vaadin-split-layout>\n```\n\nIt is possible to define percentage height as well. Note that you have to set\nthe parent height in order to make percentages work correctly. In the following\nexample, the `<body>` is resized to fill the entire viewport, and the\n`<vaadin-split-layout>` element is set to take 100% height of the `<body>`:\n\n```html\n<body style=\"height: 100vh; margin: 0;\">\n <vaadin-split-layout style=\"height: 100%;\">\n <div>First</div>\n <div>Second</div>\n </vaadin-split-layout>\n</body>\n```\n\nAlternatively, you can use a flexbox layout to make `<vaadin-split-layout>`\nfill up the parent:\n\n```html\n<body style=\"height: 100vh; margin: 0; display: flex;\">\n <vaadin-split-layout style=\"flex: 1;\">\n <div>First</div>\n <div>Second</div>\n </vaadin-split-layout>\n</body>\n```\n\n### Initial Splitter Position\n\nThe initial splitter position is determined from the sizes of the content elements\ninside the split layout. Therefore, changing `width` on the content elements\naffects the initial splitter position for the horizontal layouts, while `height`\naffects the vertical ones.\n\nNote that when the total size of the content elements does not fit the layout,\nthe content elements are scaled proportionally.\n\nWhen setting initial sizes with relative units, such as percentages, it is\nrecommended to assing the size for both content elements:\n\n```html\n<vaadin-split-layout>\n <div style=\"width: 75%;\">Three fourths</div>\n <div style=\"width: 25%;\">One fourth</div>\n</vaadin-split-layout>\n```\n\n### Size Limits\n\nThe `min-width`/`min-height`, and `max-width`/`max-height` CSS size values\nfor the content elements are respected and used to limit the splitter position\nwhen it is dragged.\n\nIt is preferred to set the limits only for a single content element, in order\nto avoid size conflicts:\n\n```html\n<vaadin-split-layout>\n <div style=\"min-width: 50px; max-width: 150px;\">First</div>\n <div>Second</div>\n</vaadin-split-layout>\n```\n\n### Resize Notification\n\nThis element implements `IronResizableBehavior` to notify the nested resizables\nwhen the splitter is dragged. In order to define a resizable and receive that\nnotification in a nested element, include `IronResizableBehavior` and listen\nfor the `iron-resize` event.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description | Theme for Element\n----------------|----------------|----------------\n`splitter` | Split element | vaadin-split-layout\n`handle` | The handle of the splitter | vaadin-split-layout\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)",
"description": "`<vaadin-split-layout>` is a Polymer element implementing a split layout for two\ncontent elements with a draggable splitter between them.\n\n```html\n<vaadin-split-layout>\n <div>First content element</div>\n <div>Second content element</div>\n</vaadin-split-layout>\n```\n\n### Horizontal and Vertical Layouts\n\nBy default, the split's orientation is horizontal, meaning that the content elements are\npositioned side by side in a flex container with a horizontal layout.\n\nYou can change the split mode to vertical by setting the `orientation` attribute to `\"vertical\"`:\n\n```html\n<vaadin-split-layout orientation=\"vertical\">\n <div>Content on the top</div>\n <div>Content on the bottom</div>\n</vaadin-split-layout>\n```\n\n### Layouts Combination\n\nFor the layout contents, we usually use `<div>` elements in the examples,\nalthough you can use any other elements as well.\n\nFor instance, in order to have a nested vertical split layout inside a\nhorizontal one, you can include `<vaadin-split-layout>` as a content element\ninside another split layout:\n\n```html\n<vaadin-split-layout>\n <div>First content element</div>\n <vaadin-split-layout orientation=\"vertical\">\n <div>Second content element</div>\n <div>Third content element</div>\n </vaadin-split-layout>\n</vaadin-split-layout>\n```\n\nYou can also trigger the vertical mode in JavaScript by setting the property:\n`splitLayout.orientation = \"vertical\";`.\n\n### Split Layout Element Height\n\n`<vaadin-split-layout>` element itself is a flex container. It does not inherit\nthe parent height by default, but rather sets its height depending on the\ncontent.\n\nYou can use CSS to set the fixed height for the split layout, as usual with any\nblock element:\n\n```html\n<vaadin-split-layout style=\"height: 200px;\">\n <div>First content element</div>\n <div>Second content element</div>\n</vaadin-split-layout>\n```\n\nIt is possible to define percentage height as well. Note that you have to set\nthe parent height in order to make percentages work correctly. In the following\nexample, the `<body>` is resized to fill the entire viewport, and the\n`<vaadin-split-layout>` element is set to take 100% height of the `<body>`:\n\n```html\n<body style=\"height: 100vh; margin: 0;\">\n <vaadin-split-layout style=\"height: 100%;\">\n <div>First</div>\n <div>Second</div>\n </vaadin-split-layout>\n</body>\n```\n\nAlternatively, you can use a flexbox layout to make `<vaadin-split-layout>`\nfill up the parent:\n\n```html\n<body style=\"height: 100vh; margin: 0; display: flex;\">\n <vaadin-split-layout style=\"flex: 1;\">\n <div>First</div>\n <div>Second</div>\n </vaadin-split-layout>\n</body>\n```\n\n### Initial Splitter Position\n\nThe initial splitter position is determined from the sizes of the content elements\ninside the split layout. Therefore, changing `width` on the content elements\naffects the initial splitter position for the horizontal layouts, while `height`\naffects the vertical ones.\n\nNote that when the total size of the content elements does not fit the layout,\nthe content elements are scaled proportionally.\n\nWhen setting initial sizes with relative units, such as percentages, it is\nrecommended to assign the size for both content elements:\n\n```html\n<vaadin-split-layout>\n <div style=\"width: 75%;\">Three fourths</div>\n <div style=\"width: 25%;\">One fourth</div>\n</vaadin-split-layout>\n```\n\n### Size Limits\n\nThe `min-width`/`min-height`, and `max-width`/`max-height` CSS size values\nfor the content elements are respected and used to limit the splitter position\nwhen it is dragged.\n\nIt is preferred to set the limits only for a single content element, in order\nto avoid size conflicts:\n\n```html\n<vaadin-split-layout>\n <div style=\"min-width: 50px; max-width: 150px;\">First</div>\n <div>Second</div>\n</vaadin-split-layout>\n```\n\n### Resize Notification\n\nThis element implements `IronResizableBehavior` to notify the nested resizables\nwhen the splitter is dragged. In order to define a resizable and receive that\nnotification in a nested element, include `IronResizableBehavior` and listen\nfor the `iron-resize` event.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description | Theme for Element\n----------------|----------------|----------------\n`splitter` | Split element | vaadin-split-layout\n`handle` | The handle of the splitter | vaadin-split-layout\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)",
"summary": "",
"path": "src/vaadin-split-layout.html",
"properties": [
{
"name": "vertical",
"type": "boolean",
"description": "Change the split layout to vertical",
"name": "orientation",
"type": "string",
"description": "The split layout's orientation. Possible values are: `horizontal|vertical`.",
"privacy": "public",
"sourceRange": {
"start": {
"line": 235,
"line": 237,
"column": 12
},
"end": {
"line": 239,
"line": 241,
"column": 13
}
},
"metadata": {
"polymer": {}
},
"defaultValue": "false"
"defaultValue": "\"horizontal\""
},
{
"name": "_previousPrimaryPointerEvents",
Expand All @@ -49,11 +49,11 @@
"privacy": "protected",
"sourceRange": {
"start": {
"line": 241,
"line": 243,
"column": 12
},
"end": {
"line": 241,
"line": 243,
"column": 49
}
},
Expand All @@ -68,11 +68,11 @@
"privacy": "protected",
"sourceRange": {
"start": {
"line": 242,
"line": 244,
"column": 12
},
"end": {
"line": 242,
"line": 244,
"column": 51
}
},
Expand Down Expand Up @@ -146,11 +146,11 @@
"privacy": "protected",
"sourceRange": {
"start": {
"line": 246,
"line": 248,
"column": 8
},
"end": {
"line": 249,
"line": 251,
"column": 9
}
},
Expand All @@ -163,11 +163,11 @@
"privacy": "protected",
"sourceRange": {
"start": {
"line": 251,
"line": 253,
"column": 8
},
"end": {
"line": 263,
"line": 265,
"column": 9
}
},
Expand All @@ -180,11 +180,11 @@
"privacy": "protected",
"sourceRange": {
"start": {
"line": 265,
"line": 267,
"column": 8
},
"end": {
"line": 272,
"line": 274,
"column": 9
}
},
Expand All @@ -207,11 +207,11 @@
"privacy": "protected",
"sourceRange": {
"start": {
"line": 274,
"line": 276,
"column": 8
},
"end": {
"line": 281,
"line": 283,
"column": 9
}
},
Expand All @@ -228,11 +228,11 @@
"privacy": "protected",
"sourceRange": {
"start": {
"line": 283,
"line": 285,
"column": 8
},
"end": {
"line": 286,
"line": 288,
"column": 9
}
},
Expand All @@ -245,11 +245,11 @@
"privacy": "protected",
"sourceRange": {
"start": {
"line": 288,
"line": 290,
"column": 8
},
"end": {
"line": 313,
"line": 315,
"column": 9
}
},
Expand Down Expand Up @@ -295,11 +295,11 @@
"metadata": {},
"sourceRange": {
"start": {
"line": 217,
"line": 218,
"column": 6
},
"end": {
"line": 321,
"line": 323,
"column": 7
}
},
Expand All @@ -308,20 +308,20 @@
"name": "Vaadin.SplitLayoutElement",
"attributes": [
{
"name": "vertical",
"description": "Change the split layout to vertical",
"name": "orientation",
"description": "The split layout's orientation. Possible values are: `horizontal|vertical`.",
"sourceRange": {
"start": {
"line": 235,
"line": 237,
"column": 12
},
"end": {
"line": 239,
"line": 241,
"column": 13
}
},
"metadata": {},
"type": "boolean"
"type": "string"
}
],
"events": [
Expand All @@ -343,11 +343,11 @@
"range": {
"file": "src/vaadin-split-layout.html",
"start": {
"line": 60,
"line": 61,
"column": 4
},
"end": {
"line": 60,
"line": 61,
"column": 45
}
}
Expand All @@ -358,11 +358,11 @@
"range": {
"file": "src/vaadin-split-layout.html",
"start": {
"line": 64,
"line": 65,
"column": 4
},
"end": {
"line": 64,
"line": 65,
"column": 49
}
}
Expand Down
4 changes: 2 additions & 2 deletions demo/split-layout-basic-demos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h3>Horizontal Split Layout (Default)</h3>
<h3>Vertical Split Layout</h3>
<vaadin-demo-snippet id='split-layout-basic-demos-vertical-split-layout'>
<template preserve-content>
<vaadin-split-layout vertical>
<vaadin-split-layout orientation="vertical">
<div>Top content element</div>
<div>Bottom content element</div>
</vaadin-split-layout>
Expand All @@ -34,7 +34,7 @@ <h3>Layout Combination</h3>
<template preserve-content>
<vaadin-split-layout>
<div>First content element</div>
<vaadin-split-layout vertical>
<vaadin-split-layout orientation="vertical">
<div>Second content element</div>
<div>Third content element</div>
</vaadin-split-layout>
Expand Down
6 changes: 3 additions & 3 deletions demo/split-layout-valo-theme-demos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h3>Default</h3>
<div></div>
</vaadin-split-layout>

<vaadin-split-layout vertical>
<vaadin-split-layout orientation="vertical">
<div></div>
<div></div>
</vaadin-split-layout>
Expand All @@ -44,7 +44,7 @@ <h3>Small</h3>
<div></div>
</vaadin-split-layout>

<vaadin-split-layout vertical theme="small">
<vaadin-split-layout orientation="vertical" theme="small">
<div></div>
<div></div>
</vaadin-split-layout>
Expand All @@ -68,7 +68,7 @@ <h3>Subtle</h3>
<div></div>
</vaadin-split-layout>

<vaadin-split-layout vertical theme="subtle">
<vaadin-split-layout orientation="vertical" theme="subtle">
<div></div>
<div></div>
</vaadin-split-layout>
Expand Down
Loading

0 comments on commit ab7ddfe

Please sign in to comment.