Yy Craft

主题

Typography 文字排版 ​

段落 ​

查看示例
vue
<template>
  <yy-p>这是一段普通的段落文本</yy-p>
  <yy-p depth="2">
    这是二级深度的段落文本
  </yy-p>
  <yy-p depth="3">
    这是三级深度的段落文本
  </yy-p>
</template>

文字 ​

查看示例
vue
<template>
  <yy-text>Text </yy-text>
  <yy-text type="success">
    Success
  </yy-text>
  <yy-text type="warning">
    Warning
  </yy-text>
  <yy-text type="error">
    Error
  </yy-text>
  <yy-text type="info">
    Info
  </yy-text>
  <yy-text depth="1">
    Primary depth
  </yy-text>
  <yy-text depth="2">
    Secondary depth
  </yy-text>
  <yy-text depth="3">
    Tertiary depth
  </yy-text>
  <yy-text strong>
    Strong
  </yy-text>
  <yy-text italic>
    Italic
  </yy-text>
  <yy-text underline>
    Underline
  </yy-text>
  <yy-text delete>
    Delete
  </yy-text>
  <yy-text tag="div">
    使用DIV作为标签
  </yy-text>
  <yy-text code>
    Code
  </yy-text>
  <yy-text code delete>
    Code
  </yy-text>
</template>

链接 ​

查看示例
vue
<template>
  <yy-a href="https://music.163.com/#/song?id=67411" target="_blank">
    Shall We Talk
  </yy-a>
</template>

标题 ​

查看示例
vue
<template>
  <yy-h1>一级标题</yy-h1>
  <yy-h2>二级标题</yy-h2>
  <yy-h3>三级标题</yy-h3>
  <yy-h4>四级标题</yy-h4>
  <yy-h5>五级标题</yy-h5>
  <yy-h6>六级标题</yy-h6>
  <yy-h6 prefix>
    带前缀的标题
  </yy-h6>
  <yy-h6 prefix align-text>
    带前缀且居中的标题
  </yy-h6>
  <yy-h6 prefix align-text prefix-color="#1F2225">
    自定义前缀色
  </yy-h6>
  <yy-h6 prefix align-text type="success">
    成功色标题
  </yy-h6>
  <yy-h6 type="warning">
    警告色标题
  </yy-h6>
  <yy-h6 prefix align-text type="error">
    错误色标题
  </yy-h6>
  <yy-h6 prefix align-text type="info">
    信息色标题
  </yy-h6>
</template>

Props ​

P ​

参数说明类型默认值
depth深度，支持 1/2/3number1

Text ​

参数说明类型默认值
type主题色，可选值：success/warning/error/infostring-
depth层级，支持 1/2/3number-
strong加粗boolean-
italic斜体boolean-
underline下划线boolean-
delete删除线boolean-
tag渲染为指定标签stringspan
code代码样式boolean-

H1 - H6 ​

参数说明类型默认值
prefix是否显示前缀boolean-
align-text是否居中boolean-
prefix-color前缀颜色string-
type主题色string-