From 1a33205b0aef1b90fed2730b0835274b588702e8 Mon Sep 17 00:00:00 2001 From: maiieul Date: Wed, 2 Oct 2024 21:42:51 +0200 Subject: [PATCH] fix: modal route not working + naming #2 --- apps/website/src/routes/docs/headless/popover/index.mdx | 6 +++--- apps/website/src/routes/docs/headless/tooltip/index.mdx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/website/src/routes/docs/headless/popover/index.mdx b/apps/website/src/routes/docs/headless/popover/index.mdx index ecfd138de..5b7fc9ab1 100644 --- a/apps/website/src/routes/docs/headless/popover/index.mdx +++ b/apps/website/src/routes/docs/headless/popover/index.mdx @@ -3,10 +3,10 @@ title: Qwik UI | Popover --- import { statusByComponent } from '~/_state/component-statuses'; +import Styles from './examples/styles'; -import Styles from './examples/styles'; # Popover @@ -306,7 +306,7 @@ There are two main types of animations that can be applied to popovers in Qwik U To handle animations across all browsers, Qwik UI uses both keyframes and transitions, leveraging the native `:popover-open` pseudo-class and ensuring smooth state transitions with `transition-behavior: allow-discrete`. - + ### Keyframe Animation Example @@ -320,7 +320,7 @@ CSS transitions are useful for animating properties like opacity and scale over - + By using keyframe animations and CSS transitions together, we can achieve smooth entry and exit effects for popovers. Keyframes like `popover-grow` and `popover-shrink` handle scaling and visibility, while transitions focus on gradual changes to properties like `opacity`. Remember to include `display` and `overlay` in your transition properties and use `transition-behavior: allow-discrete` to ensure smooth animations across all browsers. diff --git a/apps/website/src/routes/docs/headless/tooltip/index.mdx b/apps/website/src/routes/docs/headless/tooltip/index.mdx index 8258674fe..55430f1fd 100644 --- a/apps/website/src/routes/docs/headless/tooltip/index.mdx +++ b/apps/website/src/routes/docs/headless/tooltip/index.mdx @@ -187,7 +187,7 @@ Transitions are ideal for animating properties like opacity and scale for smooth Here, transitions handle smooth opacity and scale changes. The `transition-behavior: allow-discrete` ensures that `display` and `overlay` animate properly. - + ## Events