Skip to content

Commit

Permalink
feat(MdField): new field variants (#1545)
Browse files Browse the repository at this point in the history 
* feat(MdField) Field Variants

* docs(MdField) Field Variants

* fix  issues with the theme colors
  • Loading branch information
@shafimsp @marcosmoura
shafimsp authored and marcosmoura committed Mar 7, 2018
1 parent b19f6f0 commit f2347f1
Show file tree
Hide file tree
Showing 7 changed files with 1,601 additions and 177 deletions.
55 changes: 55 additions & 0 deletions docs/app/pages/Components/Input/Input.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
<example src="./examples/Counters.vue" />
<example src="./examples/FieldIcons.vue" />
<example src="./examples/InlineActions.vue" />
<example src="./examples/FieldVariations.vue" />
<example src="./examples/AppBarNested.vue" />

<template>
<page-container centered :title="$t('pages.input.title')">
Expand All @@ -20,6 +22,20 @@
<code-example title="Input and Textarea" :component="examples['text-fields']" />
</div>

<div class="page-container-section">
<h2>Field Variations</h2>

<p>Fields have three layout variations: Default (with floating labels), solo (with inline labels) and boxed (with floating labels).</p>
<code-example title="Variants and Dense" :component="examples['field-variations']" />
</div>

<div class="page-container-section">
<h2>App Bar Nested</h2>

<p>All field variations are works really great as search bar inside a toolbar.</p>
<code-example title="Nested Fields" :component="examples['app-bar-nested']" />
</div>

<div class="page-container-section">
<h2>Errors and Messages</h2>

Expand Down Expand Up @@ -80,12 +96,51 @@
field: {
headings: ['Name', 'Description', 'Default'],
props: [
{
name: 'md-variant',
type: 'String',
description: 'Sets the field variant. The bottom line variant is the default. See below the detailed description of each variant.',
defaults: 'bottom-line'
},
{
offset: true,
name: 'md-variant="bottom-line"',
type: 'String',
description: 'Sets the field variant to bottom line. This is the default.',
defaults: '-'
},
{
offset: true,
name: 'md-variant="box"',
type: 'String',
description: 'Sets the field variant to a boxed variant.',
defaults: '-'
},
{
offset: true,
name: 'md-variant="raised"',
type: 'String',
description: 'Sets the field variant to a raised variant.',
defaults: '-'
},
{
name: 'md-dense',
type: 'Boolean',
description: 'Enable the dense layout',
defaults: 'false'
},
{
name: 'md-inline',
type: 'Boolean',
description: 'Make the label inline. This means that the label will disappear when the input receives a focus.',
defaults: 'false'
},
{
name: 'md-nested',
type: 'Boolean',
description: 'Enable the nested layout. Its works only within toolbar',
defaults: 'false'
},
{
name: 'md-counter',
type: 'Boolean',
Expand Down
102 changes: 102 additions & 0 deletions docs/app/pages/Components/Input/examples/AppBarNested.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<template>
<div>
<md-toolbar class="md-primary">
<div class="md-toolbar-row">
<div class="md-toolbar-section-start">
<md-button class="md-icon-button">
<md-icon>menu</md-icon>
</md-button>
</div>

<md-field class="search" md-nested md-clearable>
<md-icon>search</md-icon>
<label>Search...</label>
<md-input v-model="normal"></md-input>
</md-field>

<div class="md-toolbar-section-end">
<md-button class="md-icon-button">
<md-icon>refresh</md-icon>
</md-button>

<md-button class="md-icon-button">
<md-icon>more_vert</md-icon>
</md-button>
</div>
</div>
</md-toolbar>

<md-toolbar class="md-primary">
<div class="md-toolbar-row">
<div class="md-toolbar-section-start">
<md-button class="md-icon-button">
<md-icon>menu</md-icon>
</md-button>
</div>

<md-field class="search" md-variant="box" md-nested md-clearable>
<md-icon>search</md-icon>
<label>Search...</label>
<md-input v-model="box"></md-input>
</md-field>

<div class="md-toolbar-section-end">
<md-button class="md-icon-button">
<md-icon>refresh</md-icon>
</md-button>

<md-button class="md-icon-button">
<md-icon>more_vert</md-icon>
</md-button>
</div>
</div>
</md-toolbar>

<md-toolbar class="md-primary">
<div class="md-toolbar-row">
<div class="md-toolbar-section-start">
<md-button class="md-icon-button">
<md-icon>menu</md-icon>
</md-button>
</div>

<md-field class="search" md-variant="raised" md-nested md-clearable>
<md-icon>search</md-icon>
<label>Search...</label>
<md-input v-model="raised"></md-input>
</md-field>

<div class="md-toolbar-section-end">
<md-button class="md-icon-button">
<md-icon>refresh</md-icon>
</md-button>

<md-button class="md-icon-button">
<md-icon>more_vert</md-icon>
</md-button>
</div>
</div>
</md-toolbar>
</div>
</template>

<script>
export default {
name: 'AppBsrNested',
data: () => ({
normal: null,
box: null,
raised: null
})
}
</script>

<style lang="scss" scoped>
.md-toolbar + .md-toolbar {
margin-top: 24px;
}
.search {
max-width: 500px;
}
</style>
48 changes: 48 additions & 0 deletions docs/app/pages/Components/Input/examples/FieldVariations.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<template>
<div>
<md-field md-variant="bottom-line">
<label>Bottom Line</label>
<md-input v-model="normal"></md-input>
</md-field>

<md-field md-variant="box">
<label>Box</label>
<md-input v-model="box"></md-input>
</md-field>

<md-field md-variant="raised">
<label>Raised (Inline Only)</label>
<md-input v-model="raised"></md-input>
</md-field>

<md-field md-variant="bottom-line" md-dense>
<label>Bottom Line with dense</label>
<md-input v-model="normalDense"></md-input>
</md-field>

<md-field md-variant="box" md-dense>
<label>Box with dense</label>
<md-input v-model="boxDense"></md-input>
</md-field>

<md-field md-variant="raised" md-dense>
<label>Raised (Inline Only)</label>
<md-input v-model="raisedDense"></md-input>
</md-field>

</div>
</template>

<script>
export default {
name: 'FieldVariations',
data: () => ({
normal: null,
box: null,
raised: null,
normalDense: null,
boxDense: null,
raisedDense: null
})
}
</script>
Loading

2 comments on commit f2347f1

@marcosmoura
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was reverted. Due to the new changes on Material Design guidelines this will no longer be applied.

@marcosmoura
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was reverted. Due to the new changes on Material Design guidelines, this will no longer be applied.

Please sign in to comment.