Article 文章样式

该组件属于样式组件，提供了类似微信公众号文章页的一些样式，可供用户快速呈现文章内容。

使用指南

在 app.js 文件中引入样式

:::demo

1. if (process.env.TARO_ENV === 'weapp') {
2. require('taro-ui/dist/weapp/css/index.css')
3. } else if (process.env.TARO_ENV === 'h5') {
4. require('taro-ui/dist/h5/css/index.css')
5. }

:::

可用样式类目

:::demo

1. .at-article /* 根类名 */
2. .at-article__h1 /* 一级标题 */
3. .at-article__h2 /* 二级标题 */
4. .at-article__h3 /* 三级标题 */
5. .at-article__info /* 作者信息 */
6. .at-article__p /* 段落 */
7. .at-article__img /* 图片 */

:::

使用举例

:::demo

1. <View className='at-article'>
2. <View className='at-article__h1'>
3. 这是一级标题这是一级标题
4. </View>
5. <View className='at-article__info'>
6. 2017-05-07&nbsp;&nbsp;&nbsp;这是作者
7. </View>
8. <View className='at-article__content'>
9. <View className='at-article__section'>
10. <View className='at-article__h2'>这是二级标题</View>
11. <View className='at-article__h3'>这是三级标题</View>
12. <View className='at-article__p'>
13. 这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本落。这是文本段落。1234567890123456789012345678901234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ
14. </View>
15. <View className='at-article__p'>
16. 这是文本段落。这是文本段落。
17. </View>
18. <Image
19. className='at-article__img'
20. src='https://jdc.jd.com/img/400x400'
21. mode='widthFix' />
22. </View>
23. </View>
24. </View>

:::