diff --git a/ui/controls/autocomplete.md b/ui/controls/autocomplete.md index d9fe73af..ad61ac9a 100644 --- a/ui/controls/autocomplete.md +++ b/ui/controls/autocomplete.md @@ -4,11 +4,23 @@ Autocomplete control. - +```html + +``` + +```backend + +``` ## JavaScript API diff --git a/ui/controls/button.md b/ui/controls/button.md index b5a78854..87ac5942 100644 --- a/ui/controls/button.md +++ b/ui/controls/button.md @@ -6,58 +6,120 @@ Use the button classes on an ``, ` - - +```html +Link + + + +``` + +```backend +Link + + + +``` ### Options Use any of the available button classes to quickly create a styled button. - - +```html + + - - + + - - + + - - + + - - + + - - + + - - + + +``` + +```backend + + + + + + + + + + + + + + + + + + + + +``` ### Sizes Fancy larger or smaller buttons? Add `.btn-lg`, `.btn-sm`, or `.btn-xs` for additional sizes. -

- - -

-

- - -

-

- - -

-

- - -

+```html +

+ + +

+

+ + +

+

+ + +

+

+ + +

+``` + +```backend +

+ + +

+

+ + +

+

+ + +

+

+ + +

+``` Create block level buttons—those that span the full width of a parent— by adding .btn-block. - - +```html + + +``` + +```backend + + +``` diff --git a/ui/controls/callout.md b/ui/controls/callout.md index fbf84901..40667120 100644 --- a/ui/controls/callout.md +++ b/ui/controls/callout.md @@ -4,60 +4,117 @@ Displays a detailed message to the user, also allowing it to be dismissed. -
- -
- -

Warning warning

-

My arms are flailing wildly

-
-
-

Insert coin(s) to begin play

-
+```html +
+ +
+ +

Warning warning

+

My arms are flailing wildly

+
+

Insert coin(s) to begin play

+
+
+``` + +```backend +
+ +
+ +

Warning warning

+

My arms are flailing wildly

+
+
+

Insert coin(s) to begin play

+
+
+``` ### No sub-header Include the `no-subheader` class to omit the sub heading. -
-
- -

Incoming unicorn

-
+```html +
+
+ +

Incoming unicorn

+
+``` + +```backend +
+
+ +

Incoming unicorn

+
+
+``` ### No icon Include the `no-icon` class to omit the icon. -
-
-

There was a hull breach

-
    -
  • Get to the chopper
    • -
-
+```html +
+
+

There was a hull breach

+
    +
  • Get to the chopper
    • +
+
+
+``` + +```backend +
+
+

There was a hull breach

+
    +
  • Get to the chopper
    • +
+
+``` ### No header -
-
-

Something good happened

-
    -
  • You found a pony
    • -
-
+```html +
+
+

Something good happened

+
    +
  • You found a pony
    • +
+
+
+``` + +```backend +
+
+

Something good happened

+
    +
  • You found a pony
    • +
+
+``` ### Data attributes: -- data-dismiss="callout" - when assigned to an element, the callout hides on click +- `data-dismiss="callout"` - when assigned to an element, the callout hides on click ## JavaScript API diff --git a/ui/controls/chart.md b/ui/controls/chart.md index a9c14152..3659d5a4 100644 --- a/ui/controls/chart.md +++ b/ui/controls/chart.md @@ -4,17 +4,33 @@ The pie chart outputs information as a circle diagram, with optional label in the center. Example markup: -
-
    -
  • Label 1 100
    • -
  • Label 2 100
    • -
  • Label 3 100
    • -
-
+```html +
+
    +
  • Label 1 100
    • +
  • Label 2 100
    • +
  • Label 3 100
    • +
+
+``` + +```backend +
+
    +
  • Label 1 100
    • +
  • Label 2 100
    • +
  • Label 3 100
    • +
+
+``` ![image](https://raw.githubusercontent.com/wintercms/docs/develop/images/traffic-sources.png) @@ -22,18 +38,35 @@ The pie chart outputs information as a circle diagram, with optional label in th The next example shows a line chart markup. Data sets are defined with the SPAN elements inside the chart element. -
- - -
+```html +
+ + +
+``` + +```backend +
+ + +
+``` ![image](https://raw.githubusercontent.com/wintercms/docs/develop/images/line-chart.png) @@ -41,46 +74,89 @@ The next example shows a line chart markup. Data sets are defined with the SPAN The next example shows a bar chart markup. The **wrap-legend** class is optional, it manages the legend layout. The **data-height** and **data-full-width** attributes are optional as well. -
-
    -
  • Label 1 100
    • -
  • Label 2 100
    • -
  • Label 3 100
    • -
-
+```html +
+
    +
  • Label 1 100
    • +
  • Label 2 100
    • +
  • Label 3 100
    • +
+
+``` + +```backend +
+
    +
  • Label 1 100
    • +
  • Label 2 100
    • +
  • Label 3 100
    • +
+
+``` ![image](https://raw.githubusercontent.com/wintercms/docs/develop/images/bar-chart.png) # Example -
-
    -
  • Label 1 100
    • -
  • Label 2 100
    • -
  • Label 3 100
    • -
-
- -
-
    -
  • Label 1 100
    • -
  • Label 2 100
    • -
  • Label 3 100
    • -
-
- +```html +
+
    +
  • Label 1 100
    • +
  • Label 2 100
    • +
  • Label 3 100
    • +
+
+ +
+
    +
  • Label 1 100
    • +
  • Label 2 100
    • +
  • Label 3 100
    • +
+
+``` + +```backend +
+
    +
  • Label 1 100
    • +
  • Label 2 100
    • +
  • Label 3 100
    • +
+
+ +
+
    +
  • Label 1 100
    • +
  • Label 2 100
    • +
  • Label 3 100
    • +
+
+``` ## Status list @@ -88,36 +164,74 @@ A list of statuses and values # Example -
-
    -
  • - - Software is up to date - Update -
    • - -
  • - - Some issues need attention - View -
    • - -
  • - - System build - 313 -
    • - -
  • - - Event log items - 200 -
    • - -
  • - - Online since - 4th April 2014 -
    • -
-
+```html +
+
    +
  • + + Software is up to date + Update +
    • + +
  • + + Some issues need attention + View +
    • + +
  • + + System build + 313 +
    • + +
  • + + Event log items + 200 +
    • + +
  • + + Online since + 4th April 2014 +
    • +
+
+``` + +```backend +
+
    +
  • + + Software is up to date + Update +
    • + +
  • + + Some issues need attention + View +
    • + +
  • + + System build + 313 +
    • + +
  • + + Event log items + 200 +
    • + +
  • + + Online since + 4th April 2014 +
    • +
+
+``` diff --git a/ui/controls/checkbox.md b/ui/controls/checkbox.md index 7167d823..060167a2 100644 --- a/ui/controls/checkbox.md +++ b/ui/controls/checkbox.md @@ -4,99 +4,208 @@ Allows a user to select from a small set of binary options. -
- - -
+```html +
+ + +
+``` + +```backend +
+ + +
+``` ### Checkbox lists Allows a user to select from a list of binary options. -
- -
- -
-
- -
-
- -
+```html +
+ +
+ +
+
+ +
+
+ +
+
+ +
+

What cars would you like in your garage?

+
+ + +

Do not send new comment notifications.

+
+
+ + +

Send new comment notifications only to post author.

- -
-

What cars would you like in your garage?

-
- - -

Do not send new comment notifications.

-
-
- - -

Send new comment notifications only to post author.

-
-
- - -

Notify all users who have permissions to receive blog notifications.

-
+
+ + +

Notify all users who have permissions to receive blog notifications.

+
+``` + +```backend +
+ +
+ +
+
+ +
+
+ +
+
+ +
+

What cars would you like in your garage?

+
+ + +

Do not send new comment notifications.

+
+
+ + +

Send new comment notifications only to post author.

+
+
+ + +

Notify all users who have permissions to receive blog notifications.

+
+
+
+
+``` ### Indeterminate checkboxes -
- - -
+```html +
+ + +
+``` + +```backend +
+ + +
+``` The `data-checked` attribute may have one of three values: 0 (off), 1 (indeterminate) or 2 (on). ### Radio -
- - -
-
- - -
-
- - -
+```html +
+ + +
+
+ + +
+
+ + +
+``` + +```backend +
+ + +
+
+ + +
+
+ + +
+``` ### Slider - +```html + +``` + +```backend + +``` ### Balloon selector -
-
    -
  • One
    • -
  • Two
    • -
  • Three
    • -
- - -
+```html +
+
    +
  • One
    • +
  • Two
    • +
  • Three
    • +
+ + +
+``` + +```backend +
+
    +
  • One
    • +
  • Two
    • +
  • Three
    • +
+ + +
+``` If you don't define `data-control="balloon-selector"` then the control will act as a static list of labels. -
-
    -
  • Monday
    • -
  • Tuesday
    • -
  • Happy days!
    • -
-
+```html +
+
    +
  • Monday
    • +
  • Tuesday
    • +
  • Happy days!
    • +
+
+``` + +```backend +
+
    +
  • Monday
    • +
  • Tuesday
    • +
  • Happy days!
    • +
+
+``` diff --git a/ui/controls/datepicker.md b/ui/controls/datepicker.md index bc88edfa..3a919a6d 100644 --- a/ui/controls/datepicker.md +++ b/ui/controls/datepicker.md @@ -6,70 +6,142 @@ Renders a date picker, time picker, or both. The input associated to each contro ### Date Picker -
- - - - - -
+```html +
+ + + + + +
+``` + +```backend +
+ + + + + +
+``` ### Time Picker -
- - - - - -
+```html +
+ + + + + +
+``` + +```backend +
+ + + + + +
+``` ### Date & Time Picker -
-
-
- - -
-
- - -
+```html +
+
+
+ + +
+
+ +
+
+ + + +
+``` - - +```backend +
+
+
+ + +
+
+ + +
+ + +
+``` + ## Locale and timezone handling The date picker handles timezone and locale preferences automatically. Locale preferences will provide the date format for the region. The timezone setting is used to convert the chosen value to a uniform timezone, commonly UTC. These features are not enabled by default and require adding `` tags to the page. @@ -82,15 +154,15 @@ The date picker handles timezone and locale preferences automatically. Locale pr When a date is selected, it will be converted from the `backend-timezone` to the `app-timezone` for normalized storage. -> **Note**: Locale values are supplied by the Moment.js library. +> **NOTE**: Locale values are supplied by the Moment.js library. ## Supported data attributes -- data-control="datepicker" - enables the plugin on an element -- data-format="YYYY-MM-DD" - display format -- data-min-date="value" - minimum date to allow -- data-max-date="value" - maximum date to allow -- data-year-range="10" - range of years to display +- `data-control="datepicker"` - enables the plugin on an element +- `data-format="YYYY-MM-DD"` - display format +- `data-min-date="value"` - minimum date to allow +- `data-max-date="value"` - maximum date to allow +- `data-year-range="10"` - range of years to display ## JavaScript API diff --git a/ui/controls/dropdown.md b/ui/controls/dropdown.md index d6c47efc..4233784e 100644 --- a/ui/controls/dropdown.md +++ b/ui/controls/dropdown.md @@ -2,42 +2,82 @@ Customized dropdown menu ### Small dropdown -
- Add small +```html +
+ Add small - -
+ +
+``` + +```backend +
+ Add small + + +
+``` ### Drop "up" Add the `dropup` class to the dropdown container and the dropdown will appear in an upward direction. -
- ... -
+```html +
+ ... +
+``` ### Large dropdown -
- Add large - - -
+```html +
+ Add large + + +
+``` + +```backend +
+ Add large + + +
+``` diff --git a/ui/controls/filter.md b/ui/controls/filter.md index bf9ca2f3..41b2c7df 100644 --- a/ui/controls/filter.md +++ b/ui/controls/filter.md @@ -6,49 +6,71 @@ # Example -
- - - - Categories: - all - - - - - Statuses: - 2 - - - -
- - -
+```html +
+ + + Categories: + all + + + + Statuses: + 2 + + + +
+ +
+
+ + +``` + +```backend +
+ + + Categories: + all + - \ No newline at end of file + + + Statuses: + 2 + + + +
+ + +
+
+``` diff --git a/ui/controls/flashmessage.md b/ui/controls/flashmessage.md index 602c4844..2946a162 100644 --- a/ui/controls/flashmessage.md +++ b/ui/controls/flashmessage.md @@ -10,54 +10,74 @@ Displays a floating flash message on the screen.

``` +```html

This message is created from a static element. It will go away in 5 seconds.

- -
- +``` ### Trigger -

- - Show Success - +```html +

+ + Show Success + + + + Show Error + + + + Show Warning + +

+``` - - Show Error - +### Display static - - Show Warning - -

+A flash message can be rendered as a static element by attaching the `static` class. The `data-control` attribute is not needed. +```html +

+ Import completed successfully (success) +

-### Display static +

+ Informative info box is informational (info) +

-A flash message can be rendered as a static element by attaching the `static` class. The `data-control` attribute is not needed. +

+ Phasers have been set to stun (warning) +

-

- Import completed successfully (success) -

+

+ We couldn't help you with that (error) +

+``` -

- Informative info box is informational (info) -

+```backend +

+ Import completed successfully (success) +

-

- Phasers have been set to stun (warning) -

+

+ Informative info box is informational (info) +

+ +

+ Phasers have been set to stun (warning) +

-

- We couldn't help you with that (error) -

+

+ We couldn't help you with that (error) +

+``` ### Data attributes -- data-control="flash-message" - enables the flash message plugin -- data-interval="2" - the interval to display the message in seconds, optional. Default: 2 +- `data-control="flash-message"` - enables the flash message plugin +- `data-interval="2"` - the interval to display the message in seconds, optional. Default: 2 ### JavaScript API diff --git a/ui/controls/inspector.md b/ui/controls/inspector.md index cc2a2ba3..b3491629 100644 --- a/ui/controls/inspector.md +++ b/ui/controls/inspector.md @@ -721,4 +721,4 @@ $(document).on('hiding.oc.inspector', 'div[data-inspectable]', function(ev, data ### hidden.oc.inspector -The `hidden.oc.inspector` is triggered after Inspector is hidden. \ No newline at end of file +The `hidden.oc.inspector` is triggered after Inspector is hidden. diff --git a/ui/controls/list.md b/ui/controls/list.md index 736bc1e2..a6c3f4f5 100644 --- a/ui/controls/list.md +++ b/ui/controls/list.md @@ -61,312 +61,624 @@ A list should be a standard `` element with the classes of `table` and `d ### Complete example -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - -
- 		TitleCreatedAuthorCategoriesPublishedUpdated
-
- - -
- 		Welcome to WinterOct 01, 2013Adam PersonNewsOct 01, 2013Oct 01, 2013 
-
- -
- 		The marketplace is open!Oct 15, 2013Sam GeorgesFeaturesOct 16, 2013Oct 16, 2013 
-
- - -
- 		Welcome to the Builder!Oct 21, 2013Alexey BobkovNews, FeaturesOct 21, 2013Oct 21, 2013 
-
- - -
- 		Components explainedNov 12, 2013Alexey BobkovTutorialsNov 12, 2013Nov 12, 2013 
-
- - -
- 		Creating a module in 90 secondsNov 15, 2013Sam GeorgesTutorialsNov 15, 2013Nov 15, 2013 
-
-
-
- 1-5 of 20 - -
+```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+ 		TitleCreatedAuthorCategoriesPublishedUpdated
+
+ + +
+ 		Welcome to WinterOct 01, 2013Adam PersonNewsOct 01, 2013Oct 01, 2013 
+
+ +
+ 		The marketplace is open!Oct 15, 2013Sam GeorgesFeaturesOct 16, 2013Oct 16, 2013 
+
+ + +
+ 		Welcome to the Builder!Oct 21, 2013Alexey BobkovNews, FeaturesOct 21, 2013Oct 21, 2013 
+
+ + +
+ 		Components explainedNov 12, 2013Alexey BobkovTutorialsNov 12, 2013Nov 12, 2013 
+
+ + +
+ 		Creating a module in 90 secondsNov 15, 2013Sam GeorgesTutorialsNov 15, 2013Nov 15, 2013 
+
+
+
+ 1-5 of 20 +
+
+``` + +```backend +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+ 		TitleCreatedAuthorCategoriesPublishedUpdated
+
+ + +
+ 		Welcome to WinterOct 01, 2013Adam PersonNewsOct 01, 2013Oct 01, 2013 
+
+ +
+ 		The marketplace is open!Oct 15, 2013Sam GeorgesFeaturesOct 16, 2013Oct 16, 2013 
+
+ + +
+ 		Welcome to the Builder!Oct 21, 2013Alexey BobkovNews, FeaturesOct 21, 2013Oct 21, 2013 
+
+ + +
+ 		Components explainedNov 12, 2013Alexey BobkovTutorialsNov 12, 2013Nov 12, 2013 
+
+ + +
+ 		Creating a module in 90 secondsNov 15, 2013Sam GeorgesTutorialsNov 15, 2013Nov 15, 2013 
+
+
+
+ 1-5 of 20 + +
+
+
+
+``` ### Empty list Use the `no-data` class to display a list that contains no records. -
- - - - - - - - - - - - -
TitleCreated
-

- There are no records in this view. -

-
-
+```html +
+ + + + + + + + + + + + +
TitleCreated
+

+ There are no records in this view. +

+
+
+``` + +```backend +
+ + + + + + + + + + + + +
TitleCreated
+

+ There are no records in this view. +

+
+
+``` ### Row classes The following colored classes are available to use on the table row elements. -
- - - - - - - - - - - - - - - - - - -
Class
Normal text
.strike
.frozen
.processing
.negative
.positive
.disabled / .deleted
.new / .important
.safe / .special
-
+```html +
+ + + + + + + + + + + + + + + + + + +
Class
Normal text
.strike
.frozen
.processing
.negative
.positive
.disabled / .deleted
.new / .important
.safe / .special
+
+``` + +```backend +
+ + + + + + + + + + + + + + + + + + +
Class
Normal text
.strike
.frozen
.processing
.negative
.positive
.disabled / .deleted
.new / .important
.safe / .special
+
+``` ### Status column It might be fun to include a status column! -
- - - - - - - - - - - - - - - - - - - - - - - - - -
StatusTitle
- - Draft - - Welcome to Winter
- - Pending - - What a wonderful day
- - Approved - - The sun is shining
- - Cancelled - - The weather is sweet here
-
+```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
StatusTitle
+ + Draft + + Welcome to Winter
+ + Pending + + What a wonderful day
+ + Approved + + The sun is shining
+ + Cancelled + + The weather is sweet here
+
+``` +```backend +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
StatusTitle
+ + Draft + + Welcome to Winter
+ + Pending + + What a wonderful day
+ + Approved + + The sun is shining
+ + Cancelled + + The weather is sweet here
+
+``` ### Badge column You can also include an icon badge inside a column. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
StatusTitle
- - - - Draft - Welcome to Winter
- - - - Pending - What a wonderful day
- - - - Approved - The sun is shining
- - - - Cancelled - The weather is sweet here
-
+```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
StatusTitle
+ + + + Draft + Welcome to Winter
+ + + + Pending + What a wonderful day
+ + + + Approved + The sun is shining
+ + + + Cancelled + The weather is sweet here
+
+``` + +```backend +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
StatusTitle
+ + + + Draft + Welcome to Winter
+ + + + Pending + What a wonderful day
+ + + + Approved + The sun is shining
+ + + + Cancelled + The weather is sweet here
+
+``` ### Linking rows You may link an entire row by adding the `data-control="rowlink"` attribute to the table element. The first table data (TD) column with an anchor will be used to link the entire row. To bypass this behavior, simply add the `nolink` class to the column. -
- - - - - - - - - -
- Link to this - Row will be linkedThis will also be linkedNo link applied here
-
+```html +
+ + + + + + + + + +
+ Link to this + Row will be linkedThis will also be linkedNo link applied here
+
+``` + +```backend +
+ + + + + + + + + +
+ Link to this + Row will be linkedThis will also be linkedNo link applied here
+
+``` ### Button column You may add a small button to a list column by adding the `column-button` class to the table data (TD) element. -
- - - - - - - - - - - - - -
ActionName
- - Open Google - - - - Petoria - -
-
+```html +
+ + + + + + + + + + + + + +
ActionName
+ + Open Google + + + + Petoria + +
+
+``` + +```backend +
+ + + + + + + + + + + + + +
ActionName
+ + Open Google + + + + Petoria + +
+
+``` diff --git a/ui/controls/loader.md b/ui/controls/loader.md index 138ea90f..d972f459 100644 --- a/ui/controls/loader.md +++ b/ui/controls/loader.md @@ -5,87 +5,181 @@ #### Loading Indicator A loading indicator used in a container. -
-
- -
-

This is some content inside the container

-

The loading indicator must be prepended to it

+```html +
+
+
+

This is some content inside the container

+

The loading indicator must be prepended to it

+
+``` + +```backend +
+
+ +
+

This is some content inside the container

+

The loading indicator must be prepended to it

+
+``` #### Text Loading Indicator A loading indicator can have text by adding a `
` element inside. -
-
- -
Loading...
-
+```html +
+
+ +
Loading...
+
+
+``` + +```backend +
+
+ +
Loading...
+
+``` #### Loading Indicator Sizes A loading indicator can have a size by adding `size-X` to the container. These sizes are available: **size-small**. -
-
- -
Loading (size-small)
-
+```html +
+
+ +
Loading (size-small)
+
+``` + +```backend +
+
+ +
Loading (size-small)
+
+
+``` #### Loading Indicator Alignment A loading indicator can be aligned to the center by adding `indicator-center` to the container and/or indicator. -
-
- -
+```html +
+
+
+
+``` + +```backend +
+
+ +
+
+``` You may add some optional text: -
-
- -
Loading...
-
+```html +
+
+ +
Loading...
+
+
+``` + +```backend +
+
+ +
Loading...
+
+``` # Example -
-
- -
-

This is some content inside the container

-

The loading indicator must be prepended to it

+```html +
+
+ +
+

This is some content inside the container

+

The loading indicator must be prepended to it

+
+ +
+
+ +
Loading...
+
+
+ +
+
+ +
Loading (inset)
+
+
+ +
+
+ +
Loading (size-small)
+
-
-
- -
Loading...
-
+
+
+ +
+
+``` + +```backend +
+
+ +
+

This is some content inside the container

+

The loading indicator must be prepended to it

+
+ +
+
+ +
Loading...
+
-
-
- -
Loading (inset)
-
+
+
+ +
Loading (inset)
+
-
-
- -
Loading (size-small)
-
+
+
+ +
Loading (size-small)
+
-
-
- -
+
+
+
+
+``` diff --git a/ui/controls/popover.md b/ui/controls/popover.md index 15df3147..e4e353a0 100644 --- a/ui/controls/popover.md +++ b/ui/controls/popover.md @@ -8,13 +8,15 @@ Renders a richer version of a tooltip, called a popover. You may add `data-control="popover"` to an anchor or button to activate a popover. Use the `data-content` attribute to specify the contents. - - Basic popover - +```html + + Basic popover + +``` ### Template content @@ -34,28 +36,24 @@ Define the popover content as a template and reference it with `data-content-fro ### Event specified content -```js -$('#btn1').on('showing.oc.popover', function(e, popover) { - popover.options.content = '
Some other content
' -}) -``` - - - Event content popover - +```html + + Event content popover + +``` ## JavaScript API diff --git a/ui/controls/popup.md b/ui/controls/popup.md index ae6319de..f3869da9 100644 --- a/ui/controls/popup.md +++ b/ui/controls/popup.md @@ -45,6 +45,42 @@ Displays a modal popup, based on the Bootstrap modal implementation.
``` +```backend +Launch basic content + + + +Launch Confirmation dialog + + +``` + ## Inline popups An inline popup places the popup content inside the current page, hidden from the view. For example, this container will not be visible on the page. diff --git a/ui/controls/scoreboard.md b/ui/controls/scoreboard.md index 9ee9ef48..f5e58cf6 100644 --- a/ui/controls/scoreboard.md +++ b/ui/controls/scoreboard.md @@ -2,83 +2,168 @@ ### Scoreboard -
-
-
-

Weight

-

100

-

unit: kg

-
- -
-

Comments

-

44

-

previous month: 32

-
- -
-

Latest commenter

-

John Smith

-

registered: yes

-
+```html +
+
+
+

Weight

+

100

+

unit: kg

+
+ +
+

Comments

+

44

+

previous month: 32

+
+ +
+

Latest commenter

+

John Smith

+

registered: yes

+
+
+
+``` + +```backend +
+
+
+

Weight

+

100

+

unit: kg

+
+ +
+

Comments

+

44

+

previous month: 32

+
+ +
+

Latest commenter

+

John Smith

+

registered: yes

+
+``` ### Complete example -
-
-
-
    -
  • Published 84
    • -
  • Drafts 12
    • -
  • Deleted 18
    • -
-
- -
-
    -
  • Published 84
    • -
  • Drafts 12
    • -
  • Deleted 18
    • -
-
- -
-

Weight

-

100

-

unit: kg

-
- -
-

Comments

-

44

-

previous month: 32

-
- -
-

Length

-

31

-

previous: 42

-
- -
-

Latest commenter

-

John Smith

-

registered: yes

-
- -
-

goal meter

-

88%

-

37 posts remain

-
- -
-

goal meter

-

88%

-

37 posts remain

-
+```html +
+
+
+
    +
  • Published 84
    • +
  • Drafts 12
    • +
  • Deleted 18
    • +
+
+ +
+
    +
  • Published 84
    • +
  • Drafts 12
    • +
  • Deleted 18
    • +
+
+ +
+

Weight

+

100

+

unit: kg

+
+ +
+

Comments

+

44

+

previous month: 32

+
+ +
+

Length

+

31

+

previous: 42

+
+ +
+

Latest commenter

+

John Smith

+

registered: yes

+
+ +
+

goal meter

+

88%

+

37 posts remain

+
+ +
+

goal meter

+

88%

+

37 posts remain

+
+``` + +```backend +
+
+
+
    +
  • Published 84
    • +
  • Drafts 12
    • +
  • Deleted 18
    • +
+
+ +
+
    +
  • Published 84
    • +
  • Drafts 12
    • +
  • Deleted 18
    • +
+
+ +
+

Weight

+

100

+

unit: kg

+
+
+

Comments

+

44

+

previous month: 32

+
+ +
+

Length

+

31

+

previous: 42

+
+ +
+

Latest commenter

+

John Smith

+

registered: yes

+
+ +
+

goal meter

+

88%

+

37 posts remain

+
+ +
+

goal meter

+

88%

+

37 posts remain

+
+
+
+``` diff --git a/ui/controls/select.md b/ui/controls/select.md index 664ae2a3..825f1385 100644 --- a/ui/controls/select.md +++ b/ui/controls/select.md @@ -4,31 +4,63 @@ Custom select control. - +```html + +``` + +```backend + +``` ## Sizes ### Small size -
- -
+```html +
+ +
+``` + +```backend +
+ +
+``` ### Large size -
- -
+```html +
+ +
+``` + +```backend +
+ +
+``` ## Options @@ -36,35 +68,69 @@ Custom select control. Add the `select-no-search` CSS class to disable searching. -
- -
+```html +
+ +
+``` + +```backend +
+ +
+``` ### Dynamic option creation In addition to a pre-populated menu of options, Select widgets may dynamically create new options from textual input by the user in the search box. This feature is called "tagging". To enable tagging, set the `tags` option to `true`: - +```html + +``` + +```backend + +``` ## Option groups Use the `optgroup` element to create option groups. - +```html + +``` + +```backend + +``` ## AJAX search diff --git a/ui/controls/tab.md b/ui/controls/tab.md index b4a2fb58..5dc807e3 100644 --- a/ui/controls/tab.md +++ b/ui/controls/tab.md @@ -18,132 +18,236 @@ These modifiers can be added in addition to the `control-tabs` class: ### Master tabs -
- -
-
- Tab one content -
-
- Tab two content -
-
- Tab three content -
+```html +
+ +
+
+ Tab one content +
+
+ Tab two content +
+
+ Tab three content
+
+``` + +```backend +
+ +
+
+ Tab one content +
+
+ Tab two content +
+
+ Tab three content +
+
+
+``` ### Primary tabs -
- -
-
- Tab one content -
-
- Tab two content -
-
- Tab three content -
+```html +
+ +
+
+ Tab one content +
+
+ Tab two content +
+
+ Tab three content
+
+``` + +```backend +
+ +
+
+ Tab one content +
+
+ Tab two content +
+
+ Tab three content +
+
+
+``` -> **Note**: Primary tabs in the Winter back-end are inset by default and you should use `.tabs-no-inset` to disable this. +> **NOTE**: Primary tabs in the Winter back-end are inset by default and you should use `.tabs-no-inset` to disable this. ### Secondary tabs -
- -
-
- Tab one content -
-
- Tab two content -
-
- Tab three content -
+```html +
+ +
+
+ Tab one content +
+
+ Tab two content +
+
+ Tab three content
+
+``` + +```backend +
+ +
+
+ Tab one content +
+
+ Tab two content +
+
+ Tab three content +
+
+
+``` ### Content tabs -
- -
-
- Tab one content -
-
- Tab two content -
-
- Tab three content -
+```html +
+ +
+
+ Tab one content +
+
+ Tab two content +
+
+ Tab three content
- +
+``` + +```backend +
+ +
+
+ Tab one content +
+
+ Tab two content +
+
+ Tab three content +
+
+
+``` ### Supported data attributes: -- data-control="tab" - creates the tab control from an element -- data-closable - enables the Close Tab feature -- data-pane-classes - a list of CSS classes to apply new pane elements +- `data-control="tab"` - creates the tab control from an element +- `data-closable` - enables the Close Tab feature +- `data-pane-classes` - a list of CSS classes to apply new pane elements Example with data attributes (data-control="tab"): -
- -
-
Home
-
+```html +
+ +
+
Home
+
+
+``` + +```backend +
+ +
+
Home
+
+``` ### JavaScript API -- $('#mytabs').ocTab({closable: true, closeConfirmation: 'Close this tab? Unsaved data will be lost.'}) -- $('#mytabs').ocTab('addTab', 'Tab title', 'Tab content', identifier) - adds tab. The optional identifier parameter allows to associate a identifier with a tab. The identifier can be used with the goTo() method to find and open a tab by it's identifier. -- $('#mytabs').ocTab('closeTab', '.nav-tabs > li.active', true) - closes a tab. The second argument can point to a tab or tab pane. The thrid argument determines whether the tab should be closed without the user confirmation. The default value is false. -- $('.nav-tabs > li.active').trigger('close.oc.tab') - another way to close a tab. The event can be triggered on a tab, tab pane or any element inside a tab or tab pane. -- $('#mytabs').ocTab('modifyTab', '.nav-tabs > li.active') - marks a tab as modified. Use the 'unmodifyTab' to mark a tab as unmodified. -- $('.nav-tabs > li.active').trigger('modified.oc.tab') - another way to mark a tab as modified. The event can be triggered on a tab, tab pane or any element inside a tab or tab pane. Use the 'unmodified.oc.tab' to mark a tab as unmodified. -- $('#mytabs').ocTab('goTo', 'someidentifier') - Finds a tab by it's identifier and opens it. -- $('#mytabs').ocTab('goToPane', '.tab-content .tab-pane:first') - Opens a tab in context of it's content (pane element) +- `$('#mytabs').ocTab({closable: true, closeConfirmation: 'Close this tab? Unsaved data will be lost.'})` +- `$('#mytabs').ocTab('addTab', 'Tab title', 'Tab content', identifier)` - adds tab. The optional identifier parameter allows to associate a identifier with a tab. The identifier can be used with the goTo() method to find and open a tab by it's identifier. +- `$('#mytabs').ocTab('closeTab', '.nav-tabs > li.active', true)` - closes a tab. The second argument can point to a tab or tab pane. The thrid argument determines whether the tab should be closed without the user confirmation. The default value is false. +- `$('.nav-tabs > li.active').trigger('close.oc.tab')` - another way to close a tab. The event can be triggered on a tab, tab pane or any element inside a tab or tab pane. +- `$('#mytabs').ocTab('modifyTab', '.nav-tabs > li.active')` - marks a tab as modified. Use the 'unmodifyTab' to mark a tab as unmodified. +- `$('.nav-tabs > li.active').trigger('modified.oc.tab')` - another way to mark a tab as modified. The event can be triggered on a tab, tab pane or any element inside a tab or tab pane. Use the 'unmodified.oc.tab' to mark a tab as unmodified. +- `$('#mytabs').ocTab('goTo', 'someidentifier')` - Finds a tab by it's identifier and opens it. +- `$('#mytabs').ocTab('goToPane', '.tab-content .tab-pane:first')` - Opens a tab in context of it's content (pane element) ### Supported options: - - closable - adds the "close" icon to the tab and lets users to close tabs. Corresponds the data-closable attribute. - - closeConfirmation - a confirmation to show when a user tries to close a modified tab. Corresponds the data-close-confirmation + - `closable` - adds the "close" icon to the tab and lets users to close tabs. Corresponds the data-closable attribute. + - `closeConfirmation` - a confirmation to show when a user tries to close a modified tab. Corresponds the data-close-confirmation attribute. The confirmation is displayed only if the tab was modified. - - slidable - allows the tabs to be switched with the swipe gesture on touch devices. Corresponds the data-slidable attribute. - - paneClasses - a list of CSS classes to apply new pane elements. Corresponds to the data-pane-classes attribute. - - maxTitleSymbols - the maximum number of characters in tab titles. - - titleAsFileNames - treat tab titles as file names. In this mode only the file name part is displayed in the tab, and the directory part + - `slidable` - allows the tabs to be switched with the swipe gesture on touch devices. Corresponds the data-slidable attribute. + - `paneClasses` - a list of CSS classes to apply new pane elements. Corresponds to the data-pane-classes attribute. + - `maxTitleSymbols` - the maximum number of characters in tab titles. + - `titleAsFileNames` - treat tab titles as file names. In this mode only the file name part is displayed in the tab, and the directory part is hidden. ### Supported events: -- beforeClose.oc.tab - triggered on a tab pane element before tab is closed by the user. Call the event's +- `beforeClose.oc.tab` - triggered on a tab pane element before tab is closed by the user. Call the event's preventDefault() method to cancel the action. -- afterAllClosed.oc.tab - triggered after all tabs have been closed +- `afterAllClosed.oc.tab` - triggered after all tabs have been closed diff --git a/ui/controls/toolbar.md b/ui/controls/toolbar.md index 43b80229..bae72b8f 100644 --- a/ui/controls/toolbar.md +++ b/ui/controls/toolbar.md @@ -6,157 +6,324 @@ All toolbar items (`toolbar-item`) should have a fixed width, except for the pri ## Basic toolbar -
-
-
- +```html +
+
+
+ - + - + - + - + - + - + - -
+
-
- +
+
+ +
+
+``` + +```backend +
+
+
+ + + + + + + + + + + + + + +
+
+ +
+
+``` ### Button groups -
-
-
-
- - -
+```html +
+
+
+
+ +
-
- +
+
+ +
+
+``` + +```backend +
+
+
+
+ + +
+
+ +
+
+``` ### Button with Tooltips -
-
-
- -
+```html +
+
+
+
-
- +
+
+ +
+
+``` + +```backend +
+
+
+
+
+ +
+
+``` ### Dropdown buttons -
-
-
- -
- - -
+```html +
+
+
+
+ +
+
-
- +
+
+ +
+
+``` + +```backend +
+
+
+ +
+ + +
+
+
+ +
+
+``` ## Editor toolbar -
-
-
- - -
- - -
- - +```html +
+
+
+ + +
+ +
- - + + - - - - + + + + + +
+
+
+ + +
+
+``` + +```backend +
+
+
+ + +
+ +
+ + + + + + + + + + +
-
- - -
+
+ + +
+
+``` \ No newline at end of file diff --git a/ui/controls/tooltip.md b/ui/controls/tooltip.md index 8c4c5c75..85968a12 100644 --- a/ui/controls/tooltip.md +++ b/ui/controls/tooltip.md @@ -5,26 +5,57 @@ Tooltips are an alternative to the standard browser title tooltip. ## Tooltip markup A standard tooltip -
-
-
Create a new blog post based on this
-
+```html +
+
+
Create a new blog post based on this
+
+``` + +```backend +
+
+
Create a new blog post based on this
+
+``` ## Spawning tooltips Tooltips can be automatically created when the mouse enters an element using the `data-toggle="tooltip"` tag. - - Some link - +```html + + Some link + +``` + +```backend + + Some link + +``` # Example -
-
-
Create a new blog post based on this
-
\ No newline at end of file +```html +
+
+
Create a new blog post based on this
+
+``` + +```backend +
+
+
Create a new blog post based on this
+
+```