diff --git a/doc/speeddial/LinearDoc.vue b/doc/speeddial/LinearDoc.vue
index 7e5cf945b..eaf3246a2 100644
--- a/doc/speeddial/LinearDoc.vue
+++ b/doc/speeddial/LinearDoc.vue
@@ -4,10 +4,10 @@
     </DocSectionText>
     <div class="card">
         <div style="position: relative; height: 500px">
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
-            <SpeedDial :model="items" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
-            <SpeedDial :model="items" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
-            <SpeedDial :model="items" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
+            <SpeedDial :model="items" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
+            <SpeedDial :model="items" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
+            <SpeedDial :model="items" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
+            <SpeedDial :model="items" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -56,19 +56,19 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
-<SpeedDial :model="items" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
-<SpeedDial :model="items" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
-<SpeedDial :model="items" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
+<SpeedDial :model="items" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
+<SpeedDial :model="items" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
+<SpeedDial :model="items" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
+<SpeedDial :model="items" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
 `,
                 options: `
 <template>
     <div class="card">
         <div style="position: relative; height: 500px">
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
-            <SpeedDial :model="items" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
-            <SpeedDial :model="items" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
-            <SpeedDial :model="items" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
+            <SpeedDial :model="items" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
+            <SpeedDial :model="items" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
+            <SpeedDial :model="items" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
+            <SpeedDial :model="items" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
             <Toast />
         </div>
     </div>
@@ -124,10 +124,10 @@ export default {
 <template>
     <div class="card">
         <div style="position: relative; height: 500px">
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
-            <SpeedDial :model="items" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
-            <SpeedDial :model="items" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
-            <SpeedDial :model="items" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
+            <SpeedDial :model="items" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
+            <SpeedDial :model="items" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
+            <SpeedDial :model="items" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
+            <SpeedDial :model="items" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
             <Toast />
         </div>
     </div>
diff --git a/doc/speeddial/SemiCircleDoc.vue b/doc/speeddial/SemiCircleDoc.vue
index c38beb524..8165512e0 100644
--- a/doc/speeddial/SemiCircleDoc.vue
+++ b/doc/speeddial/SemiCircleDoc.vue
@@ -4,10 +4,10 @@
     </DocSectionText>
     <div class="card">
         <div style="position: relative; height: 500px">
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -56,19 +56,19 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
-<SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
-<SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
-<SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
+<SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
+<SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
+<SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
+<SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
 `,
                 options: `
 <template>
     <div class="card">
         <div style="position: relative; height: 500px">
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
             <Toast />
         </div>
     </div>
@@ -123,10 +123,10 @@ export default {
                 composition: `
 <template>
     <div class="card" :style="{ position: 'relative', height: '500px' }">
-        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
-        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
-        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
-        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
         <Toast />
     </div>
 </template>