需包含
图标
简介
贡献者

element-plus-interactive-docs贡献指南

一、认领任务

请先前往element-plus-histoire文档计划 认领任务，认领任务时请在评论中提供您认领的组件名和预计时间。

eg:

认领`button`组件，预计完成时间为`xxxx-xx-xx`

二、编写文档

使用命令脚本创建模版

pnpm run create

Histoire文档地址

vue3文档
API
Histoire组件

三、提交PR

1. fork项目

请将仓库 fork 至个人空间后再 clone 至本地，官方仓库有权限限制，无法直接提交PR。

2. clone项目

git clone https://github.com/${USER}/element-plus-docs-histoire.git // clone项目 ${USER}为您的用户名

3. 同步代码

// 仅在第一次同步代码时需要执行
git remote add upstream https://github.com/element-plus/element-plus-docs-histoire.git  // 添加上游仓库
git remote -v // 查看远程仓库

在每次提交本地代码前，建议都从上游仓库同步最新代码，否则你可能要额外处理很多冲突。

这样你可以直接在本地通过如下方式将 upstream 官方仓库的改动同步到本地：

git fetch upstream // 获取上游仓库的改动
git rebase upstream/master // 将上游仓库的改动同步到本地

4. 创建分支

在同步官方仓库代码后，请从 master 分支创建新的 feat/fix 分支：

git checkout master // 切换到 master 分支
git checkout -b feat/xxx // 创建新的 feat/fix 分支

5. 提交代码

在本地完成代码修改后，可以通过如下方式将代码提交到远程仓库：

git add . // 将本地代码提交到暂存区
git commit -m 'feat: xxx' // 将暂存区的代码提交到本地仓库并添加提交信息
git push origin feat/xxx // 将本地仓库的代码提交到远程仓库

6. 提交PR

提交代码后你个人的 forked 的仓库主页会出现提示是否发起合并

确认提交内容无误后可以点击 “ Create pull request ” 按钮

7.预览页面

在发起PR后，可以点击此处预览页面

说明

为共同完成使用Histoire为element-plus搭建文档

任何人都可以处理此问题。
请务必在您的 pull request 中引用此问题。 ✨
感谢您的贡献! ✨

1. 参与贡献请在此 issue 中通过评论领取的组件
2. 评论需提供认领的组件和预计完成的时间
3. 未按时提交，会重新打开认领

Description

For common completion of building documentation for element-plus using Histoire

This issue can be handled by anyone.
Please be sure to reference this issue in your pull request. ✨
Thank you for your contribution! ✨

1. To participate in the contribution, please comment on the component claimed in this issue
2. Comments should provide the component claimed and the estimated time of completion
3. Failure to submit on time will reopen the component

Components

Basic

• Button #67
• Border #71
• Color #70
• Container #64
• Icon #69
• Layout #72
• Link https://githubfast.com/element-plus/element-plus-docs-histoire/pull/10 @sroxck
• Scrollbar #94
• Space #54
• Typography

Configuration

• Config Provider #96

Form

• Autocomplete https://githubfast.com/element-plus/element-plus-docs-histoire/pull/13 @faga1
• Cascader #16
• Checkbox #21
• ColorPicker https://githubfast.com/element-plus/element-plus-docs-histoire/pull/23 @faga1
• DatePicker https://githubfast.com/element-plus/element-plus-docs-histoire/pull/31 @faga1
• DateTimePicker #38
• Form #97
• Input #18
• Input Number #42
• Radio https://githubfast.com/element-plus/element-plus-docs-histoire/pull/14 @sroxck
• Rate https://githubfast.com/element-plus/element-plus-docs-histoire/pull/28 @Alkaidcc
• Select #65
• Slider #98
• Switch https://githubfast.com/element-plus/element-plus-docs-histoire/pull/24 @winchesHe
• TimePicker #98
• TimeSelect #110
• Transfer. #125
• Upload #130
• virtualized Select

Data

• Avatar https://githubfast.com/element-plus/element-plus-docs-histoire/pull/20 @yang1206
• Badge https://githubfast.com/element-plus/element-plus-docs-histoire/pull/19 @waynzh
• Calendar #73
• Card https://githubfast.com/element-plus/element-plus-docs-histoire/pull/22 @waynzh
• Carousel #74
• Collapse #82
• Descriptions #45
• Empty #43
• Image #85
• Infinite Scroll #108
• Pagination #46
• Progress #49
• Result #17
• Skeleton #58
• Tag #15
• Timeline #88
• Virtualized Table
• Table
• Tree
• TreeSelect
• virtualized tree

Navigation

• Affix #128
• Backtop #126
• Breadcrumb #105
• Dropdown #106
• Menu #107
• Page Header #104
• Steps #102
• Tabs #107

Feedback

• Alert #1
• Dialog #87
• Drawer #117
• Loading #93
• Message #100
• Message Box #119
• Notification #84
• Popconfirm #122
• Popover. #116
• Tooltip #114

Others

• Divider #12

https://element-plus-interactive-docs.netlify.app/story/src-components-data-pagination-story-vue?variantId=src-components-data-pagination-story-vue-0.
Text in this story can't change with background color, currently, we can use --histoire-contrast-color css variable to implement it.
reference link:
https://histoire.dev/reference/config.html#backgroundpresets

痛点分析

1. 组件规范靠大家自觉遵守

   默认是src/components/下组件类型文件夹进行归类，组件文档小驼峰，以.story.vue结尾

2. 手动归类建文件夹可能会混乱

3. 手动建文件不够优雅

提议改进

命令生成

文档复制组件名粘贴至命令行

# 创建单个组件文档
pnpm run create Button
# 创建多个组件文档
pnpm run create DatePicker InputNumber

datePicker.story.vue创建成功！
path:D:/Desktop/code/fork/element-plus-docs-histoire/src/components/Form/datePicker.story.vue
inputNumber.story.vue创建成功！
path:D:/Desktop/code/fork/element-plus-docs-histoire/src/components/Form/inputNumber.story.vue

命令行交互生成

button.story.vue已存在！
color.story.vue创建成功！
path:D:/Desktop/code/fork/element-plus-docs-histoire/src/components/Basic/color.story.vue