-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: introduce uip-header reimplementation
Reference for: ebeb66b BREAKING CHANGE: `uip-header` and `uip-options` are removed. Use `uip-snippets` (`uip-snippets-list`, `uip-snippets-title`), or combine it with buttons (`uip-copy`, `uip-theme-toggle`, `uip-direction-toggle`)
- Loading branch information
Showing
4 changed files
with
70 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,15 @@ | ||
| # UIP Snippets | ||
| # UIP Snippets List | ||
|
|
||
| **UIPSnippets** - custom element which contains snippets (markup's templates). It allows users to see different predefined component's variations. Extends [UIPPlugin](src/core/README.md#uip-plugin). | ||
| **UIPSnippetsList** - custom element UIPPlugin to display a list of available snippets. | ||
|
|
||
| ## Description | ||
|
|
||
| - Snippets should be placed in *template*/*script* tags, which should be placed inside [UIPRoot](src/core/README.md#uip-root). | ||
| - Script/template tags should have *uip-snippet* attribute and *label* attribute with a snippet's name. | ||
| - An active element can be chosen by adding class *active* to script/template, otherwise the first snippet is displayed by default. | ||
|
|
||
| **UIPSnippets** component produces [UIPStateModel](src/core/README.md#uip-state-model) changes, but it doesn't observe them. | ||
|
|
||
| ## Example | ||
| UiPSnippetsList observes UIPModel snippets changes and updates the list of available snippets. | ||
| Component supports active snippet item marker and snippet selection by click. | ||
|
|
||
| ## Usage | ||
| ```html | ||
| <uip-snippets-list root="::next"></uip-snippets-list> | ||
| <uip-root> | ||
| <uip-header> | ||
| <uip-snippets></uip-snippets> | ||
| </uip-header> | ||
| <uip-preview></uip-preview> | ||
| ... | ||
| </uip-root> | ||
| <script uip-snippet label='Image Mode: save-ratio'> | ||
| <esl-image mode="save-ratio" | ||
| data-alt="Alt Text Test" | ||
| data-src="img-3-carousel-9-6.jpg" | ||
| data-src-base="/images/"></esl-image> | ||
| </script> | ||
| <script uip-snippet label='Image Mode: cover (additional classes: vertical alignment)'> | ||
| <div class="img-container m-auto" style="width: 400px; height: 200px; border: 1px solid gray;"> | ||
| <esl-image mode="cover" | ||
| data-alt="Alt Text" | ||
| data-src="img-1-carousel-9-6.jpg | @2x => img-1-carousel-9-6.jpg" | ||
| data-src-base="/images/"></esl-image> | ||
| </div> | ||
| </script> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| # UIP Snippets Title | ||
|
|
||
| **UIPSnippetsTitle** - small plugin to display a title of the currently selected snippet. | ||
|
|
||
| # Usage | ||
|
|
||
| The following sample will render snippets as a tab list in the header of the UI Playground: | ||
| ```html | ||
| <uip-root> | ||
| <uip-snippets-title class="uip-toolbar"></uip-snippets-title> | ||
| ... | ||
| </uip-root> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,45 @@ | ||
| # UIP Header | ||
| # UIP Snippets | ||
|
|
||
| **UIPHeader** - custom element, a container for [UIPSnippets](src/header/snippets/README.md) and [UIPOptions](src/header/options/README.md). | ||
| **UIPSnippets** - the primary plugin to display snippets of the UI Playground. | ||
|
|
||
| # Description | ||
| By default *UIPHeader* initializes *UIPSnippets*, *UIPOptions* and a copy icon inside of it, so you need to add an empty *uip-header* tag only. But you can also manually set what you want it to render. The following example shows | ||
| how only [UIPSnippets](src/header/snippets/README.md) can be displayed: | ||
| UIPSnippets uses UIPSnippetsList to render the list of snippets and UIPSnippetsTitle to render the title of the list. | ||
| UIPSnippets can be rendered in two modes: *list* and *dropdown*. | ||
|
|
||
| # Usage | ||
|
|
||
| The following sample will render snippets as a tab list in the header of the UI Playground: | ||
| ```html | ||
| <uip-root> | ||
| <uip-snippets class="uip-toolbar"></uip-snippets> | ||
| ... | ||
| </uip-root> | ||
| ``` | ||
|
|
||
| To render snippets as a dropdown list, use the following snippet: | ||
| ```html | ||
| <uip-root> | ||
| <uip-snippets class="uip-toolbar" dropdown-view="all"></uip-snippets> | ||
| ... | ||
| </uip-root> | ||
| ``` | ||
|
|
||
| The `dropdown-view` attribute can be any ESLMediaQuery value, so you can switch mode depending on the screen size. | ||
| ```html | ||
| <uip-header> | ||
| <uip-snippets></uip-snippets> | ||
| </uip-editor> | ||
| <uip-root> | ||
| <uip-snippets class="uip-toolbar" dropdown-view="(max-width: 768px)"></uip-snippets> | ||
| ... | ||
| </uip-root> | ||
| ``` | ||
|
|
||
| An empty *uip-header* is an equivalent to the next snippet: | ||
|
|
||
| The class `uip-toolbar` is used to style the section as a toolbar-header for the UI Playground. | ||
| The combinations of `uip-snippets` and buttons (e.g. `uip-copy`, `uip-theme-toggle` or `uip-direction-toggle`) | ||
| are also allowed with additional div wrapper: | ||
| ```html | ||
| <uip-header> | ||
| <uip-snippets></uip-snippets> | ||
| <uip-options></uip-options> | ||
| <button class="copy-icon" title="copy markup"></button> | ||
| <div class="uip-toolbar"> | ||
| <uip-snippets></uip-snippets> | ||
| <uip-theme-toggle></uip-theme-toggle> | ||
| </div> | ||
| ... | ||
| </uip-header> | ||
| ``` |