feat(Forms): add transition to card-header-action btn-close
This commit is contained in:
xidedix
+4
-1
@@ -1,7 +1,7 @@
|
|||||||
## [vue](./README.md) version `changelog`
|
## [vue](./README.md) version `changelog`
|
||||||
|
|
||||||
##### `v2.0.0-alpha.0`
|
##### `v2.0.0-alpha.0`
|
||||||
- refactor: separation of concerns - (CoreUI template vs CoreUI components) prepare to use CoreUI as dependency
|
- refactor: separation of concerns - (CoreUI template/components) for use CoreUI as npm module
|
||||||
- refactor: project structure change
|
- refactor: project structure change
|
||||||
- refactor: moved to [vuejs-templates](http://vuejs-templates.github.io/webpack/)
|
- refactor: moved to [vuejs-templates](http://vuejs-templates.github.io/webpack/)
|
||||||
- chore: moved to [Semantic Versioning](https://semver.org/)
|
- chore: moved to [Semantic Versioning](https://semver.org/)
|
||||||
@@ -9,6 +9,9 @@
|
|||||||
- refactor: rename containers
|
- refactor: rename containers
|
||||||
- refactor(Colors): view layout, sub-components
|
- refactor(Colors): view layout, sub-components
|
||||||
- refactor(Switches): move to `Switch component v2`
|
- refactor(Switches): move to `Switch component v2`
|
||||||
|
- refactor(Cards): add transition to card-header-action `btn-close`
|
||||||
|
- refactor(Cards): add collapse to card-header-action `btn-minimize`
|
||||||
|
- refactor(Forms): add transition to card-header-action `btn-close`
|
||||||
|
|
||||||
other:
|
other:
|
||||||
|
|
||||||
|
|||||||
+92
-78
@@ -555,20 +555,22 @@
|
|||||||
<strong>Validation feedback</strong> Form
|
<strong>Validation feedback</strong> Form
|
||||||
</div>
|
</div>
|
||||||
<b-card-body>
|
<b-card-body>
|
||||||
<b-form-group>
|
<b-form>
|
||||||
<label class="col-form-label" for="inputIsValid">Input is valid</label>
|
<b-form-group validated>
|
||||||
<input type="text" class="form-control is-valid" id="inputIsValid">
|
<label class="col-form-label" for="inputIsValid">Input is valid</label>
|
||||||
<b-form-valid-feedback>
|
<input type="text" class="form-control is-valid" id="inputIsValid">
|
||||||
Input is valid.
|
<b-form-valid-feedback>
|
||||||
</b-form-valid-feedback>
|
Input is valid.
|
||||||
</b-form-group>
|
</b-form-valid-feedback>
|
||||||
<b-form-group>
|
</b-form-group>
|
||||||
<label class="col-form-label" for="inputIsInvalid">Input is invalid</label>
|
<b-form-group>
|
||||||
<input type="text" class="form-control is-invalid" id="inputIsInvalid">
|
<label class="col-form-label" for="inputIsInvalid">Input is invalid</label>
|
||||||
<b-form-invalid-feedback>
|
<input type="text" class="form-control is-invalid" id="inputIsInvalid">
|
||||||
Please provide a valid information.
|
<b-form-invalid-feedback>
|
||||||
</b-form-invalid-feedback>
|
Please provide a valid information.
|
||||||
</b-form-group>
|
</b-form-invalid-feedback>
|
||||||
|
</b-form-group>
|
||||||
|
</b-form>
|
||||||
</b-card-body>
|
</b-card-body>
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
@@ -948,70 +950,72 @@
|
|||||||
</b-row>
|
</b-row>
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col lg="12">
|
<b-col lg="12">
|
||||||
<b-card no-body>
|
<transition name="fade">
|
||||||
<div slot="header">
|
<b-card no-body v-if="show">
|
||||||
<i class="fa fa-edit"></i> Form Elements
|
<div slot="header">
|
||||||
<div class="card-header-actions">
|
<i class="fa fa-edit"></i> Form Elements
|
||||||
<b-link href="#" class="card-header-action btn-setting">
|
<div class="card-header-actions">
|
||||||
<i class="icon-settings"></i>
|
<b-link href="#" class="card-header-action btn-setting">
|
||||||
</b-link>
|
<i class="icon-settings"></i>
|
||||||
<b-link class="card-header-action btn-minimize" v-b-toggle.collapse1>
|
</b-link>
|
||||||
<i class="icon-arrow-up"></i>
|
<b-link class="card-header-action btn-minimize" v-b-toggle.collapse1>
|
||||||
</b-link>
|
<i class="icon-arrow-up"></i>
|
||||||
<b-link href="#" class="card-header-action btn-close">
|
</b-link>
|
||||||
<i class="icon-close"></i>
|
<b-link href="#" class="card-header-action btn-close" v-on:click="show = !show">
|
||||||
</b-link>
|
<i class="icon-close"></i>
|
||||||
</div>
|
</b-link>
|
||||||
</div>
|
|
||||||
<b-collapse id="collapse1" visible>
|
|
||||||
<b-card-body>
|
|
||||||
<b-form-group label="Prepended text" label-for="elementsEmail" description="Here's some help text">
|
|
||||||
<b-input-group>
|
|
||||||
<b-input-group-prepend>
|
|
||||||
<b-input-group-text>@</b-input-group-text>
|
|
||||||
</b-input-group-prepend>
|
|
||||||
<b-form-input id="elementsEmail" type="email"></b-form-input>
|
|
||||||
</b-input-group>
|
|
||||||
</b-form-group>
|
|
||||||
<b-form-group label="Appended text" label-for="elementsAppend" description="Here's some help text">
|
|
||||||
<b-input-group>
|
|
||||||
<b-form-input id="elementsAppend" type="text"></b-form-input>
|
|
||||||
<b-input-group-append><b-input-group-text>.00</b-input-group-text></b-input-group-append>
|
|
||||||
</b-input-group>
|
|
||||||
</b-form-group>
|
|
||||||
<b-form-group label="Append and prepend" label-for="elementsPrependAppend" description="Here's some help text">
|
|
||||||
<b-input-group>
|
|
||||||
<b-input-group-prepend>
|
|
||||||
<b-input-group-text>$</b-input-group-text>
|
|
||||||
</b-input-group-prepend>
|
|
||||||
<b-form-input id="elementsPrependAppend" type="text"></b-form-input>
|
|
||||||
<b-input-group-append><b-input-group-text>.00</b-input-group-text></b-input-group-append>
|
|
||||||
</b-input-group>
|
|
||||||
</b-form-group>
|
|
||||||
<b-form-group label="Append with button" label-for="elementsAppendButton" description="Here's some help text">
|
|
||||||
<b-input-group>
|
|
||||||
<b-form-input id="elementsAppendButton" type="text"></b-form-input>
|
|
||||||
<b-input-group-append>
|
|
||||||
<b-button variant="primary">Go!</b-button>
|
|
||||||
</b-input-group-append>
|
|
||||||
</b-input-group>
|
|
||||||
</b-form-group>
|
|
||||||
<b-form-group label="Two-buttons append" label-for="elementsTwoButtons">
|
|
||||||
<b-input-group>
|
|
||||||
<b-form-input id="elementsTwoButtons" type="text"></b-form-input>
|
|
||||||
<b-input-group-append>
|
|
||||||
<b-button variant="primary">Search</b-button>
|
|
||||||
<b-button variant="danger">Options</b-button>
|
|
||||||
</b-input-group-append>
|
|
||||||
</b-input-group>
|
|
||||||
</b-form-group>
|
|
||||||
<div class="form-actions">
|
|
||||||
<b-button type="submit" variant="primary">Save changes</b-button>
|
|
||||||
<b-button type="button" variant="secondary">Cancel</b-button>
|
|
||||||
</div>
|
</div>
|
||||||
</b-card-body>
|
</div>
|
||||||
</b-collapse>
|
<b-collapse id="collapse1" visible>
|
||||||
</b-card>
|
<b-card-body>
|
||||||
|
<b-form-group label="Prepended text" label-for="elementsEmail" description="Here's some help text">
|
||||||
|
<b-input-group>
|
||||||
|
<b-input-group-prepend>
|
||||||
|
<b-input-group-text>@</b-input-group-text>
|
||||||
|
</b-input-group-prepend>
|
||||||
|
<b-form-input id="elementsEmail" type="email"></b-form-input>
|
||||||
|
</b-input-group>
|
||||||
|
</b-form-group>
|
||||||
|
<b-form-group label="Appended text" label-for="elementsAppend" description="Here's some help text">
|
||||||
|
<b-input-group>
|
||||||
|
<b-form-input id="elementsAppend" type="text"></b-form-input>
|
||||||
|
<b-input-group-append><b-input-group-text>.00</b-input-group-text></b-input-group-append>
|
||||||
|
</b-input-group>
|
||||||
|
</b-form-group>
|
||||||
|
<b-form-group label="Append and prepend" label-for="elementsPrependAppend" description="Here's some help text">
|
||||||
|
<b-input-group>
|
||||||
|
<b-input-group-prepend>
|
||||||
|
<b-input-group-text>$</b-input-group-text>
|
||||||
|
</b-input-group-prepend>
|
||||||
|
<b-form-input id="elementsPrependAppend" type="text"></b-form-input>
|
||||||
|
<b-input-group-append><b-input-group-text>.00</b-input-group-text></b-input-group-append>
|
||||||
|
</b-input-group>
|
||||||
|
</b-form-group>
|
||||||
|
<b-form-group label="Append with button" label-for="elementsAppendButton" description="Here's some help text">
|
||||||
|
<b-input-group>
|
||||||
|
<b-form-input id="elementsAppendButton" type="text"></b-form-input>
|
||||||
|
<b-input-group-append>
|
||||||
|
<b-button variant="primary">Go!</b-button>
|
||||||
|
</b-input-group-append>
|
||||||
|
</b-input-group>
|
||||||
|
</b-form-group>
|
||||||
|
<b-form-group label="Two-buttons append" label-for="elementsTwoButtons">
|
||||||
|
<b-input-group>
|
||||||
|
<b-form-input id="elementsTwoButtons" type="text"></b-form-input>
|
||||||
|
<b-input-group-append>
|
||||||
|
<b-button variant="primary">Search</b-button>
|
||||||
|
<b-button variant="danger">Options</b-button>
|
||||||
|
</b-input-group-append>
|
||||||
|
</b-input-group>
|
||||||
|
</b-form-group>
|
||||||
|
<div class="form-actions">
|
||||||
|
<b-button type="submit" variant="primary">Save changes</b-button>
|
||||||
|
<b-button type="button" variant="secondary">Cancel</b-button>
|
||||||
|
</div>
|
||||||
|
</b-card-body>
|
||||||
|
</b-collapse>
|
||||||
|
</b-card>
|
||||||
|
</transition>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
</div>
|
</div>
|
||||||
@@ -1022,7 +1026,8 @@ export default {
|
|||||||
name: 'forms',
|
name: 'forms',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
selected: [] // Must be an array reference!
|
selected: [], // Must be an array reference!
|
||||||
|
show: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@@ -1032,3 +1037,12 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.fade-enter-active, .fade-leave-active {
|
||||||
|
transition: opacity .5s;
|
||||||
|
}
|
||||||
|
.fade-enter, .fade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user