人物列传组件用法

感谢龙湘担任本页展示用模特

本页主要列出编辑角色列传页面时，可以使用的组件
熟悉后，这些组件在其他页面也可以斟酌使用

与上一篇LoM-wiki 公开组件类似内容较多所以拆出一篇讲解。

角色信息框组件

ChTab 角色分页

ChTabs 提供属性如以下：

position：设置组件位置
- top 默认值：设置组件在上方
- bottom：设置组件在下方

ChTab 提供属性如以下：

title 必填：设置分页签的文字

效果：

源代码

Markdown

<ChTabs>
    <ChTab title="分页1">
    </ChTab>
    <ChTab title="分页2">
    </ChTab>
</ChTabs>

该组件中不可直接放入文字，他目前提供三种次级组件：

Ch 背景人物

Ch 提供属性如以下：

src 必填：设置做为背景图片档的 url
position：设置组件位置
- left 默认值：设置组件在左边
- center：设置组件在中间
- right：设置组件在右边
:animation：切换时是否激活图片动画

效果：

源代码

Markdown

<ChTabs>
    <ChTab title="我是第一页">
        <Ch
        src='/images/characters/girl_8/normal.webp'
        position='right'/>
    </ChTab>
    <ChTab title="切换我的图片有动画加载">
        <Ch
        src='/images/characters/girl_8/girl8_drumstick.webp'
        position='center'
        :animation=true />
    </ChTab>
</ChTabs>

ChName 姓名框

注：姓名框没有规范只能填姓名

ChName 提供属性如以下：

nameZh：设置中文姓名
nameEn：设置英文姓名
position：设置组件位置
- left 默认值：设置组件在左边
- center：设置组件在中间
- right：设置组件在右边

效果：

龙湘

Long Xiang

源代码

Markdown

<ChTabs>
    <ChTab title="龙湘">
        <ChName position='right'
        nameZh='龙湘'
        nameEn='Long Xiang'/>
  </ChTab>
</ChTabs>

ChTable 角色信息框

该组件有两种使用方式，这边先以简易用法说明

ChTable 提供属性如以下：

position：设置组件位置
- left 默认值：设置组件在左边
- right：设置组件在右边
:table：设置表格内的内容，以二维数组代表行列

效果：

源代码

Markdown

<ChTabs>
    <ChTab title="我是表格">
        <ChTable
        :table="[
            ['第一行第一列','第一行第二列'],
            ['第二行第一列','应该没搞错行列吧'],
            ['一行可以只有一栏'],
            ['也','可','以','分','好','几','栏'],
            ['他们都支持 `Markdown`'],
            ['~~删除线~~'],
            ['或是<br>换行'],
            ['喔不过换行必须使用`<br>`'],
            ['因为数组中的文字在md不能直接换行'],
            ['内容过多的话可以往下卷动'],
            ['使用这个方式设计的表格<br>每一行的第一栏固定是深色'],
            ['如果需要进一步设计<br>我们需要使用高级写法']
        ]"/>
    </ChTab>
    <ChTab title="我是表格2">
        <ChTable position='right'
        :table="[
            ['第一行第一列','第一行第二列'],
            ['第二行第一列','应该没搞错行列吧']
        ]"/>
    </ChTab>
</ChTabs>

结果

将组件组合起来后

效果：

龙湘

Long Xiang

源代码

markdown

<ChTabs>
    <ChTab title="龙湘">
        <ChName
        nameZh='龙湘'
        nameEn='Long Xiang'
        position='right'/>
        <Ch
        src='/images/characters/girl_8/normal.webp'
        position='right'/>
        <ChTable
        :table="[
            ['第一行第一列','第一行第二列'],
            ['第二行第一列','应该没搞错行列吧'],
            ['一行可以只有一栏'],
            ['也','可','以','分','好','几','栏'],
            ['他们都支持 `Markdown`'],
            ['~~删除线~~'],
            ['或是<br>换行'],
            ['喔不过换行必须使用`<br>`'],
            ['因为数组中的文字在md不能直接换行'],
            ['内容过多的话可以往下卷动'],
            ['使用这个方式设计的表格<br>每一行的第一栏固定是深色'],
            ['如果需要进一步设计<br>我们需要使用高级写法']
        ]"/>
    </ChTab>
    <ChTab title="吃鸡腿">
        <Ch
        src='/images/characters/girl_8/girl8_drumstick.webp'
        position='center'
        :animation=true />
    </ChTab>
</ChTabs>

额外

ChTable 高级用法

提示

当 ChTable 存在 :table 属性时，该用法无效。

ChTr 角色信息框

ChTr 提供属性如...
没有，目前 ChTr 没有自定义属性。

ChTd 角色信息框

ChTd 提供属性如以下：

isTitle：设置该栏是否为标题
- true：设置标题栏 style
- false：设置数据栏 style
position：设置文字位置
- left 默认值：设置文字在左边
- center：设置文字在中间
- right：设置文字在右边

高级用法效果：

效果：

源代码

Markdown

<ChTabs>
    <ChTab title="我是表格">
        <ChTable position='right'>
            <ChTr>
                <ChTd isTitle=true>
                    第一行第一列
                </ChTd>
                <ChTd>
                    第一行第二列
                </ChTd>
            </ChTr>
            <ChTr>
                <ChTd isTitle=true>
                    第二行第一列
                </ChTd>
                <ChTd>
                    应该没搞错行列吧
                </ChTd>
            </ChTr>
            <ChTr>
                <ChTd>
                    一行可以只有一栏
                </ChTd>
            </ChTr>
            <ChTr>
                <ChTd position='center'>
                    也
                </ChTd>
                <ChTd position='center'>
                    可
                </ChTd>
                <ChTd position='center'>
                    以
                </ChTd>
                <ChTd position='center'>
                    分
                </ChTd>
                <ChTd position='center'>
                    好
                </ChTd>
                <ChTd position='center'>
                    几
                </ChTd>
                <ChTd position='center'>
                    栏
                </ChTd>
            </ChTr>
            <ChTr>
                <ChTd isTitle=true>
                    他们都支持 `Markdown`
                </ChTd>
            </ChTr>
            <ChTr>
                <ChTd isTitle=true>
                    ~~删除线~~
                </ChTd>
            </ChTr>
            <ChTr>
                <ChTd isTitle=true>
                    或是<br>
                    换行
                </ChTd>
            </ChTr>
            <ChTr>
                <ChTd>
                    喔不过换行必须使用`< br>`
                </ChTd>
            </ChTr>
            <ChTr>
                <ChTd>
                    因为数组中的文字在md不能直接换行
                </ChTd>
            </ChTr>
            <ChTr>
                <ChTd isTitle=true position='right'>
                    内容过多的话可以往下卷动
                </ChTd>
            </ChTr>
            <ChTr>
                <ChTd position='center'>
                    使用这个方式设计的表格<br>
                    是否为标题栏可以自己设置
                </ChTd>
            </ChTr>
        </ChTable>
    </ChTab>
    <ChTab title="我是表格2">
        <ChTable>
            <ChTr>
                <ChTd>
                    第一行第一列
                </ChTd>
                <ChTd>
                    第一行第二列
                </ChTd>
            </ChTr>
            <ChTr>
                <ChTd>
                    第二行第一列
                </ChTd>
                <ChTd>
                    应该没搞错行列吧
                </ChTd>
            </ChTr>
        </ChTable>
    </ChTab>
</ChTabs>

集成组件

与上述组件相同，都是放在 <ChTab> 内
与上述组件不同，单独占据一个版面，不建议组合使用。

ChMeet 相遇图

ChMeet 提供属性如以下：

src 必填：设置人物立绘的 url
nameTitle ：设置人物的称谓
nameMain 必填：设置人物名称
desc ：设置简介/初识文本
:animation ：切换时是否激活动画

龙湘

源代码

Markdown


<ChTabs position="bottom">
	<ChTab title="龙湘">
        <ChMeet
			src='/images/characters/girl_8/normal.webp'
			nameMain='龙湘'
			desc='师承锦香宫，剑法精绝的清丽佳人。<br>踏着父亲从前的足迹踽踽前行，向往能够承其父志，行侠四方。'
			:animation=true
		/>
    </ChTab>
	<ChTab title="无动画版">
        <ChMeet
			src='/images/characters/girl_0/normal.webp'
			nameTitle='小师妹'
			nameMain='唐默铃'
			desc='芳名默铃，唐门掌门独生爱女，宛如森林小动物般的少女，性情淡漠，身系七串从来不响的铃当。<br>兴趣是折纸。'
			:animation=false
		/>
    </ChTab>
</ChTabs>

人物列传组件用法 ​

角色信息框组件 ​

ChTab 角色分页 ​

Ch 背景人物 ​

ChName 姓名框 ​

ChTable 角色信息框 ​

结果 ​

额外 ​

ChTr 角色信息框 ​

ChTd 角色信息框 ​

集成组件 ​

ChMeet 相遇图 ​

人物列传组件用法

角色信息框组件

ChTab 角色分页

Ch 背景人物

ChName 姓名框

ChTable 角色信息框

结果

额外

ChTr 角色信息框

ChTd 角色信息框

集成组件

ChMeet 相遇图