64 lines
11 KiB
HTML
64 lines
11 KiB
HTML
<!DOCTYPE html> <head> <meta charset=utf-8> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content=#333333 name=theme-color> <base href=/svelma-pro/ > <link href=global.css rel=stylesheet> <link href=manifest.json rel=manifest> <link href=favicon.ico rel=icon type=image/png> <link href=./all.css rel=stylesheet> <link href=client/main.1916252291.css rel=stylesheet><link href=client/chunk.f5a3f321.css rel=stylesheet><link href=client/chunk.b01e898f.css rel=stylesheet> <noscript id=sapper-head-start></noscript><title>svelma-pro</title><meta content=Svelma property=og:site_name><meta content=https://c0bra.github.io/svelma-pro/svelma-pro-logo.png property=og:image><meta content=200 property=og:image:width><meta content=200 property=og:image:height><meta property=og:url><meta content=article property=og:type><meta content="Start | Svelma" property=og:title><meta content=如何使用 property=og:description><noscript id=sapper-head-end></noscript> </head> <body> <div id=sapper> <nav class="is-spaced has-shadow navbar" id=navbar><div class=container style=height:50px;min-height:50px><div class=navbar-brand><a href=/ class="brand navbar-item svelte-19nr2rz"> svelma-pro </a></div></div></nav> <main><section class="svelte-1ib6y6h docs"><div class="svelte-h7woek sidebar-bg"></div> <aside class="svelte-h7woek sidebar"><p class="svelte-h7woek sidebar-label">Installation</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=install>Start</a></ul> <p class="svelte-h7woek sidebar-label">Bulma Elements</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=bulma/intro>Intro</a></li> <li class=svelte-h7woek><a href=bulma/hero>Hero</a> <li class=svelte-h7woek><a href=bulma/media>Media</a> <li class=svelte-h7woek><a href=bulma/table>Table</a> <li class=svelte-h7woek><a href=bulma/tiles>Tiles</a> </ul> <p class="svelte-h7woek sidebar-label">Svelma Components</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=components/button>Button </a> <li class=svelte-h7woek><a href=components/carousel>Carousel </a> <li class=svelte-h7woek><a href=components/collapse>Collapse </a> <li class=svelte-h7woek><a href=components/colorpicker>ColorPicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/datepicker>Datepicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/dialog>Dialog </a> <li class=svelte-h7woek><a href=components/district>District <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><p>Form</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=components/field>Field </a> <li class=svelte-h7woek><a href=components/input>Input </a> <li class=svelte-h7woek><a href=components/switch>Switch </a> </li> </ul> <li class=svelte-h7woek><a href=components/icon>Icon </a> <li class=svelte-h7woek><a href=components/layout>Layout <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/message>Message </a> <li class=svelte-h7woek><a href=components/modal>Modal </a> <li class=svelte-h7woek><a href=components/nav>Nav <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/notification>Notification </a> <li class=svelte-h7woek><a href=components/pagination>Pagination </a> <li class=svelte-h7woek><a href=components/progress>Progress </a> <li class=svelte-h7woek><a href=components/select>Select <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/slider>Slider <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/snackbar>Snackbar </a> <li class=svelte-h7woek><a href=components/stable>Stable <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/table>Table </a> <li class=svelte-h7woek><a href=components/tabs>Tabs </a> <li class=svelte-h7woek><a href=components/timepicker>Timepicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/tip>Tip <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/toast>Toast </a> </li> </ul></aside> <div class="svelte-1ib6y6h docs-main"> <header class=header><h1 class=title>Start</h1> <h2 class=subtitle>如何使用</h2></header> <br> <br> <div class=media><div class=media-left><p class=title>1</div> <div class=media-content><p class=title>NPM</p> <p class="is-spaced subtitle">此组件库适用于基于rollup或者webpack搭建的svelte及sapper项目</p> <p class="title is-4">下载安装</p> <div class=content>下载bluma与组件库.</div> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="button copy-code is-small is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge bash">npm install --save bulma svelma-pro</code></pre> <pre class="svelte-1ccczge hidden"><code>undefined</code></pre></figure></div> <div class=content>集成scss模板语法支持(因为组件库采用了类似vue的scss模板写法,所以需要也集成进去).</div> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="button copy-code is-small is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge bash">npm install --save-dev svelte-preprocess autoprefixer node-sass sass</code></pre> <pre class="svelte-1ccczge hidden"><code>undefined</code></pre></figure></div> <div class=content>添加 <code>scss编译</code> 到你的 <code>rollup.config.js</code> 配置文件中(或者webpack.config.js). </div> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="button copy-code is-small is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge js"></code></pre> <pre class="svelte-1ccczge hidden"><code>import sveltePreprocess from 'svelte-preprocess';
|
||
const preprocess = sveltePreprocess({
|
||
scss: {
|
||
includePaths: ['src'],
|
||
},
|
||
postcss: {
|
||
plugins: [require('autoprefixer')],
|
||
},
|
||
});
|
||
|
||
// ...
|
||
|
||
export default {
|
||
// ...
|
||
plugins: [
|
||
svelte({
|
||
// ...
|
||
preprocess: preprocess,
|
||
})
|
||
]
|
||
}</code></pre></figure></div> <div class=content>如果使用webpack,在 <code>webpack.config.js</code> 配置文件中. </div> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="button copy-code is-small is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge js"></code></pre> <pre class="svelte-1ccczge hidden"><code>import sveltePreprocess from 'svelte-preprocess';
|
||
const preprocess = sveltePreprocess({
|
||
scss: {
|
||
includePaths: ['src'],
|
||
},
|
||
postcss: {
|
||
plugins: [require('autoprefixer')],
|
||
},
|
||
});
|
||
|
||
// ...
|
||
|
||
module.export = {
|
||
// ...
|
||
module: {
|
||
rules: [
|
||
{
|
||
test: /.(svelte|html)$/,
|
||
use: {
|
||
loader: 'svelte-loader',
|
||
options: {
|
||
preprocess,
|
||
// ...
|
||
}
|
||
}
|
||
},
|
||
]
|
||
},
|
||
]
|
||
}</code></pre></figure></div> <p class="title is-4">使用</p> <div class=content>引入bluma样式到您的项目</div> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="button copy-code is-small is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge html"></code></pre> <pre class="svelte-1ccczge hidden"><code><!-- main.js或者client.js全局引入 -->
|
||
<script>
|
||
import 'bulma/css/bulma.css'
|
||
</script></code></pre></figure></div> <div class=content>svelma-pro组件可以一次导入一个，就像这样 </div> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="button copy-code is-small is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge html"></code></pre> <pre class="svelte-1ccczge hidden"><code><script>
|
||
import { Button } from 'svelma-pro'
|
||
</script>
|
||
|
||
<Button>I am a Button</Button></code></pre></figure></div> <div class=content>或导入完整的Svelma软件包。 </div> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="button copy-code is-small is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge html"></code></pre> <pre class="svelte-1ccczge hidden"><code><script>
|
||
import { Svelma } from 'svelma-pro'
|
||
</script>
|
||
|
||
<Svelma.Button>I am a Button</Svelma.Button></code></pre></figure></div></div></div> <hr class=is-medium> <div class=media><div class=media-left><p class=title>2</div> <div class=media-content><p class="title is-spaced">使用 [Font Awesome] 图标</p> 添加 CDN 在你的 HTML 页面: <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="button copy-code is-small is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge bash"></code></pre> <pre class="svelte-1ccczge hidden"><code><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"></link></code></pre></figure></div> ...或者使用npm包: <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="button copy-code is-small is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge bash"></code></pre> <pre class="svelte-1ccczge hidden"><code>npm install --save @fortawesome/fontawesome-free</code></pre></figure></div> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="button copy-code is-small is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge bash"></code></pre> <pre class="svelte-1ccczge hidden"><code><!-- main.js or client.js(sapper) -->
|
||
<script>
|
||
import '@fortawesome/fontawesome-free/css/all.css'
|
||
</script></code></pre></figure></div></div></div></div></section></main></div> <script>__SAPPER__={baseUrl:"/svelma-pro",preloaded:[void 0,{}]};if('serviceWorker' in navigator)navigator.serviceWorker.register('/svelma-pro/service-worker.js');var s=document.createElement("script");try{new Function("if(0)import('')")();s.src="/svelma-pro/client/client.3704696d.js";s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="/svelma-pro/client/shimport@1.0.1.js";s.setAttribute("data-main","/svelma-pro/client/client.3704696d.js")}document.head.appendChild(s)</script> |