mirror of
https://github.com/creativetimofficial/muse-vue-ant-design-dashboard.git
synced 2025-08-16 19:42:07 +08:00
325 lines
8.9 KiB
Vue
325 lines
8.9 KiB
Vue
<template>
|
|
<div>
|
|
<div class="page-row">
|
|
<div class="page-content">
|
|
<section class="mb-24">
|
|
<h1>Typography</h1>
|
|
<p class="text-dark">
|
|
Documentation and examples for Muse Dashboard typography.
|
|
</p>
|
|
</section>
|
|
<a-divider />
|
|
<section class="mb-24" id="Headings">
|
|
<h2>Headings</h2>
|
|
<p>
|
|
All HTML headings, <code><h1></code> through <code><h6></code> are available.
|
|
</p>
|
|
</section>
|
|
<section class="mb-24">
|
|
<a-divider orientation="left">Regular</a-divider>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Heading</th>
|
|
<th>Example</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<p><code><h1></h1></code></p>
|
|
</td>
|
|
<td><span class="h1 font-regular">h1. Muse heading</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><h2></h2></code></p>
|
|
</td>
|
|
<td><span class="h2 font-regular">h2. Muse heading</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><h3></h3></code></p>
|
|
</td>
|
|
<td><span class="h3 font-regular">h3. Muse heading</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><h4></h4></code></p>
|
|
</td>
|
|
<td><span class="h4 font-regular">h4. Muse heading</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><h5></h5></code></p>
|
|
</td>
|
|
<td><span class="h5 font-regular">h5. Muse heading</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><h6></h6></code></p>
|
|
</td>
|
|
<td><span class="h6 font-regular">h6. Muse heading</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<muse-snippet :code="regularHeadings"></muse-snippet>
|
|
</section>
|
|
<section class="mb-24">
|
|
<a-divider orientation="left">Semibold</a-divider>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Heading</th>
|
|
<th>Example</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<p><code><h1></h1></code></p>
|
|
</td>
|
|
<td><span class="h1 font-semibold">h1. Muse heading</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><h2></h2></code></p>
|
|
</td>
|
|
<td><span class="h2 font-semibold">h2. Muse heading</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><h3></h3></code></p>
|
|
</td>
|
|
<td><span class="h3 font-semibold">h3. Muse heading</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><h4></h4></code></p>
|
|
</td>
|
|
<td><span class="h4 font-semibold">h4. Muse heading</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><h5></h5></code></p>
|
|
</td>
|
|
<td><span class="h5 font-semibold">h5. Muse heading</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><h6></h6></code></p>
|
|
</td>
|
|
<td><span class="h6 font-semibold">h6. Muse heading</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<muse-snippet :code="semiBoldHeadings"></muse-snippet>
|
|
</section>
|
|
<section class="mb-24">
|
|
<a-divider orientation="left">Bold</a-divider>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Heading</th>
|
|
<th>Example</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<p><code><h1></h1></code></p>
|
|
</td>
|
|
<td><span class="h1">h1. Muse heading</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><h2></h2></code></p>
|
|
</td>
|
|
<td><span class="h2">h2. Muse heading</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><h3></h3></code></p>
|
|
</td>
|
|
<td><span class="h3">h3. Muse heading</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><h4></h4></code></p>
|
|
</td>
|
|
<td><span class="h4">h4. Muse heading</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><h5></h5></code></p>
|
|
</td>
|
|
<td><span class="h5">h5. Muse heading</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><h6></h6></code></p>
|
|
</td>
|
|
<td><span class="h6">h6. Muse heading</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<muse-snippet :code="boldHeadings"></muse-snippet>
|
|
</section>
|
|
<section class="mb-24" id="Heading-Classes">
|
|
<h2>Heading Classes</h2>
|
|
<p>
|
|
All HTML headings are also available using heading classes from <code><h1></code> to <code><h6></code>.
|
|
</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Heading</th>
|
|
<th>Example</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<p><code><p class="h1"></p></code></p>
|
|
</td>
|
|
<td><p class="h1">h1. Muse heading</p></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><p class="h2"></p></code></p>
|
|
</td>
|
|
<td><p class="h2">h2. Muse heading</p></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><p class="h3"></p></code></p>
|
|
</td>
|
|
<td><p class="h3">h3. Muse heading</p></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><p class="h4"></p></code></p>
|
|
</td>
|
|
<td><p class="h4">h4. Muse heading</p></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><p class="h5"></p></code></p>
|
|
</td>
|
|
<td><p class="h5">h5. Muse heading</p></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p><code><p class="h6"></p></code></p>
|
|
</td>
|
|
<td><p class="h6">h6. Muse heading</p></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<muse-snippet :code="headingsClasses"></muse-snippet>
|
|
</section>
|
|
<section class="mb-24" id="Paragraphs">
|
|
<h2>Paragraphs</h2>
|
|
<div class="showcase pb-10">
|
|
<p>
|
|
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Libero porro voluptatum
|
|
laboriosam eveniet asperiores, expedita provident commodi ullam perferendis id,
|
|
rem enim quisquam earum architecto ut nobis repellendus magni dolorum.
|
|
</p>
|
|
</div>
|
|
<muse-snippet :code="paragraph"></muse-snippet>
|
|
</section>
|
|
|
|
<p class="text-right font-semibold mb-24">
|
|
Looking for more Ant Design Vue? Please check the
|
|
<a target="_blank" href="https://antdv.com/docs/vue/introduce/">official docs</a>.
|
|
</p>
|
|
</div>
|
|
<muse-anchor :anchors="anchors"></muse-anchor>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
head () {
|
|
return {
|
|
title: 'Typography | Muse Vue Ant Design Dashboard @ Creative Tim',
|
|
meta: [
|
|
{ hid: 'description', name: 'description', content: 'Documentation and examples for Muse Dashboard typography.' }
|
|
]
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
anchors: {
|
|
"Headings": "Headings",
|
|
"Heading-Classes": "Heading Classes",
|
|
"Paragraphs": "Paragraphs",
|
|
},
|
|
regularHeadings: `
|
|
<h1 class="font-regular">h1. Muse heading</h1>
|
|
<h2 class="font-regular">h2. Muse heading</h2>
|
|
<h3 class="font-regular">h3. Muse heading</h3>
|
|
<h4 class="font-regular">h4. Muse heading</h4>
|
|
<h5 class="font-regular">h5. Muse heading</h5>
|
|
<h6 class="font-regular">h6. Muse heading</h6>`,
|
|
semiBoldHeadings: `
|
|
<h1 class="font-semibold">h1. Muse heading</h1>
|
|
<h2 class="font-semibold">h2. Muse heading</h2>
|
|
<h3 class="font-semibold">h3. Muse heading</h3>
|
|
<h4 class="font-semibold">h4. Muse heading</h4>
|
|
<h5 class="font-semibold">h5. Muse heading</h5>
|
|
<h6 class="font-semibold">h6. Muse heading</h6>`,
|
|
boldHeadings: `
|
|
<h1>h1. Muse heading</h1>
|
|
<h2>h2. Muse heading</h2>
|
|
<h3>h3. Muse heading</h3>
|
|
<h4>h4. Muse heading</h4>
|
|
<h5>h5. Muse heading</h5>
|
|
<h6>h6. Muse heading</h6>`,
|
|
headingsClasses: `
|
|
<p class="h1">h1. Muse heading</p>
|
|
<p class="h2">h2. Muse heading</p>
|
|
<p class="h3">h3. Muse heading</p>
|
|
<p class="h4">h4. Muse heading</p>
|
|
<p class="h5">h5. Muse heading</p>
|
|
<p class="h6">h6. Muse heading</p>`,
|
|
paragraph: `
|
|
<p>
|
|
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Libero porro voluptatum
|
|
laboriosam eveniet asperiores, expedita provident commodi ullam perferendis id,
|
|
rem enim quisquam earum architecto ut nobis repellendus magni dolorum.
|
|
</p>`,
|
|
componentRegistration: `
|
|
import { Button } from 'ant-design-vue';
|
|
Vue.use(Button);`,
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
table {
|
|
width: 100%;
|
|
}
|
|
table th,
|
|
table td {
|
|
padding: 10px 20px;
|
|
border: 1px solid #dddddd;
|
|
vertical-align: middle;
|
|
}
|
|
table th {
|
|
background-color: #eeeeee;
|
|
}
|
|
table th,
|
|
table td {
|
|
>* {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
</style> |