import arkUiDemo from '../assets/ark-ui-demo.png'
import storybookLayout from '../assets/storybook-layout.png'
import mdxTitle from '../assets/mdx-title.png'
import storyTitle from '../assets/story-title.png'
import template from '../assets/template.png'
import propsImg from '../assets/props.png'
import cases from '../assets/cases.png'

<Meta title="使用说明/物料概念" />

## 概念解释

物料文档分为分为导航、文档和插件区域：
<img src={storybookLayout} alt="" />

.导航区域
arkcli `会自动提取`*.stories.mdx`的`Meta`标签的`title`，和`*.stories.js`导出的示例名称，生成导航栏。

.文档区域
 文档区域显示的是`.stories.mdx`的内容区，和`*.stories.*`的内容区域
 文档含有canvas (物料展示区域) 和DOCS（物料文档区域）

.插件区域
  Controls  控制组件的属性 （包含props和event）
  Actions   事件的抛出
  mock      模拟数据测试

## .arkdoc arkcli 物料文档目录结构

    |-- .arkdoc
    |   |-- config
    |   |   |-- main.js // 可配置stories.js和mdx的解析路径(请用绝对路径)，默认读取.arkdoc/examples路径下所有文档文件
        |   |-- preview.js // 可配置右侧文档区域的展示
    |   |   |-- preview-head.html // 文档canvas和docs区域里iframe的head标签内容
    |   |   |-- preview-body.html // 文档canvas和docs区域里iframe的body标签内容
    |   |-- example // 存放文档示例  
    

## .mdx文件的用法
mdx功能基本和markdown一致。但是mdx还支持import导入组件使用，功能更强大。
常见用法只需看下本示例中mdx文档是如何写的，基本够日常使用了。
更多用法可以看[storybook官方mdx用法篇](https://storybook.js.org/docs/react/writing-docs/mdx)


## 支持的类型
1. vue、js、.mdx 等类型文件
