#手动多栏布局 <Col>

#段落 <P />

##长文本示范

##行内元素

#LaTex 公式 <Formulas />

#应用窗格 <WindowApp />

##<WindowAppIframe />

Indexes

你好，欢迎来到本站，本文介绍

动态博文

的提供的组件库，也同时作为站点的样式测试用例。

# 标题 <H1 /> ↵

能支持支持多级标题, 除了上面的 H1 外，还有 H2 H3

这是 H2

这是 H3

# 图片 <ImgDynamic /> ↵

00import filePicExample from './pic-example.png';
01<ImgDynamic file={filePicExample} />

# 手动多栏布局 <Col> ↵

利用这个组件可以实现下面的布局

苹果

香蕉

牛奶

但是需要注意，不会自动调整宽度，只是通过 units 来对 childs 实现均等分，上述效果代码实现如下：

00<Col units={[1, 2, 1]}>
01  <P style={{ background: '#f49292' }}>苹果</P>
02  <P style={{ background: '#f3ec8e', height: '4em' }}>香蕉</P>
03  <P style={{ background: '#e6eff3' }}>牛奶</P>
04</Col>

# 段落 <P /> ↵

可以通过这个组件来展示段落。

长文本示范

孔乙己是站着喝酒而穿长衫的唯一的人。他身材很高大；青白脸色，皱纹间时常夹些伤痕；一部乱蓬蓬的花白的胡子。穿的虽然是长衫，可是又脏又破，似乎十多年没有补，也没有洗。他对人说话，总是满口之乎者也，教人半懂不懂的。因为他姓孔，别人便从描红纸上的“上大人孔乙己”这半懂不懂的话里，替他取下一个绰号，叫作孔乙己。
孔乙己一到店，所有喝酒的人便都看着他笑，有的叫道，“孔乙己，你脸上又添上新伤疤了！”他不回答，对柜里说，“温两碗酒，要一碟茴香豆。”便排出九文大钱。他们又故意的高声嚷道，“你一定又偷了人家的东西了！”孔乙己睁大眼睛说，“你怎么这样凭空污人清白……”“什么清白？我前天亲眼见你偷了何家的书，吊着打。”孔乙己便涨红了脸，额上的青筋条条绽出，争辩道，“窃书不能算偷……窃书！……读书人的事，能算偷么？”接连便是难懂的话，什么“君子固穷”，什么“者乎”之类，引得众人都哄笑起来：店内外充满了快活的空气。

行内元素

段落内支持一些行内元素的特性。

支持首行缩进, 也支持右边这些 Markdown 的最佳实践

这些行内元素的具体调用方式如下所示

1.
高亮
2.
斜体
3.
加粗
4.
斜体加粗高亮

00<Col units={[2, 1]}>
01  <>
02    <P sinking>支持首行缩进, 也支持右边这些 Markdown 的最佳实践</P>
03    <P>这些行内元素的具体调用方式如下所示</P>
04  </>
05  <Numbering> // 这是列表组件, 后面会提到
06    <P>`高亮`</P>
07    <P>_斜体_</P>
08    <P>**加粗**</P>
09    <P>_**`斜体加粗高亮`**_</P>
10  </Numbering>
11</Col>

# 引用 <Quote /> ↵

人生而自由，却又无往不在枷锁之中卢梭

# 编号列表 <Numbering /> ↵

下面演示如何构造编号列表:

Numbering

, 通过传 props.template 参数可以支持有序/无序以及构造其他各种不同的列表样式风格:

00// template 有多个编号模板取值, 具体看类型
01<Numbering template='123'>
02  <P>苹果</P>
03  <P>香蕉</P>
04  <P>牛奶</P>
05</Numbering>

template=123

1.
苹果
2.
香蕉
3.
牛奶

template=abc

a)
苹果
b)
香蕉
c)
牛奶

template=iii

i.
苹果
ii.
香蕉
iii.
牛奶

template=katakana

ア
苹果
イ
香蕉
ウ
牛奶

template=rect

苹果
香蕉
牛奶

嵌套

编号样式默认继承，当然也可以显式指定

00<Numbering template='123'>
01  <P>苹果</P>
02  <P>香蕉</P>
03  <P>牛奶</P>
04  <Numbering>
05    <P>苹果</P>
06    <P>香蕉</P>
07    <P>牛奶</P>
08    <Numbering template='iii' start={10}>
09      <P>苹果</P>
10      <P>香蕉</P>
11      <P>牛奶</P>
12    </Numbering></Numbering></Numbering>

1.
苹果
2.
香蕉
3.
牛奶
1. 1.
  苹果
2. 2.
  香蕉
3. 3.
  牛奶
4. 1. x.
    苹果
  2. xi.
    香蕉
  3. xii.
    牛奶

# 代码块 <Code /> ↵

00// hello-world.tsx
01console.log('hello, world!')

上述这个代码块可以这样调出:

00<Code lang="tsx" source={`
01  // hello-world.tsx
02  export default () => console.log('hello, world!')
03`} />

最佳实践是使用 query-import 来做到只导入代码文本，不执行:

00import sayHelloWorld from './hello-world';
01import CodeHelloWorld from './hello-world?code';
02<div onClick={sayHelloWorld}>
03  <CodeHelloWorld />
04</div>

# LaTex 公式 <Formulas /> ↵

00<Formula source={`
01  Hello, \\\\
02  \\LaTex \\\\
03`} />

He ll o, L A T E X

由于 `\` 被模版字符串占用了，目前使用体验比较糟糕，待优化

# 应用窗格 <WindowApp /> ↵

My App

00<WindowApp height="auto" initialRun={false} title="My App">
01  <div style={{ textAlign: 'center', padding: '2em' }}>
02    hello, world!
03  </div>
04</WindowApp>

支持以窗格方式展示一段 JSX 实例, 窗格右上角支持若干功能, 如启动/暂停/全屏/窗口化, 其他参数含义如下:

height?
传入
auto
的时候窗格高度由传入的 JSX 撑开，其他传入情况则定高，默认值为
30rem
title?
窗口 title 信息
initialRun?
是否默认执行，如果传
false
则首次加载后不执行渲染

<WindowAppIframe />

/?这是一段链接

00<WindowAppIframe
01  src="/?这是一段链接"
02  height="30rem"
03/>

支持以窗格方式展示 iframe 页面, 需要传 src 参数指定链接