diff --git a/docs/component_template.html b/docs/component_template.html index a3a44d79..f9da4065 100644 --- a/docs/component_template.html +++ b/docs/component_template.html @@ -13,7 +13,7 @@

{{name}}

Example HTML Editor

-
{{example}}
+
{{example}}
@@ -167,9 +167,8 @@

Related Articles

docsShell.addEventListener("docs-nav-selected", navigateToPage); - editor = ace.edit("editor-{{name}}"); + editor = ace.edit("editor"); editor.setTheme("ace/theme/chrome"); - editor.session.setUseWrapMode(true); editor.session.setMode("ace/mode/html"); editor.getSession().on('change', _.debounce(update, 500)); diff --git a/docs/docs.scss b/docs/docs.scss index 4dc347e2..48983606 100644 --- a/docs/docs.scss +++ b/docs/docs.scss @@ -239,7 +239,7 @@ section:last-child { min-height: 300px; } -.editor { +#editor { position: absolute; z-index: 0; top:0; diff --git a/docs/head.html b/docs/head.html index 12ae9f61..7eb9f70a 100644 --- a/docs/head.html +++ b/docs/head.html @@ -4,16 +4,17 @@ - + Strand Web Components + - - - - - - + + + + + + \ No newline at end of file diff --git a/src/mm-docs-shell/index.html b/src/mm-docs-shell/index.html index 01912f1e..947b4594 100644 --- a/src/mm-docs-shell/index.html +++ b/src/mm-docs-shell/index.html @@ -1,135 +1,419 @@ - - - - - - - - - - - - - - - - - - Articles - Some Article Title 01 - Some Article Title 02 - Some Article Title 03 - Some Article Title 04 - Some Article Title 05 - Some Article Title 06 - Some Article Title 07 - Some Article Title 08 - Some Article Title 09 - Some Article Title 10 - - - Components - Some Component 01 - Some Component 02 - Some Component 03 - Some Component 04 - Some Component 05 - Some Component 06 - Some Component 07 - Some Component 08 - Some Component 09 - Some Component 10 - Some Component 11 - Some Component 12 - Some Component 13 - Some Component 14 - Some Component 15 - Some Component 16 - Some Component 17 - Some Component 18 - Some Component 19 - Some Component 20 - - -
-
-
- Phasellus dignissim vel orci at sodales. Suspendisse potenti. Integer at euismod leo. Pellentesque commodo molestie faucibus. Cras accumsan lectus non neque maximus, in suscipit nisi molestie. Vestibulum lacinia dolor a tortor faucibus, a blandit enim finibus. Nam fermentum non lectus lacinia fringilla. Duis vitae dui arcu. Nulla ornare, eros vel malesuada vulputate, urna leo malesuada neque, finibus sodales dui arcu sed dui. Vivamus magna ante, dapibus eget sem eu, mattis interdum turpis. -
-
- Aenean nec justo lacinia, fringilla tellus nec, dignissim libero. Curabitur magna massa, iaculis sit amet condimentum sed, sollicitudin vel eros. Aliquam in varius mi. Maecenas ullamcorper purus eu risus sodales, vitae imperdiet lorem tristique. Fusce sed efficitur elit. Mauris dignissim dignissim lectus ac maximus. Sed eu congue nisl, at sollicitudin orci. Donec suscipit vehicula sem id dapibus. Nunc quis nunc vitae velit sodales auctor faucibus ac orci. Nulla fringilla ut mauris eu pretium. Maecenas accumsan quam vel sem malesuada, commodo suscipit arcu fringilla. -
-
- Pellentesque vulputate, leo consequat gravida interdum, arcu orci fermentum urna, sed pulvinar augue est vel felis. Quisque eget viverra libero, id finibus nisl. Nulla posuere ex massa. Sed convallis mi nulla, a volutpat lacus malesuada vitae. Duis laoreet, ligula vel scelerisque sagittis, justo lacus mollis dui, ac pharetra elit enim in dui. Cras nec dolor in neque eleifend efficitur sit amet in dui. Maecenas vulputate odio non accumsan dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. -
-
- Cras eu semper purus. Vivamus nec enim ipsum. Suspendisse semper ut justo a laoreet. Duis erat erat, vehicula id finibus in, iaculis et odio. Integer leo elit, pharetra non aliquet rutrum, dictum et odio. Vivamus id purus a nisi scelerisque eleifend. Sed laoreet orci in nunc aliquet, eu pellentesque ligula sodales. Maecenas porttitor egestas turpis, quis ultricies massa gravida ut. + + + + + + + + + + Strand Web Components + + + + + + + + + + + + + + + Articles + Getting Started + Introducing Data Components + Using MM-Ajax + Using MM-Sync + Creating Adapters + Introduction to mm-grid + Configuring mm-grid + Data Integration with mm-grid + + + Components + mm-action + mm-ajax + mm-autocomplete + mm-button + mm-calendar + mm-checkbox + mm-collection + mm-datepicker + mm-dialog + mm-drawer + mm-dropdown + mm-footer + mm-grid-column + mm-grid-item + mm-grid + mm-group + mm-header + mm-icon + mm-inline-box + mm-input-mask + mm-input + mm-loader + mm-localstore + mm-menu + mm-modal + mm-model + mm-popover + mm-progress-bar + mm-pulldown-button + mm-radio + mm-scroll-panel + mm-spinner + mm-sync + mm-tab + mm-tabs + mm-textarea + mm-tooltip + + +
+
+
+
+

Powered By

+
-
- Suspendisse pulvinar lorem enim, sed euismod ligula fermentum nec. Quisque magna sem, iaculis vehicula massa sit amet, malesuada ullamcorper orci. Aliquam eu sagittis libero. Etiam eget purus pharetra, bibendum purus et, finibus elit. Curabitur nunc orci, tincidunt at lacus sit amet, faucibus tincidunt nisl. Nullam sodales euismod lacus non tempor. Curabitur ut erat eget nibh efficitur rhoncus nec eget massa. Aliquam euismod felis sed pharetra gravida. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus eu enim elementum leo condimentum volutpat. +
+
-
-
-
-
-
-
-

Powered By

- -
-
- +

©2015 Strand Authors. Code licensed under the BSD License. Documentation licensed under CC BY 3.0.

+
+
+
+
+

mm-dropdown

+

A fully-styled dropdown list containing multiple options.

+
+
+

Example HTML Editor

+
+
<!-- Default Example --> <mm-dropdown> <mm-list-item>Example 1</mm-list-item> <mm-list-item>Example 2</mm-list-item> <mm-list-item>Example 3</mm-list-item> <mm-list-item>Example 4</mm-list-item> </mm-dropdown> <!-- Search and Fit to Parent Example --> <mm-dropdown search="true" fitparent="true"> <mm-input search="true" clear="true" placeholder="Search"></mm-input> <mm-list-item>Example 1</mm-list-item> <mm-list-item>Example 2</mm-list-item> <mm-list-item>Example 3</mm-list-item> <mm-list-item>Example 4</mm-list-item> </mm-dropdown> <!-- Data Dropdown Example --> <mm-dropdown id="dataDdl" placeholder="Data Dropdown"></mm-dropdown> <script> window.addEventListener("WebComponentsReady", function(e) { var dataDdl = document.querySelector("#dataDdl"); dataDdl.data = [ { value: "1", name: "Item Number 1" }, { value: "2", name: "Item Number 2" }, { value: "3", name: "Item Number 3" } ]; }); </script>
-

© 2015 Strand Authors. Code licensed under the BSD License. Documentation licensed under CC BY 3.0.

-
- - - + +
+
+

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeOptions
+ placeholder : String (Optional) + Default value: Select + Default text which appears on the dropdown button ('Select One'). + none
+ overflow : String (Optional) + Default value: hidden + Allows long list items to overflow when the list is opened. + 'hidden''visible' +
+ overflowWidth : Number (Optional) + Default value: 0 + If set, will adjust the overflow container's width in pixels. Otherwise use the internal item width + none
+ maxitems : Int (Optional) + Default value: none + The maximum viewable number of items to display in the list, others will be hidden and wil incur scrolling. + none
+ fitparent : Boolean (Optional) + Default value: null + Instructs the component to fit to its parent container's width (percent or pixel width). + none
+ disabled : Boolean (Optional) + Default value: false + Disable the item + none
+
+
+

Public Methods

+ + + + + + + + + + + + + + + + + + + + + + + + + +
MethodArguements
+ open() + Expand the dropdown. + + none +
+ close() + Collapse the dropdown. + + none +
+ toggle() + Close dropdown if it is open, otherwise open it. + + none +
+ reset() + Reset dropdown to default state. + + none +
+ bindModel(modelproperty) + Bind a property on the given model to the input's value. + + + model : Object + Default value: undefined + The model object to update with value changes. If the model has a '.set()' method, .set(property, inputValue) will be used (otherwise the property field of the model will be assigned directly). + + + property : String + Default value: undefined + The property on the model that should be bound to the input's value. + +
+
+
+

Public Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertiesOptions
+ data : Array + Default value: null + Array of value / label objects for data-driven dropdown (eg. [{value: '0', label:'Item Label'}, ...]). Setting this will override any internal mm-list-items. + none
+ placeholder : String + Default value: Select + Default text which appears on the dropdown button ('Select'). + none
+ value : String + Default value: null + The current value of the selected item. + none
+ maxItems : Number + Default value: null + The maximum number of items the dropdown will show before scrolling is enabled (zero and null indicate 'unlimited'). + none
+ state : String + Default value: 'closed' + The state of the dropdown (may be 'opened' or 'closed'). + none
+ fit : Boolean + Default value: false + Whether or not the dropdown should scale itself to fit the width of it's parent. + none
+ error : Boolean + Default value: false + Triggers the display of invalid visual state. + none
+
+
+

Events

+ + + + + + + + + +
EventEvent Detail
+ Type : 'changed' + + + + value : String + Value of the selected item, usually it's label + +
+
+ +
+ + + - + } + + + \ No newline at end of file