MathFormula
简介
MathFormula 用于在文档或页面中美观、统一地展示数学公式，支持标题、编号、说明与符号表，内置多种视觉变体并适配主题与响应式。
案例
数学公式
公式是数学中表达数量关系、结构规律的符号表达式，是解决数学问题的重要工具。重要结论公式应熟练掌握和灵活应用。
换底公式 公式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
自定义 CSS 类名，用于覆盖或增强组件样式。
数学公式
公式是数学中表达数量关系、结构规律的符号表达式，是解决数学问题的重要工具。重要结论公式应熟练掌握和灵活应用。
自定义样式 公式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
公式编号，支持字符串或数字。
数学公式
公式是数学中表达数量关系、结构规律的符号表达式，是解决数学问题的重要工具。重要结论公式应熟练掌握和灵活应用。
换底公式 公式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
符号说明是否默认折叠，默认值为 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
公式标题。
数学公式
公式是数学中表达数量关系、结构规律的符号表达式，是解决数学问题的重要工具。重要结论公式应熟练掌握和灵活应用。
换底公式 公式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
视觉风格，可选值 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
公式内容（支持 LaTeX）。
desc
说明文字。
symbols
符号说明区域，可折叠。
details
详细说明区域，可折叠。
数学公式
公式是数学中表达数量关系、结构规律的符号表达式，是解决数学问题的重要工具。重要结论公式应熟练掌握和灵活应用。
完整插槽 公式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>