导航组件更新
This commit is contained in:
KeiferJu
parent
fa467d405b
commit
dcbacc2051
33
README.md
33
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 = {
|
|||
</script>
|
||||
```
|
||||
|
||||
### 5. Include [Font Awesome](https://fontawesome.com/) icons
|
||||
### 5. 引入 [Font Awesome](https://fontawesome.com/) 图标:
|
||||
|
||||
From CDN in your HTML page:
|
||||
在你的主HTML配置CDN页面:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"></link>
|
||||
```
|
||||
|
||||
...or as an npm package imported into your root component:
|
||||
...或者通过npm包:
|
||||
|
||||
$ npm install --save @fortawesome/fontawesome-free
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = {
|
|||
</script>
|
||||
```
|
||||
|
||||
### 5. 引入 [Font Awesome](https://fontawesome.com/) 图标:
|
||||
### 5. Include [Font Awesome](https://fontawesome.com/) icons
|
||||
|
||||
在你的主HTML配置CDN页面:
|
||||
From CDN in your HTML page:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"></link>
|
||||
```
|
||||
|
||||
...或者通过npm包:
|
||||
...or as an npm package imported into your root component:
|
||||
|
||||
$ npm install --save @fortawesome/fontawesome-free
|
||||
|
||||
|
|
@ -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 = {
|
|||
</script>
|
||||
```
|
||||
|
||||
### 5. Include [Font Awesome](https://fontawesome.com/) icons
|
||||
### 5. 引入 [Font Awesome](https://fontawesome.com/) 图标:
|
||||
|
||||
From CDN in your HTML page:
|
||||
在你的主HTML配置CDN页面:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"></link>
|
||||
```
|
||||
|
||||
...or as an npm package imported into your root component:
|
||||
...或者通过npm包:
|
||||
|
||||
$ npm install --save @fortawesome/fontawesome-free
|
||||
|
||||
|
|
|
|||
|
|
@ -7,27 +7,35 @@
|
|||
const jsdocItem = await res2.json()
|
||||
const jsdocLayout = await res3.json()
|
||||
|
||||
return { jsdoc ,jsdocItem, jsdocLayout}
|
||||
return {
|
||||
jsdoc,
|
||||
jsdocItem,
|
||||
jsdocLayout
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
import { Nav, NavItem, NavLayout, Button } from 'svelma-pro'
|
||||
import {
|
||||
Nav,
|
||||
NavItem,
|
||||
NavLayout,
|
||||
Button
|
||||
} from 'svelma-pro'
|
||||
import DocHeader from '../../components/DocHeader.svelte'
|
||||
import Example from '../../components/Example.svelte'
|
||||
|
||||
import JSDoc from '../../components/JSDoc.svelte'
|
||||
import JSDoc from '../../components/JSDoc.svelte'
|
||||
|
||||
export let jsdoc
|
||||
export let jsdoc
|
||||
export let jsdocItem
|
||||
export let jsdocLayout
|
||||
</script>
|
||||
|
||||
<DocHeader title="Nav" subtitle="导航" />
|
||||
|
||||
<Example
|
||||
code={`<script>
|
||||
<Example code={`<script>
|
||||
import { Nav, NavItem, NavLayout } from 'svelma-pro'
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<Nav logoImg="/logo-192.png">
|
||||
<NavLayout navPosition="center">
|
||||
|
|
@ -40,19 +48,19 @@
|
|||
</NavItem>
|
||||
</NavLayout>
|
||||
</Nav>
|
||||
`}>
|
||||
`}>
|
||||
<div slot="preview" style="position: relative;">
|
||||
<Nav logoImg="/logo-192.png">
|
||||
<NavLayout navPosition="center">
|
||||
<NavItem>管理工具</NavItem>
|
||||
<NavItem>开发资源</NavItem>
|
||||
</NavLayout>
|
||||
<NavLayout navPosition="end">
|
||||
<NavItem>
|
||||
<Button type="is-link">登录</Button>
|
||||
</NavItem>
|
||||
</NavLayout>
|
||||
</Nav>
|
||||
<Nav logoImg="/logo-192.png">
|
||||
<NavLayout navPosition="center">
|
||||
<NavItem>管理工具</NavItem>
|
||||
<NavItem>开发资源</NavItem>
|
||||
</NavLayout>
|
||||
<NavLayout navPosition="end">
|
||||
<NavItem>
|
||||
<Button type="is-link">登录</Button>
|
||||
</NavItem>
|
||||
</NavLayout>
|
||||
</Nav>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
|
|
@ -60,23 +68,22 @@
|
|||
|
||||
<p class="title is-4">下拉列表</p>
|
||||
|
||||
<Example
|
||||
code={`<script>
|
||||
import { Nav, NavItem, NavLayout } from 'smx-svelma'
|
||||
</script>
|
||||
<Example code={`<script>
|
||||
import { Nav, NavItem, NavLayout } from 'svelma-pro'
|
||||
</script>
|
||||
|
||||
<Nav logoImg="/logo-192.png" background="rgba(0,0,0)">
|
||||
<NavItem isHover={true}>
|
||||
<span style="color:#fff">管理工具</span>
|
||||
<div slot="hover">
|
||||
<NavItem>开发资源</NavItem>
|
||||
<NavItem>开发资源</NavItem>
|
||||
<NavItem>开发资源</NavItem>
|
||||
</div>
|
||||
</NavItem>
|
||||
<NavItem><span style="color:#fff">开发资源</span></NavItem>
|
||||
</Nav>
|
||||
`}>
|
||||
<Nav logoImg=/logo-192.png" background="rgba(0,0,0)">
|
||||
<NavItem isHover={true}>
|
||||
<span style="color:#fff">管理工具</span>
|
||||
<div slot="hover">
|
||||
<NavItem>开发资源</NavItem>
|
||||
<NavItem>开发资源</NavItem>
|
||||
<NavItem>开发资源</NavItem>
|
||||
</div>
|
||||
</NavItem>
|
||||
<NavItem><span style="color:#fff">开发资源</span></NavItem>
|
||||
</Nav>
|
||||
`}>
|
||||
<div slot="preview" style="position: relative;">
|
||||
<Nav logoImg="/logo-192.png" background="rgba(0,0,0)">
|
||||
<NavItem isHover={true}>
|
||||
|
|
@ -98,7 +105,7 @@
|
|||
|
||||
<h3 class="subtitle">Nav</h3>
|
||||
|
||||
<JSDoc {jsdoc} showHeader={false}/>
|
||||
<JSDoc {jsdoc} showHeader={false} />
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,17 @@
|
|||
<script>
|
||||
import NavItem from "./NavItem.svelte";
|
||||
export let height = "auto";
|
||||
export let logoImg = "/logo.png";
|
||||
export let logoUrl = "/";
|
||||
export let logoH = "auto";
|
||||
export let logoW = 40;
|
||||
export let background = "rgb(242, 242, 242)";
|
||||
|
||||
import NavItem from './NavItem.svelte'
|
||||
import { setContext } from 'svelte'
|
||||
export let height = 'auto'
|
||||
export let logoImg = '/logo.png'
|
||||
export let logoUrl = '/'
|
||||
export let logoH = 'auto'
|
||||
export let logoW = "40px";
|
||||
export let background = 'rgb(242, 242, 242)'
|
||||
export let logoShow = true;
|
||||
setContext('logoW', logoW)
|
||||
$: if (!logoShow) {
|
||||
logoW = 0
|
||||
}
|
||||
// export let navPosition = "center"; // center start
|
||||
</script>
|
||||
|
||||
|
|
@ -25,22 +30,17 @@
|
|||
.navbar-img {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<nav class="navbar" style="height: {height}px;background: {background}">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href={logoUrl}>
|
||||
<img
|
||||
class="navbar-img"
|
||||
style="width: {logoW}px;height: {logoH}px"
|
||||
src={logoImg}
|
||||
alt="logo" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<nav class="navbar" style="height: {height};background: {background}">
|
||||
{#if logoShow}
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href={logoUrl}>
|
||||
<img class="navbar-img" style="width: {logoW};height: {logoH}" src={logoImg} alt="logo" />
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
<div id="navMenubd-example" class="navbar-menu">
|
||||
<slot logoW={logoW}></slot>
|
||||
<slot logoW={logoW} />
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script>
|
||||
import { getContext } from 'svelte'
|
||||
export let navPosition = "center"; // center start end
|
||||
export let logoW;
|
||||
const logoW = getContext('logoW')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -18,7 +19,7 @@
|
|||
{#if navPosition === 'center'}
|
||||
<div
|
||||
class="navbar-start navbar-center"
|
||||
style="right:calc(0.75rem + {logoW / 2})">
|
||||
style="right:calc(0.75rem + ({logoW} /2))">
|
||||
<slot />
|
||||
</div>
|
||||
{:else if navPosition === 'end'}
|
||||
|
|
|
|||
Loading…
Reference in New Issue