svelma-pro/client/index.3e2262bb.js

3 lines
8.9 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import{c as s,d as e,b as n,D as a,o as r,e as t,f as c,E as l,p as o,g as p,h as m,i as $,j as f,k as i,F as v,l as u,m as g,A as d,y as h,G as b}from"./chunk.82446879.js";import"./chunk.f5a3f321.js";import"./chunk.e8a2e241.js";import{a as E}from"./chunk.4b4ee497.js";import{a as w}from"./chunk.b01e898f.js";function x(s){let e;return{c(){e=c("npm install --save bulma svelma-pro")},l(s){e=$(s,"npm install --save bulma svelma-pro")},m(s,n){u(s,e,n)},d(s){s&&f(e)}}}function D(s){let e;return{c(){e=c("npm install --save-dev svelte-preprocess autoprefixer node-sass sass")},l(s){e=$(s,"npm install --save-dev svelte-preprocess autoprefixer node-sass sass")},m(s,n){u(s,e,n)},d(s){s&&f(e)}}}function j(s){let e,n,j,k,I,P,V,B,y,S,C,M,N,A,F,H,O,R,q,L,T,G,z,J,K,Q,U,W,X,Y,Z,_,ss,es,ns,as,rs,ts,cs,ls,os,ps,ms,$s,fs,is,vs,us,gs,ds,hs,bs,Es,ws,xs,Ds,js,ks,Is,Ps,Vs,Bs,ys,Ss,Cs,Ms,Ns,As,Fs,Hs,Os,Rs,qs,Ls;const Ts=new E({props:{title:"Start",subtitle:"如何使用"}}),Gs=new w({props:{lang:"bash",$$slots:{default:[x]},$$scope:{ctx:s}}}),zs=new w({props:{lang:"bash",$$slots:{default:[D]},$$scope:{ctx:s}}}),Js=new w({props:{lang:"js",code:"import sveltePreprocess from 'svelte-preprocess';\nconst preprocess = sveltePreprocess({\n scss: {\n includePaths: ['src'],\n },\n postcss: {\n plugins: [require('autoprefixer')],\n },\n});\n\n// ...\n\nexport default {\n // ... \n plugins: [\n svelte({\n // ...\n preprocess: preprocess,\n })\n ]\n}"}}),Ks=new w({props:{lang:"js",code:"import sveltePreprocess from 'svelte-preprocess';\nconst preprocess = sveltePreprocess({\n scss: {\n includePaths: ['src'],\n },\n postcss: {\n plugins: [require('autoprefixer')],\n },\n});\n\n// ...\n\nmodule.export = {\n // ... \n module: {\n rules: [\n {\n test: /.(svelte|html)$/,\n use: {\n loader: 'svelte-loader',\n options: {\n preprocess, \n // ...\n }\n }\n },\n ]\n },\n ]\n}"}}),Qs=new w({props:{lang:"html",code:"\n\x3c!-- main.js或者client.js全局引入 --\x3e\n<script>\n import 'bulma/css/bulma.css'\n<\/script>\n "}}),Us=new w({props:{lang:"html",code:"\n<script>\n import { Button } from 'svelma-pro'\n<\/script>\n\n<Button>I am a Button</Button>\n "}}),Ws=new w({props:{lang:"html",code:"\n<script>\n import { Svelma } from 'svelma-pro'\n<\/script>\n\n<Svelma.Button>I am a Button</Svelma.Button>\n "}}),Xs=new w({props:{lang:"bash",code:'\n <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"></link>\n'}}),Ys=new w({props:{lang:"bash",code:"npm install --save @fortawesome/fontawesome-free"}}),Zs=new w({props:{lang:"bash",code:"\x3c!-- main.js or client.js(sapper) --\x3e\n<script>\n import '@fortawesome/fontawesome-free/css/all.css'\n<\/script>"}});return{c(){a(Ts.$$.fragment),e=r(),n=t("br"),j=r(),k=t("br"),I=r(),P=t("div"),V=t("div"),B=t("p"),y=c("1"),S=r(),C=t("div"),M=t("p"),N=c("NPM"),A=r(),F=t("p"),H=c("此组件库适用于基于rollup或者webpack搭建的svelte及sapper项目"),O=r(),R=t("p"),q=c("下载安装"),L=r(),T=t("div"),G=c("下载bluma与组件库."),z=r(),a(Gs.$$.fragment),J=r(),K=t("div"),Q=c("集成scss模板语法支持(因为组件库采用了类似vue的scss模板写法,所以需要也集成进去)."),U=r(),a(zs.$$.fragment),W=r(),X=t("div"),Y=c("添加\n "),Z=t("code"),_=c("scss编译"),ss=c("\n 到你的\n "),es=t("code"),ns=c("rollup.config.js"),as=c("\n 配置文件中(或者webpack.config.js)."),rs=r(),a(Js.$$.fragment),ts=r(),cs=t("div"),ls=c("如果使用webpack,在\n "),os=t("code"),ps=c("webpack.config.js"),ms=c("\n 配置文件中."),$s=r(),a(Ks.$$.fragment),fs=r(),is=t("p"),vs=c("使用"),us=r(),gs=t("div"),ds=c("引入bluma样式到您的项目"),hs=r(),a(Qs.$$.fragment),bs=r(),Es=t("div"),ws=c("svelma-pro组件可以一次导入一个就像这样"),xs=r(),a(Us.$$.fragment),Ds=r(),js=t("div"),ks=c("或导入完整的Svelma软件包。"),Is=r(),a(Ws.$$.fragment),Ps=r(),Vs=t("hr"),Bs=r(),ys=t("div"),Ss=t("div"),Cs=t("p"),Ms=c("2"),Ns=r(),As=t("div"),Fs=t("p"),Hs=c("使用 [Font Awesome] 图标"),Os=c("\n\n 添加 CDN 在你的 HTML 页面:\n "),a(Xs.$$.fragment),Rs=c("\n ...或者使用npm包:\n "),a(Ys.$$.fragment),qs=r(),a(Zs.$$.fragment),this.h()},l(s){l(Ts.$$.fragment,s),e=o(s),n=p(s,"BR",{}),j=o(s),k=p(s,"BR",{}),I=o(s),P=p(s,"DIV",{class:!0});var a=m(P);V=p(a,"DIV",{class:!0});var r=m(V);B=p(r,"P",{class:!0});var t=m(B);y=$(t,"1"),t.forEach(f),r.forEach(f),S=o(a),C=p(a,"DIV",{class:!0});var c=m(C);M=p(c,"P",{class:!0});var i=m(M);N=$(i,"NPM"),i.forEach(f),A=o(c),F=p(c,"P",{class:!0});var v=m(F);H=$(v,"此组件库适用于基于rollup或者webpack搭建的svelte及sapper项目"),v.forEach(f),O=o(c),R=p(c,"P",{class:!0});var u=m(R);q=$(u,"下载安装"),u.forEach(f),L=o(c),T=p(c,"DIV",{class:!0});var g=m(T);G=$(g,"下载bluma与组件库."),g.forEach(f),z=o(c),l(Gs.$$.fragment,c),J=o(c),K=p(c,"DIV",{class:!0});var d=m(K);Q=$(d,"集成scss模板语法支持(因为组件库采用了类似vue的scss模板写法,所以需要也集成进去)."),d.forEach(f),U=o(c),l(zs.$$.fragment,c),W=o(c),X=p(c,"DIV",{class:!0});var h=m(X);Y=$(h,"添加\n "),Z=p(h,"CODE",{});var b=m(Z);_=$(b,"scss编译"),b.forEach(f),ss=$(h,"\n 到你的\n "),es=p(h,"CODE",{});var E=m(es);ns=$(E,"rollup.config.js"),E.forEach(f),as=$(h,"\n 配置文件中(或者webpack.config.js)."),h.forEach(f),rs=o(c),l(Js.$$.fragment,c),ts=o(c),cs=p(c,"DIV",{class:!0});var w=m(cs);ls=$(w,"如果使用webpack,在\n "),os=p(w,"CODE",{});var x=m(os);ps=$(x,"webpack.config.js"),x.forEach(f),ms=$(w,"\n 配置文件中."),w.forEach(f),$s=o(c),l(Ks.$$.fragment,c),fs=o(c),is=p(c,"P",{class:!0});var D=m(is);vs=$(D,"使用"),D.forEach(f),us=o(c),gs=p(c,"DIV",{class:!0});var Ls=m(gs);ds=$(Ls,"引入bluma样式到您的项目"),Ls.forEach(f),hs=o(c),l(Qs.$$.fragment,c),bs=o(c),Es=p(c,"DIV",{class:!0});var _s=m(Es);ws=$(_s,"svelma-pro组件可以一次导入一个就像这样"),_s.forEach(f),xs=o(c),l(Us.$$.fragment,c),Ds=o(c),js=p(c,"DIV",{class:!0});var se=m(js);ks=$(se,"或导入完整的Svelma软件包。"),se.forEach(f),Is=o(c),l(Ws.$$.fragment,c),c.forEach(f),a.forEach(f),Ps=o(s),Vs=p(s,"HR",{class:!0}),Bs=o(s),ys=p(s,"DIV",{class:!0});var ee=m(ys);Ss=p(ee,"DIV",{class:!0});var ne=m(Ss);Cs=p(ne,"P",{class:!0});var ae=m(Cs);Ms=$(ae,"2"),ae.forEach(f),ne.forEach(f),Ns=o(ee),As=p(ee,"DIV",{class:!0});var re=m(As);Fs=p(re,"P",{class:!0});var te=m(Fs);Hs=$(te,"使用 [Font Awesome] 图标"),te.forEach(f),Os=$(re,"\n\n 添加 CDN 在你的 HTML 页面:\n "),l(Xs.$$.fragment,re),Rs=$(re,"\n ...或者使用npm包:\n "),l(Ys.$$.fragment,re),qs=o(re),l(Zs.$$.fragment,re),re.forEach(f),ee.forEach(f),this.h()},h(){i(B,"class","title"),i(V,"class","media-left"),i(M,"class","title"),i(F,"class","subtitle is-spaced"),i(R,"class","title is-4"),i(T,"class","content"),i(K,"class","content"),i(X,"class","content"),i(cs,"class","content"),i(is,"class","title is-4"),i(gs,"class","content"),i(Es,"class","content"),i(js,"class","content"),i(C,"class","media-content"),i(P,"class","media"),i(Vs,"class","is-medium"),i(Cs,"class","title"),i(Ss,"class","media-left"),i(Fs,"class","title is-spaced"),i(As,"class","media-content"),i(ys,"class","media")},m(s,a){v(Ts,s,a),u(s,e,a),u(s,n,a),u(s,j,a),u(s,k,a),u(s,I,a),u(s,P,a),g(P,V),g(V,B),g(B,y),g(P,S),g(P,C),g(C,M),g(M,N),g(C,A),g(C,F),g(F,H),g(C,O),g(C,R),g(R,q),g(C,L),g(C,T),g(T,G),g(C,z),v(Gs,C,null),g(C,J),g(C,K),g(K,Q),g(C,U),v(zs,C,null),g(C,W),g(C,X),g(X,Y),g(X,Z),g(Z,_),g(X,ss),g(X,es),g(es,ns),g(X,as),g(C,rs),v(Js,C,null),g(C,ts),g(C,cs),g(cs,ls),g(cs,os),g(os,ps),g(cs,ms),g(C,$s),v(Ks,C,null),g(C,fs),g(C,is),g(is,vs),g(C,us),g(C,gs),g(gs,ds),g(C,hs),v(Qs,C,null),g(C,bs),g(C,Es),g(Es,ws),g(C,xs),v(Us,C,null),g(C,Ds),g(C,js),g(js,ks),g(C,Is),v(Ws,C,null),u(s,Ps,a),u(s,Vs,a),u(s,Bs,a),u(s,ys,a),g(ys,Ss),g(Ss,Cs),g(Cs,Ms),g(ys,Ns),g(ys,As),g(As,Fs),g(Fs,Hs),g(As,Os),v(Xs,As,null),g(As,Rs),v(Ys,As,null),g(As,qs),v(Zs,As,null),Ls=!0},p(s,[e]){const n={};1&e&&(n.$$scope={dirty:e,ctx:s}),Gs.$set(n);const a={};1&e&&(a.$$scope={dirty:e,ctx:s}),zs.$set(a);const r={};1&e&&(r.$$scope={dirty:e,ctx:s}),Qs.$set(r);const t={};1&e&&(t.$$scope={dirty:e,ctx:s}),Us.$set(t);const c={};1&e&&(c.$$scope={dirty:e,ctx:s}),Ws.$set(c)},i(s){Ls||(d(Ts.$$.fragment,s),d(Gs.$$.fragment,s),d(zs.$$.fragment,s),d(Js.$$.fragment,s),d(Ks.$$.fragment,s),d(Qs.$$.fragment,s),d(Us.$$.fragment,s),d(Ws.$$.fragment,s),d(Xs.$$.fragment,s),d(Ys.$$.fragment,s),d(Zs.$$.fragment,s),Ls=!0)},o(s){h(Ts.$$.fragment,s),h(Gs.$$.fragment,s),h(zs.$$.fragment,s),h(Js.$$.fragment,s),h(Ks.$$.fragment,s),h(Qs.$$.fragment,s),h(Us.$$.fragment,s),h(Ws.$$.fragment,s),h(Xs.$$.fragment,s),h(Ys.$$.fragment,s),h(Zs.$$.fragment,s),Ls=!1},d(s){b(Ts,s),s&&f(e),s&&f(n),s&&f(j),s&&f(k),s&&f(I),s&&f(P),b(Gs),b(zs),b(Js),b(Ks),b(Qs),b(Us),b(Ws),s&&f(Ps),s&&f(Vs),s&&f(Bs),s&&f(ys),b(Xs),b(Ys),b(Zs)}}}export default class extends s{constructor(s){super(),e(this,s,null,j,n,{})}}
//# sourceMappingURL=index.3e2262bb.js.map