Working modal component
This commit is contained in:
parent
0782be6f92
commit
b16fe24ddc
19
js/index.js
19
js/index.js
@ -1,6 +1,23 @@
|
||||
import classes from '../styles/atat.scss'
|
||||
import Vue from 'vue/dist/vue'
|
||||
|
||||
import './example'
|
||||
const app = new Vue({
|
||||
el: '#vue-root',
|
||||
methods: {
|
||||
closeModal: function(name) {
|
||||
this.modals[name] = false
|
||||
},
|
||||
openModal: function (name) {
|
||||
this.modals[name] = true
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
modals: {
|
||||
styleguideModal: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
console.log('hello from index')
|
||||
|
@ -31,3 +31,7 @@
|
||||
@mixin line-max {
|
||||
max-width: 45em;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none
|
||||
}
|
||||
|
@ -1,23 +1,21 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
|
||||
{% macro Modal(name, dismissable=False) -%}
|
||||
<Modal inline-template ref={{ name }}>
|
||||
<div v-if='active'>
|
||||
<div class='modal' v-on:click='handleDismiss'>
|
||||
<div class='modal__dialog' role='dialog' aria-modal='true'>
|
||||
<div v-if='modals.{{name}} === true' v-cloak>
|
||||
<div class='modal'>
|
||||
<div class='modal__dialog' role='dialog' aria-modal='true'>
|
||||
|
||||
{% if dismissable %}
|
||||
<button class='icon-link modal__dismiss' v-on:click='handleDismiss'>
|
||||
{{ Icon('x') }}
|
||||
<span>Close</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
{% if dismissable %}
|
||||
<button class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
|
||||
{{ Icon('x') }}
|
||||
<span>Close</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
<div class='modal__body'>
|
||||
{{ caller() }}
|
||||
</div>
|
||||
<div class='modal__body'>
|
||||
{{ caller() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
|
@ -4,31 +4,28 @@
|
||||
{% from "components/modal.html" import Modal %}
|
||||
{% from "components/alert.html" import Alert %}
|
||||
|
||||
{% block modal %}
|
||||
{% if g.modalOpen %}
|
||||
{% call Modal(name='styleguide-modal', dismissable=True) %}
|
||||
<h1>A modal dialog</h1>
|
||||
|
||||
<p>We count thirty Rebel ships, Lord Vader. But they're so small they're evading our turbo-lasers! We'll have to destroy them ship to ship. Get the crews to their fighters. Luke, let me know when you're going in. I'm on my way in now... Watch yourself! There's a lot of fire coming from the right side of that deflection tower. I'm on it. Squad leaders, we've picked up a new group of signals. Enemy fighters coming your way.</p>
|
||||
<p>I hope the old man got that tractor beam out if commission, or this is going to be a real short trip. Okay, hit it! We're coming up on the sentry ships. Hold 'em off! Angle the deflector shields while I charge up the main guns! I can't believe he's gone. There wasn't anything you could have done. Come on, buddy, we're not out of this yet! You in, kid? Okay, stay sharp!</p>
|
||||
|
||||
<div class='action-group'>
|
||||
<a href='/styleguide' class='action-group__action usa-button'>Close</a>
|
||||
<a href='/styleguide' class='action-group__action'>This also closes the modal</a>
|
||||
</div>
|
||||
{% endcall %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% call Modal(name='styleguideModal', dismissable=True) %}
|
||||
<h1>A modal dialog</h1>
|
||||
|
||||
<p>We count thirty Rebel ships, Lord Vader. But they're so small they're evading our turbo-lasers! We'll have to destroy them ship to ship. Get the crews to their fighters. Luke, let me know when you're going in. I'm on my way in now... Watch yourself! There's a lot of fire coming from the right side of that deflection tower. I'm on it. Squad leaders, we've picked up a new group of signals. Enemy fighters coming your way.</p>
|
||||
<p>I hope the old man got that tractor beam out if commission, or this is going to be a real short trip. Okay, hit it! We're coming up on the sentry ships. Hold 'em off! Angle the deflector shields while I charge up the main guns! I can't believe he's gone. There wasn't anything you could have done. Come on, buddy, we're not out of this yet! You in, kid? Okay, stay sharp!</p>
|
||||
|
||||
<div class='action-group'>
|
||||
<a v-on:click="closeModal('styleguideModal')" class='action-group__action usa-button'>Close</a>
|
||||
<a class='action-group__action' v-on:click="closeModal('styleguideModal')">This also closes the modal</a>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
|
||||
{{ Alert('A Warning Alert',
|
||||
message="\
|
||||
<p>This is a message. It is a very important message. Please note, <strong>proper semantic markup is required</strong> here, such as paragraph tags. Don't omit paragraph tags!</p>\
|
||||
<p>Also note the same for actions below. You'll need to include the full link markup.</p>\
|
||||
",
|
||||
actions='<a v-on:click="openModal" href="#">Open a Modal Dialog</a>',
|
||||
actions='<a v-on:click="openModal(\'styleguideModal\')">Open a Modal Dialog</a>',
|
||||
level='warning'
|
||||
) }}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user