logo
English

导航菜单

Documents

MathFormula

Introduction

MathFormula renders math expressions with consistent styling, supporting titles, numbering, descriptions, symbol notes, six visual variants, and responsive layouts with theme adaptation.

Example

数学公式

公式是数学中表达数量关系、结构规律的符号表达式，是解决数学问题的重要工具。重要结论公式应熟练掌握和灵活应用。

换底公式 公式1
这是对数函数的重要性质之一。
fx 换底公式 公式1
$$\log_a c = \frac{\log_b c}{\log_b a}$$
这是对数函数的重要性质之一。
---
import { MathFormula } from '@coffic/cosy-ui';
---

<MathFormula title="换底公式" number="1" variant="gradient">
    <div slot="desc">这是对数函数的重要性质之一。</div>
</MathFormula>

<script setup lang="ts">
import { MathFormula } from "@coffic/cosy-ui/vue";
</script>

<template>
  <MathFormula title="换底公式" number="1" variant="gradient">
    $$\log_a c = \frac{\log_b c}{\log_b a}$$
    <div slot="desc">这是对数函数的重要性质之一。</div>
  </MathFormula>
</template>

Props

class

Custom CSS classes to extend or override the default styling.

数学公式

公式是数学中表达数量关系、结构规律的符号表达式，是解决数学问题的重要工具。重要结论公式应熟练掌握和灵活应用。

自定义样式 公式8
为组件添加自定义的边框与描边效果。
fx 自定义样式 公式8
$$\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0}$$
为组件添加自定义的边框与描边效果。
---
import { MathFormula } from '@coffic/cosy-ui';
---

<MathFormula
    title="自定义样式"
    number="8"
    variant="glass"
    class="cosy:border-primary cosy:ring-1 cosy:ring-primary/40">
    <div slot="desc">为组件添加自定义的边框与描边效果。</div>
</MathFormula>

<script setup lang="ts">
import { MathFormula } from "@coffic/cosy-ui/vue";
</script>

<template>
  <MathFormula
    title="自定义样式"
    number="8"
    variant="glass"
    class="cosy:border-primary cosy:ring-1 cosy:ring-primary/40"
  >
    $$\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0}$$
    <div slot="desc">为组件添加自定义的边框与描边效果。</div>
  </MathFormula>
</template>

number

Formula number, accepts string or number.

数学公式

公式是数学中表达数量关系、结构规律的符号表达式，是解决数学问题的重要工具。重要结论公式应熟练掌握和灵活应用。

换底公式 公式1
这是对数函数的重要性质之一。
fx 换底公式 公式1
$$\log_a c = \frac{\log_b c}{\log_b a}$$
这是对数函数的重要性质之一。
---
import { MathFormula } from '@coffic/cosy-ui';
---

<MathFormula title="换底公式" number="1" variant="gradient">
    <div slot="desc">这是对数函数的重要性质之一。</div>
</MathFormula>

<script setup lang="ts">
import { MathFormula } from "@coffic/cosy-ui/vue";
</script>

<template>
  <MathFormula title="换底公式" number="1" variant="gradient">
    $$\log_a c = \frac{\log_b c}{\log_b a}$$
    <div slot="desc">这是对数函数的重要性质之一。</div>
  </MathFormula>
</template>

symbolsCollapsed

Whether the symbols panel is collapsed by default. Defaults to true.

数学公式

公式是数学中表达数量关系、结构规律的符号表达式，是解决数学问题的重要工具。重要结论公式应熟练掌握和灵活应用。

符号折叠
$$\\alpha + \\beta = \\gamma$$
符号说明
符号说明将在默认折叠状态下显示。

数学公式

公式是数学中表达数量关系、结构规律的符号表达式，是解决数学问题的重要工具。重要结论公式应熟练掌握和灵活应用。

符号展开
$$x + y = z$$
符号说明
符号说明默认展开，便于查看。
fx 符号折叠
$$\alpha + \beta = \gamma$$
符号说明将在默认折叠状态下显示。
fx 符号展开
$$x + y = z$$
符号说明默认展开，便于查看。
---
import { MathFormula } from "@coffic/cosy-ui";
---

<MathFormula title="符号折叠" symbolsCollapsed>
  $$\\alpha + \\beta = \\gamma$$
  <div slot="symbols">符号说明将在默认折叠状态下显示。</div>
</MathFormula>


---
import { MathFormula } from "@coffic/cosy-ui";
---

<MathFormula title="符号展开" symbolsCollapsed={false}>
  $$x + y = z$$
  <div slot="symbols">符号说明默认展开，便于查看。</div>
</MathFormula>


<script setup lang="ts">
import { MathFormula } from "@coffic/cosy-ui/vue";
</script>

<template>
  <MathFormula title="符号折叠" symbols-collapsed>
    $$\alpha + \beta = \gamma$$
    <div slot="symbols">符号说明将在默认折叠状态下显示。</div>
  </MathFormula>
</template>


<script setup lang="ts">
import { MathFormula } from "@coffic/cosy-ui/vue";
</script>

<template>
  <MathFormula title="符号展开" :symbols-collapsed="false">
    $$x + y = z$$
    <div slot="symbols">符号说明默认展开，便于查看。</div>
  </MathFormula>
</template>

title

Formula title.

数学公式

公式是数学中表达数量关系、结构规律的符号表达式，是解决数学问题的重要工具。重要结论公式应熟练掌握和灵活应用。

换底公式 公式1
这是对数函数的重要性质之一。
fx 换底公式 公式1
$$\log_a c = \frac{\log_b c}{\log_b a}$$
这是对数函数的重要性质之一。
---
import { MathFormula } from '@coffic/cosy-ui';
---

<MathFormula title="换底公式" number="1" variant="gradient">
    <div slot="desc">这是对数函数的重要性质之一。</div>
</MathFormula>

<script setup lang="ts">
import { MathFormula } from "@coffic/cosy-ui/vue";
</script>

<template>
  <MathFormula title="换底公式" number="1" variant="gradient">
    $$\log_a c = \frac{\log_b c}{\log_b a}$$
    <div slot="desc">这是对数函数的重要性质之一。</div>
  </MathFormula>
</template>

variant

Visual style. Options: default, gradient, glass, neon, card, spotlight.

数学公式

公式是数学中表达数量关系、结构规律的符号表达式，是解决数学问题的重要工具。重要结论公式应熟练掌握和灵活应用。

卡片风格
$$F = ma$$

数学公式

公式是数学中表达数量关系、结构规律的符号表达式，是解决数学问题的重要工具。重要结论公式应熟练掌握和灵活应用。

默认样式
$$E = mc^2$$

数学公式

公式是数学中表达数量关系、结构规律的符号表达式，是解决数学问题的重要工具。重要结论公式应熟练掌握和灵活应用。

玻璃态
$$\int_0^1 x^2 \, dx = \frac13$$

数学公式

公式是数学中表达数量关系、结构规律的符号表达式，是解决数学问题的重要工具。重要结论公式应熟练掌握和灵活应用。

渐变样式
$$a^2 + b^2 = c^2$$

数学公式

公式是数学中表达数量关系、结构规律的符号表达式，是解决数学问题的重要工具。重要结论公式应熟练掌握和灵活应用。

霓虹效果
$$e^{i\pi} + 1 = 0$$

数学公式

公式是数学中表达数量关系、结构规律的符号表达式，是解决数学问题的重要工具。重要结论公式应熟练掌握和灵活应用。

聚光灯
$$\lim_{x \to 0} \frac{\sin x}{x} = 1$$
fx 卡片风格
$$F = ma$$
fx 默认样式
$$E = mc^2$$
fx 玻璃态
$$\int_0^1 x^2 \, dx = \frac{1}{3}$$
fx 渐变样式
$$a^2 + b^2 = c^2$$
fx 霓虹效果
$$e^{i\pi} + 1 = 0$$
fx 聚光灯
$$\lim_{x \to 0} \frac{\sin x}{x} = 1$$
---
import { MathFormula } from "@coffic/cosy-ui";
---

<MathFormula title="卡片风格" variant="card">
  $$F = ma$$
</MathFormula>


---
import { MathFormula } from '@coffic/cosy-ui';
---

<MathFormula title="默认样式" variant="default"> $$E = mc^2$$ </MathFormula>

---
import { MathFormula } from "@coffic/cosy-ui";
---

<MathFormula title="玻璃态" variant="glass">
  $$\int_0^1 x^2 \, dx = \frac{1}{3}$$
</MathFormula>


---
import { MathFormula } from '@coffic/cosy-ui';
---

<MathFormula title="渐变样式" variant="gradient">
    $$a^2 + b^2 = c^2$$
</MathFormula>

---
import { MathFormula } from '@coffic/cosy-ui';
---

<MathFormula title="霓虹效果" variant="neon">
    {'$$e^{i\\pi} + 1 = 0$$'}
</MathFormula>

---
import { MathFormula } from '@coffic/cosy-ui';
---

<MathFormula title="聚光灯" variant="spotlight">
    {'$$\\lim_{x \\to 0} \\frac{\\sin x}{x} = 1$$'}
</MathFormula>

<script setup lang="ts">
import { MathFormula } from "@coffic/cosy-ui/vue";
</script>

<template>
  <MathFormula title="卡片风格" variant="card">
    $$F = ma$$
  </MathFormula>
</template>


<script setup lang="ts">
import { MathFormula } from "@coffic/cosy-ui/vue";
</script>

<template>
  <MathFormula title="默认样式" variant="default">
    $$E = mc^2$$
  </MathFormula>
</template>


<script setup lang="ts">
import { MathFormula } from "@coffic/cosy-ui/vue";
</script>

<template>
  <MathFormula title="玻璃态" variant="glass">
    $$\int_0^1 x^2 \, dx = \frac{1}{3}$$
  </MathFormula>
</template>


<script setup lang="ts">
import { MathFormula } from "@coffic/cosy-ui/vue";
</script>

<template>
  <MathFormula title="渐变样式" variant="gradient">
    $$a^2 + b^2 = c^2$$
  </MathFormula>
</template>


<script setup lang="ts">
import { MathFormula } from "@coffic/cosy-ui/vue";
</script>

<template>
  <MathFormula title="霓虹效果" variant="neon">
    $$e^{i\pi} + 1 = 0$$
  </MathFormula>
</template>


<script setup lang="ts">
import { MathFormula } from "@coffic/cosy-ui/vue";
</script>

<template>
  <MathFormula title="聚光灯" variant="spotlight">
    $$\lim_{x \to 0} \frac{\sin x}{x} = 1$$
  </MathFormula>
</template>

Slots

default

Formula content (supports LaTeX).

desc

Description text.

symbols

Symbol notes area, collapsible.

details

Details area, collapsible.

数学公式

公式是数学中表达数量关系、结构规律的符号表达式，是解决数学问题的重要工具。重要结论公式应熟练掌握和灵活应用。

完整插槽 公式2
$$\int_a^b f'(x) \mathrm{d}x = f(b) - f(a)$$
展示 desc、symbols 与 details 插槽的用法。
符号说明
符号含义
\( f'(x) \)函数 \( f(x) \) 的导数
\( a, b \)积分上下限
使用牛顿-莱布尼茨公式，可以将定积分转换为原函数在区间端点的差值。
fx 完整插槽 公式2
$$\int_a^b f'(x) \mathrm{d}x = f(b) - f(a)$$
展示 desc、symbols 与 details 插槽的用法。
符号含义
\( f'(x) \)\( f(x) \) 的导数
\( a, b \)积分上下限
使用牛顿-莱布尼茨公式，可以将定积分转换为原函数在区间端点的差值。
---
import { MathFormula } from '@coffic/cosy-ui';
---

<MathFormula
    title="完整插槽"
    number="2"
    variant="card"
    symbolsCollapsed={false}>
    {"$$\\int_a^b f'(x) \\mathrm{d}x = f(b) - f(a)$$"}

    <div slot="desc">展示 desc、symbols 与 details 插槽的用法。</div>

    <div slot="symbols">
        <table>
            <thead>
                <tr>
                    <th>符号</th>
                    <th>含义</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{"\\( f'(x) \\)"}</td>
                    <td>{'函数 \\( f(x) \\) 的导数'}</td>
                </tr>
                <tr>
                    <td>{'\\( a, b \\)'}</td>
                    <td>积分上下限</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div slot="details">
        使用牛顿-莱布尼茨公式，可以将定积分转换为原函数在区间端点的差值。
    </div>
</MathFormula>

<script setup lang="ts">
import { MathFormula } from "@coffic/cosy-ui/vue";
</script>

<template>
  <MathFormula
    title="完整插槽"
    number="2"
    variant="card"
    :symbols-collapsed="false"
  >
    {{"$$\\int_a^b f'(x) \\mathrm{d}x = f(b) - f(a)$$"}}

    <div slot="desc">展示 desc、symbols 与 details 插槽的用法。</div>

    <div slot="symbols">
      <table>
        <thead>
          <tr>
            <th>符号</th>
            <th>含义</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{ "\\( f'(x) \\)" }}</td>
            <td>{{ "\\( f(x) \\) 的导数" }}</td>
          </tr>
          <tr>
            <td>{{ "\\( a, b \\)" }}</td>
            <td>积分上下限</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div slot="details">
      使用牛顿-莱布尼茨公式，可以将定积分转换为原函数在区间端点的差值。
    </div>
  </MathFormula>
</template>

搜索