From dcbacc2051cb2f495d826869573ddc7c05ecf09e Mon Sep 17 00:00:00 2001 From: KeiferJu Date: Tue, 12 May 2020 15:31:04 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E8=88=AA=E7=BB=84=E4=BB=B6=E6=9B=B4?= =?UTF-8?q?=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 33 +++++------ README_cn.md => README_en.md | 33 ++++++----- docs/README.md | 33 +++++------ docs/src/routes/components/nav.svelte | 79 +++++++++++++++------------ src/components/Nav/Nav.svelte | 44 +++++++-------- src/components/Nav/NavLayout.svelte | 5 +- 6 files changed, 118 insertions(+), 109 deletions(-) rename README_cn.md => README_en.md (54%) diff --git a/README.md b/README.md index 238f54d..bdf5ece 100644 --- a/README.md +++ b/README.md @@ -3,28 +3,29 @@ # svelma-pro -* [中文文档](README_cn.md) +* [English Document](README_en.md) -Based on [svelma](https://github.com/c0bra/svelma) project extension and modification, thanks to the original author components such as c0bra and bulma -Based on the original component library, some common components and bug fixes are extended, and the functions of some components are modified. +基于开源项目[svelma](https://github.com/c0bra/svelma) 扩展和修改, 所以在此感谢原作者`c0bra`以及`bulma`,`svelte`等团队. + +原项目组件比较少,存在一些小bug,所以我在在原有的组件库的基础上，扩展了一些常见的组件(例如时间,日期选择器,仿antd的layout布局,分页,等等),并对发现的一些bug进行了修改，对原有的组件功能,事件以及用户配置进行更人性化的修改和扩展。 -# Documentation +# 文档 -[See docs + demos site here](http://www.myllcn.com/svelma-pro/) +[文档及Demo]](http://www.myllcn.com/svelma-pro/) -# Quick Start +# 快速开始 -### 1. Create a svelte app(or sapper app) from the template +### 1. 通过template创建svelte应用(或者sapper应用) -[https://github.com/sveltejs/template](sveltejs/template) is a template repo for svelte. [degit](https://www.npmjs.com/package/degit) will scaffold the repo for you: +[https://github.com/sveltejs/template](sveltejs/template) 是一个svelte的初始化模板. [degit](https://www.npmjs.com/package/degit)这个脚手架可以帮你获取它:(PS: `Rich-Harris`大神被称为前端轮子哥果然是有有道理的,svelte,rollup,degit都是他的手笔) $ npx degit sveltejs/template my-svelma-project $ cd my-svelma-project $ npm install -### 2. Install svelma and dependencies +### 2. 引入bulma样式及svelma-pro组件等依赖 #### bulma and svelma-pro @@ -36,10 +37,10 @@ Based on the original component library, some common components and bug fixes ar ### 3. config -Add the scss plugin to your rollup(webpack) config: +在你的rollup或者webpack配置文件中添加scss支持: ```js -// rollup.config.js +// rollup配置 rollup.config.js import sveltePreprocess from 'svelte-preprocess'; // ... @@ -65,7 +66,7 @@ export default { ``` ```js -// webpack.config.js +// webpack配置 webpack.config.js import sveltePreprocess from 'svelte-preprocess'; // ... @@ -98,7 +99,7 @@ module.export = { } ``` -### 4. Import Bulma's CSS and Svelma components +### 4. 引入Bulma的CSS样式和svelma-pro组件 ```html @@ -108,15 +109,15 @@ module.export = { ``` -### 5. Include [Font Awesome](https://fontawesome.com/) icons +### 5. 引入 [Font Awesome](https://fontawesome.com/) 图标: -From CDN in your HTML page: +在你的主HTML配置CDN页面: ```html ``` -...or as an npm package imported into your root component: +...或者通过npm包: $ npm install --save @fortawesome/fontawesome-free diff --git a/README_cn.md b/README_en.md similarity index 54% rename from README_cn.md rename to README_en.md index 80038d0..1c3ebdd 100644 --- a/README_cn.md +++ b/README_en.md @@ -3,29 +3,28 @@ # svelma-pro -* [English Document](README.md) +* [中文文档](README.md) -基于开源项目[svelma](https://github.com/c0bra/svelma) 扩展和修改, 所以在此感谢原作者`c0bra`以及`bulma`,`svelte`等团队. - -原项目组件比较少,存在一些小bug,所以我在在原有的组件库的基础上，扩展了一些常见的组件(例如时间,日期选择器,仿antd的layout布局,分页,等等),并对发现的一些bug进行了修改，对原有的组件功能,事件以及用户配置进行更人性化的修改和扩展。 +Based on [svelma](https://github.com/c0bra/svelma) project extension and modification, thanks to the original author components such as c0bra and bulma +Based on the original component library, some common components and bug fixes are extended, and the functions of some components are modified. -# 文档 +# Documentation -[文档及Demo]](http://www.myllcn.com/svelma-pro/) +[See docs + demos site here](http://www.myllcn.com/svelma-pro/) -# 快速开始 +# Quick Start -### 1. 通过template创建svelte应用(或者sapper应用) +### 1. Create a svelte app(or sapper app) from the template -[https://github.com/sveltejs/template](sveltejs/template) 是一个svelte的初始化模板. [degit](https://www.npmjs.com/package/degit)这个脚手架可以帮你获取它:(PS: `Rich-Harris`大神被称为前端轮子哥果然是有有道理的,svelte,rollup,degit都是他的手笔) +[https://github.com/sveltejs/template](sveltejs/template) is a template repo for svelte. [degit](https://www.npmjs.com/package/degit) will scaffold the repo for you: $ npx degit sveltejs/template my-svelma-project $ cd my-svelma-project $ npm install -### 2. 引入bulma样式及svelma-pro组件等依赖 +### 2. Install svelma and dependencies #### bulma and svelma-pro @@ -37,10 +36,10 @@ ### 3. config -在你的rollup或者webpack配置文件中添加scss支持: +Add the scss plugin to your rollup(webpack) config: ```js -// rollup配置 rollup.config.js +// rollup.config.js import sveltePreprocess from 'svelte-preprocess'; // ... @@ -66,7 +65,7 @@ export default { ``` ```js -// webpack配置 webpack.config.js +// webpack.config.js import sveltePreprocess from 'svelte-preprocess'; // ... @@ -99,7 +98,7 @@ module.export = { } ``` -### 4. 引入Bulma的CSS样式和svelma-pro组件 +### 4. Import Bulma's CSS and Svelma components ```html @@ -109,15 +108,15 @@ module.export = { ``` -### 5. 引入 [Font Awesome](https://fontawesome.com/) 图标: +### 5. Include [Font Awesome](https://fontawesome.com/) icons -在你的主HTML配置CDN页面: +From CDN in your HTML page: ```html ``` -...或者通过npm包: +...or as an npm package imported into your root component: $ npm install --save @fortawesome/fontawesome-free diff --git a/docs/README.md b/docs/README.md index 238f54d..bdf5ece 100644 --- a/docs/README.md +++ b/docs/README.md @@ -3,28 +3,29 @@ # svelma-pro -* [中文文档](README_cn.md) +* [English Document](README_en.md) -Based on [svelma](https://github.com/c0bra/svelma) project extension and modification, thanks to the original author components such as c0bra and bulma -Based on the original component library, some common components and bug fixes are extended, and the functions of some components are modified. +基于开源项目[svelma](https://github.com/c0bra/svelma) 扩展和修改, 所以在此感谢原作者`c0bra`以及`bulma`,`svelte`等团队. + +原项目组件比较少,存在一些小bug,所以我在在原有的组件库的基础上，扩展了一些常见的组件(例如时间,日期选择器,仿antd的layout布局,分页,等等),并对发现的一些bug进行了修改，对原有的组件功能,事件以及用户配置进行更人性化的修改和扩展。 -# Documentation +# 文档 -[See docs + demos site here](http://www.myllcn.com/svelma-pro/) +[文档及Demo]](http://www.myllcn.com/svelma-pro/) -# Quick Start +# 快速开始 -### 1. Create a svelte app(or sapper app) from the template +### 1. 通过template创建svelte应用(或者sapper应用) -[https://github.com/sveltejs/template](sveltejs/template) is a template repo for svelte. [degit](https://www.npmjs.com/package/degit) will scaffold the repo for you: +[https://github.com/sveltejs/template](sveltejs/template) 是一个svelte的初始化模板. [degit](https://www.npmjs.com/package/degit)这个脚手架可以帮你获取它:(PS: `Rich-Harris`大神被称为前端轮子哥果然是有有道理的,svelte,rollup,degit都是他的手笔) $ npx degit sveltejs/template my-svelma-project $ cd my-svelma-project $ npm install -### 2. Install svelma and dependencies +### 2. 引入bulma样式及svelma-pro组件等依赖 #### bulma and svelma-pro @@ -36,10 +37,10 @@ Based on the original component library, some common components and bug fixes ar ### 3. config -Add the scss plugin to your rollup(webpack) config: +在你的rollup或者webpack配置文件中添加scss支持: ```js -// rollup.config.js +// rollup配置 rollup.config.js import sveltePreprocess from 'svelte-preprocess'; // ... @@ -65,7 +66,7 @@ export default { ``` ```js -// webpack.config.js +// webpack配置 webpack.config.js import sveltePreprocess from 'svelte-preprocess'; // ... @@ -98,7 +99,7 @@ module.export = { } ``` -### 4. Import Bulma's CSS and Svelma components +### 4. 引入Bulma的CSS样式和svelma-pro组件 ```html @@ -108,15 +109,15 @@ module.export = { ``` -### 5. Include [Font Awesome](https://fontawesome.com/) icons +### 5. 引入 [Font Awesome](https://fontawesome.com/) 图标: -From CDN in your HTML page: +在你的主HTML配置CDN页面: ```html ``` -...or as an npm package imported into your root component: +...或者通过npm包: $ npm install --save @fortawesome/fontawesome-free diff --git a/docs/src/routes/components/nav.svelte b/docs/src/routes/components/nav.svelte index 247ce32..1ac6676 100644 --- a/docs/src/routes/components/nav.svelte +++ b/docs/src/routes/components/nav.svelte @@ -7,27 +7,35 @@ const jsdocItem = await res2.json() const jsdocLayout = await res3.json() - return { jsdoc ,jsdocItem, jsdocLayout} + return { + jsdoc, + jsdocItem, + jsdocLayout + } } - + import { Nav, NavItem, NavLayout } from 'svelma-pro' - + -`}> + `}>
- +
@@ -60,23 +68,22 @@

下拉列表

- - import { Nav, NavItem, NavLayout } from 'smx-svelma' - + + import { Nav, NavItem, NavLayout } from 'svelma-pro' + - -`}> + + `}>