Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(kmodal): fix content slot example #2430

Merged
merged 1 commit into from
Oct 2, 2024
Merged

docs(kmodal): fix content slot example #2430

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 32 additions & 31 deletions docs/components/modal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ KModal is a pop-up modal component with a background overlay.

:::tip NOTE
If your use-case matches one of the scenarios below, consider using [KPrompt](/components/prompt) instead:

* you need a simple pop-up dialog to ask user to confirm their action
* the user performed an action and you first require them to provide input text
* you don't need many customization options for a simple modal with action buttons
Expand Down Expand Up @@ -688,26 +689,24 @@ Focus-trap requires at least one tabbable element to be present in modal at all

<KButton @click="modal22Visible = true">Modal</KButton>

<div class="custom-modal-content">
<KModal :visible="modal22Visible" @proceed="closeAllModals">
<template #content>
<div class="modal-content">
<img src="/img/dark-demo.png" alt="Circuit board" />
<div class="info-container">
<h3>Welcome to Gateway Manager!</h3>
<p>Optimize Kong Gateway and Ingress Controller deployments across hybrid, multi-cloud, and Kubernetes environments. Get single-pane management, a 99.99% SLA, and seamless day-2 operations.</p>
<KButton @click="closeAllModals">Show me around</KButton>
</div>
<KModal :visible="modal22Visible" @proceed="closeAllModals">
<template #content>
<div class="custom-modal-content">
<img src="/img/dark-demo.png" alt="Circuit board" />
<div class="info-container">
<h3>Welcome to Gateway Manager!</h3>
<p>Optimize Kong Gateway and Ingress Controller deployments across hybrid, multi-cloud, and Kubernetesenvironments. Get single-pane management, a 99.99% SLA, and seamless day-2 operations.</p>
<KButton @click="closeAllModals">Show me around</KButton>
</div>
</template>
</KModal>
</div>
</div>
</template>
</KModal>

```vue
<template>
<KModal :visible="modalVisible" @proceed="handleModalProceed">
<template #content>
<div class="modal-content">
<div class="custom-modal-content">
<img src="/img/gateway-manager.png" alt="Gateway Manager" />
<div class="info-container">
<h3>Welcome to Gateway Manager!</h3>
Expand All @@ -724,7 +723,7 @@ const modalVisible = ref<boolean>(false)
</script>

<style lang="scss" scoped>
.modal-content {
.custom-modal-content {
img {
border-top-left-radius: $kui-border-radius-40;
border-top-right-radius: $kui-border-radius-40;
Expand All @@ -737,6 +736,10 @@ const modalVisible = ref<boolean>(false)
padding: $kui-space-80;
text-align: center;

h3, p {
margin: 0;
}

p {
color: $kui-color-text-neutral;
}
Expand Down Expand Up @@ -832,27 +835,25 @@ watch(modal17Visible, (newValue) => {
}

.custom-modal-content {
.modal-content {
img {
border-top-left-radius: $kui-border-radius-40;
border-top-right-radius: $kui-border-radius-40;
}

.info-container {
display: flex;
flex-direction: column;
gap: $kui-space-60;
padding: $kui-space-80;
text-align: center;
img {
border-top-left-radius: $kui-border-radius-40;
border-top-right-radius: $kui-border-radius-40;
}

p {
color: $kui-color-text-neutral;
}
}
.info-container {
display: flex;
flex-direction: column;
gap: $kui-space-60;
padding: $kui-space-80;
text-align: center;

h3, p {
margin: 0;
}

p {
color: $kui-color-text-neutral;
}
}
}

Expand Down