Skip to content

Z
zui

易企天创 / zui
10 个月 前同步成功

通知 6
Star 0
Fork 1
Z
zui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

源分支
选择Git版本
...
目标分支
选择Git版本
 
Commits (794)
展开全部 隐藏空白更改
内联 并排
Showing with 95745 addition and 0 deletion
3/404.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/app.7dc69efc.js 0 → 100644
浏览文件 @ bd4e09de
import{d,l as h,o as i,c,r as f,n as v,K as w,h as p,p as _,t as g,B as C,C as k,Q as b,a5 as T,a6 as A,a7 as x,a8 as P,a9 as E,aa as R,ab as S,ac as V,ad as D,ae as F,M as j,u as B,k as O,af as z,ag as I,ah as L,ai as N}from"./chunks/framework.42439fff.js";import{t as U}from"./chunks/theme.dc49f8d0.js";const q=d({__name:"example",props:{className:{},background:{},padding:{},border:{}},setup(a){const e=a,t=h(()=>{const{padding:r="p-4",className:s}=e,o=["text-base example"];return typeof s=="string"&&s.length&&o.push(s),typeof r=="number"?o.push(`p-${r}`):r&&o.push(r),o}),n=h(()=>{if(e.background==="light-grid")return{"background-image":"repeating-linear-gradient(135deg, rgba(189,189,189,0.1) 0px, rgba(189,189,189,0.1) 2px,transparent 2px, transparent 4px),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255))"};if(e.background==="blue-circle")return{"background-image":"radial-gradient(circle at 31% 83%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 8%,transparent 8%, transparent 92%),radial-gradient(circle at 54% 21%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 8%,transparent 8%, transparent 92%),radial-gradient(circle at 68% 13%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 30% 64%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 51% 96%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 40% 16%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 75% 47%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 44% 44%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 4%,transparent 4%, transparent 96%),radial-gradient(circle at 10% 17%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 4%,transparent 4%, transparent 96%),radial-gradient(circle at 90% 72%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 4%,transparent 4%, transparent 96%),radial-gradient(circle at 0% 45%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 4%,transparent 4%, transparent 96%),linear-gradient(90deg, rgb(18, 30, 254),rgb(34, 191, 228))"};if(e.background==="light-circle")return{"background-image":"radial-gradient(circle at 13% 47%, rgba(140, 140, 140,0.03) 0%, rgba(140, 140, 140,0.03) 25%,transparent 25%, transparent 100%),radial-gradient(circle at 28% 63%, rgba(143, 143, 143,0.03) 0%, rgba(143, 143, 143,0.03) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 81% 56%, rgba(65, 65, 65,0.03) 0%, rgba(65, 65, 65,0.03) 12%,transparent 12%, transparent 100%),radial-gradient(circle at 26% 48%, rgba(60, 60, 60,0.03) 0%, rgba(60, 60, 60,0.03) 6%,transparent 6%, transparent 100%),radial-gradient(circle at 97% 17%, rgba(150, 150, 150,0.03) 0%, rgba(150, 150, 150,0.03) 56%,transparent 56%, transparent 100%),radial-gradient(circle at 50% 100%, rgba(25, 25, 25,0.03) 0%, rgba(25, 25, 25,0.03) 36%,transparent 36%, transparent 100%),radial-gradient(circle at 55% 52%, rgba(69, 69, 69,0.03) 0%, rgba(69, 69, 69,0.03) 6%,transparent 6%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255))"}});return(r,s)=>(i(),c("div",{class:v(t.value),style:w(n.value)},[f(r.$slots,"default")],6))}}),M=d({__name:"css-prop-value",props:{prop:{},placeholder:{},target:{}},setup(a){const e=a,t=p(e.placeholder??e.prop),n=p();return _(()=>{const r=()=>{let s=null;if(e.target?s=document.querySelector(e.target):s=n.value,!s)return;const o=getComputedStyle(s);t.value=o.getPropertyValue(e.prop)};r(),setTimeout(r,500)}),(r,s)=>(i(),c("span",{ref_key:"ele",ref:n},g(t.value),513))}}),Z={key:0,class:"text-center copy-code-span-tip success px-2"},G={key:1,class:"pr-1 copy-code-span-tip bg-canvas"},H=d({__name:"copy-code",props:{code:{},tip:{},copyTip:{}},setup(a){const e=a,t=p(!1),n=p(0),r=()=>{navigator.clipboard.writeText(e.code),t.value=!0,n.value=window.setTimeout(()=>{t.value=!1,n.value=0},2e3)};return C(()=>{n.value&&clearTimeout(n.value)}),(s,o)=>(i(),c("div",{class:v(`copy-code-span relative cursor-pointer${t.value?" is-copied":""}`),onClick:r},[f(s.$slots,"default"),t.value?(i(),c("div",Z,g(e.copyTip??"已复制"),1)):(i(),c("div",G,g(s.tip??s.code),1))],2))}});const K={key:0,class:"right-0 text-center semantic-color-name is-copied success"},Q={key:1,class:"pr-1 semantic-color-name bg-canvas"},J=d({__name:"color-tile",props:{color:{},colorVal:{},tileClass:{}},setup(a){const e=p(!1),t=p(0),n=r=>{navigator.clipboard.writeText(r),e.value=!0,t.value=window.setTimeout(()=>{e.value=!1,t.value=0},2e3)};return C(()=>{t.value&&clearTimeout(t.value)}),(r,s)=>(i(),c("div",{class:"relative cursor-pointer semantic-color-item",onClick:s[0]||(s[0]=o=>n(`--${r.color}`))},[k("div",{class:v(`${r.tileClass||"w-full h-8 rounded"}${e.value?" ring-2 ring-success":""} semantic-color-tile`),style:w(`background-color: ${r.colorVal??`var(--${r.color})`}`)},null,6),f(r.$slots,"default"),e.value?(i(),c("div",K,"已复制")):(i(),c("div",Q,"--"+g(r.color),1))]))}});let u=0;const m=[];function y(a){if(u&&(cancelAnimationFrame(u),u=0),a&&m.push(a),typeof window=="object"&&"zui"in window){m.forEach(e=>e()),m.length=0;return}u=requestAnimationFrame(()=>y())}Object.assign(window,{onZUIReady:y});const W=d({__name:"zui-ready",props:{fn:{type:Function}},setup(a){const e=a;return _(()=>{y(e.fn)}),(t,n)=>null}});const X={extends:U,enhanceApp({app:a}){a.component("Example",q),a.component("CssPropValue",M),a.component("CopyCode",H),a.component("ColorTile",J),a.component("ZUIReady",W)}};function $(a){if(a.extends){const e=$(a.extends);return{...e,...a,async enhanceApp(t){e.enhanceApp&&await e.enhanceApp(t),a.enhanceApp&&await a.enhanceApp(t)}}}return a}const l=$(X),Y=d({name:"VitePressApp",setup(){const{site:a}=B();return _(()=>{O(()=>{document.documentElement.lang=a.value.lang,document.documentElement.dir=a.value.dir})}),z(),I(),L(),l.setup&&l.setup(),()=>N(l.Layout)}});async function ee(){const a=te(),e=ae();e.provide(A,a);const t=x(a.route);return e.provide(P,t),e.component("Content",E),e.component("ClientOnly",R),Object.defineProperties(e.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),l.enhanceApp&&await l.enhanceApp({app:e,router:a,siteData:S}),{app:e,router:a,data:t}}function ae(){return V(Y)}function te(){let a=b,e;return D(t=>{let n=F(t);return a&&(e=n),(a||e===n)&&(n=n.replace(/\.js$/,".lean.js")),b&&(a=!1),j(()=>import(n),[])},l.NotFound)}b&&ee().then(({app:a,router:e,data:t})=>{e.go().then(()=>{T(e.route,t.site),a.mount("#app")})});export{ee as createApp};
3/assets/chunks/@localSearchIndexroot.3780ef89.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/chunks/VPLocalSearchBox.75da1ed4.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/chunks/avatar-7.ca25d44e.js 0 → 100644
浏览文件 @ bd4e09de
const a="/zui/3/assets/avatar/avatar-1.png",s="/zui/3/assets/avatar/avatar-2.png",t="/zui/3/assets/avatar/avatar-3.png",r="/zui/3/assets/avatar/avatar-4.png",o="/zui/3/assets/avatar/avatar-5.png",p="/zui/3/assets/avatar/avatar-6.png",_="/zui/3/assets/avatar/avatar-7.png";export{a as _,s as a,t as b,r as c,o as d,p as e,_ as f};
3/assets/chunks/avatar.dd67262f.js 0 → 100644
浏览文件 @ bd4e09de
const a="/zui/3/assets/avatar/avatar.png";export{a as _};
3/assets/chunks/favicon.cc7c7df5.js 0 → 100644
浏览文件 @ bd4e09de
const o="/zui/3/favicon.svg";export{o as _};
3/assets/chunks/framework.42439fff.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/chunks/theme.dc49f8d0.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/frames_zui.md.4905636c.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as o,h as n,p as i,o as c,c as d,C as l}from"./chunks/framework.42439fff.js";const m={};async function f(t,e){const a=window.frameElement;if(!a)throw new Error("[whyframe] page is not within an iframe");const r=a.dataset.whyId;if(!r)throw new Error("[whyframe] iframe does not have an id");const s=m[r];if(!s)throw new Error("[whyframe] no app found");return await(await s()).createApp(t,e)}function p(){let t=null;window.addEventListener("storage",()=>{let e=localStorage.getItem("vitepress-theme-appearance");e!==t&&(t=e,e==="auto"&&(e=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),e==="light"?document.documentElement.classList.remove("dark"):e==="dark"&&document.documentElement.classList.add("dark"))})}const k=JSON.parse('{"title":"","description":"","frontmatter":{"layout":false,"head":[["link",{"rel":"stylesheet","href":"/zui.css"}],["script",{"src":"/zui.umd.cjs"}]]},"headers":[],"relativePath":"frames/zui.md","filePath":"frames/zui.md","lastUpdated":null}'),u={name:"frames/zui.md"},h=Object.assign(u,{setup(t){const e=n();return i(()=>{p(),f(e.value)}),(a,r)=>(c(),d("div",null,[l("div",{id:"vp-app",ref_key:"el",ref:e},null,512)]))}}),y=o(h,[["__scopeId","data-v-430f22fe"]]);export{k as __pageData,y as default};
3/assets/frames_zui.md.4905636c.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as o,h as n,p as i,o as c,c as d,C as l}from"./chunks/framework.42439fff.js";const m={};async function f(t,e){const a=window.frameElement;if(!a)throw new Error("[whyframe] page is not within an iframe");const r=a.dataset.whyId;if(!r)throw new Error("[whyframe] iframe does not have an id");const s=m[r];if(!s)throw new Error("[whyframe] no app found");return await(await s()).createApp(t,e)}function p(){let t=null;window.addEventListener("storage",()=>{let e=localStorage.getItem("vitepress-theme-appearance");e!==t&&(t=e,e==="auto"&&(e=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),e==="light"?document.documentElement.classList.remove("dark"):e==="dark"&&document.documentElement.classList.add("dark"))})}const k=JSON.parse('{"title":"","description":"","frontmatter":{"layout":false,"head":[["link",{"rel":"stylesheet","href":"/zui.css"}],["script",{"src":"/zui.umd.cjs"}]]},"headers":[],"relativePath":"frames/zui.md","filePath":"frames/zui.md","lastUpdated":null}'),u={name:"frames/zui.md"},h=Object.assign(u,{setup(t){const e=n();return i(()=>{p(),f(e.value)}),(a,r)=>(c(),d("div",null,[l("div",{id:"vp-app",ref_key:"el",ref:e},null,512)]))}}),y=o(h,[["__scopeId","data-v-430f22fe"]]);export{k as __pageData,y as default};
3/assets/guide_config_base_color.md.11ddfe90.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/guide_config_base_color.md.11ddfe90.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{H as F,o as c,c as t,C as s,t as n,J as o,E as p,V as i,a as l,F as E,R as y,n as b,b as g}from"./chunks/framework.42439fff.js";const T=i("",3),A={class:b("row gap-4 mb-2 items-center")},k=["data-title"],v=s("span",{class:"muted"},"—",-1),w={class:"text-sm muted"},x={class:"justify-between gap-2 row"},P={class:"text-xs px-0.5 text-fore"},q=s("div",{class:"tip custom-block"},[s("p",{class:"custom-block-title"},"提示"),s("p",null,"点击调色板中的颜色，可以复制颜色变量名称方便在代码中使用。")],-1),I=s("h2",{id:"界面公共颜色",tabindex:"-1"},[l("界面公共颜色 "),s("a",{class:"header-anchor",href:"#界面公共颜色","aria-label":'Permalink to "界面公共颜色"'},"​")],-1),V=s("p",null,"在 ZUI 中，界面上公共的颜色已被精心梳理和定义，尽可能使用更少的颜色来定义大部分界面元素上可能用到的颜色。界面公共颜色都应该来自语义化调色板，你可以根据产品中的需要来更换其他调色板。下面是这些颜色的定义：",-1),D={class:"flex-auto"},U=s("span",{class:"muted"},"—",-1),N={class:"gap-4 row"},Z={class:"muted"},R=s("h2",{id:"特殊颜色",tabindex:"-1"},[l("特殊颜色 "),s("a",{class:"header-anchor",href:"#特殊颜色","aria-label":'Permalink to "特殊颜色"'},"​")],-1),L=s("p",null,"在 ZUI 中会用到一些特殊颜色，这些颜色的定义是固定的，不会因为更换主题或调色板而改变。下面是这些颜色的定义：",-1),$={class:"flex-auto"},z=s("span",{class:"muted"},"—",-1),H={class:"gap-4 row"},M=["innerHTML"],O=i("",4),j=s("h4",{style:{color:"var(--color-primary-500)"}}," 这是一段使用 Primary 调色板上的第 500 号颜色的文本 ",-1),J=i("",3),G=s("h4",{class:"text-primary"}," 这是一段使用 Primary 调色板上的第 500 号颜色的文本 ",-1),K=i("",8),Q=i("",3),ss=JSON.parse('{"title":"颜色","description":"","frontmatter":{},"headers":[],"relativePath":"guide/config/base/color.md","filePath":"guide/config/base/color.md","lastUpdated":null}'),W={name:"guide/config/base/color.md"},as=Object.assign(W,{setup(X){const _=[{id:"primary",tailwind:"blue",name:"主要",meaning:"品牌、主题、可交互、正常"},{id:"secondary",tailwind:"sky",name:"次要",meaning:"品牌、主题、次级、常态的"},{id:"success",tailwind:"green",name:"成功",meaning:"完成、积极"},{id:"warning",tailwind:"amber",name:"关注",meaning:"提示、重点"},{id:"danger",tailwind:"red",name:"警告",meaning:"提示、异常、警醒"},{id:"important",tailwind:"pink",name:"重要",meaning:"优先"},{id:"special",tailwind:"purple",name:"特殊",meaning:"触动、激情"},{id:"gray",tailwind:"slate",name:"灰色",meaning:"中立、背景、边界"}],B=[50,100,200,300,400,500,600,700,800,900,950],f=[{code:"canvas",name:"画布颜色",meaning:"通常用于页面背景、组件背景等，在浅色主题中为白色，在深色主题中为深黑色。"},{code:"inverse",name:"画布反色",meaning:"通常用于界面突出部分的背景或文字颜色，例如工具提示背景等，在浅色主题中为黑色，在深色主题中为白色。"},{code:"surface",name:"控件背景",meaning:"用于控件的背景颜色，例如按钮背景、可交互面板背景等，在浅色主题中为浅灰色，在深色主题中为深黑色。"},{code:"fore",name:"文本颜色",meaning:"默认的文本颜色，在浅色主题中为深黑色，在深色主题中为浅灰色。"},{code:"focus",name:"焦点颜色",meaning:"可聚焦控件的焦点状态指示颜色，例如按钮获得焦点的轮廓颜色。"},{code:"link",name:"链接颜色",meaning:"链接的颜色，例如超链接、按钮链接等，通常与主题色保持一致。"},{code:"link-hover",name:"链接悬停颜色",meaning:"链接的在鼠标悬停状态时的颜色"},{code:"link-visited",name:"链接访问后的颜色",meaning:"链接的在点击访问后的颜色"},{code:"placeholder",name:"占位文本颜色",meaning:"通常用于输入框的占位文本颜色"},{code:"border",name:"边框颜色",meaning:"控件的边框颜色"},{code:"border-strong",name:"加重的边框颜色",meaning:"加重的控件的边框颜色"},{code:"border-light",name:"轻量的边框颜色",meaning:"轻量的控件的边框颜色"}],C=[{code:"white",name:"白色",meaning:"永远为纯白色 <code>#FFFFFF</code>，不会受主题影响"},{code:"black",name:"黑色",meaning:"永远为纯黑色 <code>#000000</code>，不会受主题影响"},{code:"transparent",name:"透明色",meaning:"Alpha 通道永远为 <code>0</code>，不会受主题影响"},{code:"inherit",name:"继承色",meaning:"继承父元素同属性的颜色值，由 CSS color 属性值 <code>inherit</code> 提供。"},{code:"current",name:"当前色",meaning:"继承父元素文本颜色属性的值，由 CSS color 属性值 <code>currentColor</code> 提供。"}],u=()=>{let e=document.getElementById("doc-css-vars");e?e.remove():(e=document.createElement("style"),e.id="doc-css-vars",e.innerHTML=[":root {"," --color-primary-50: #faf5ff;"," --color-primary-100: #f3e8ff;"," --color-primary-200: #e9d5ff;"," --color-primary-300: #d8b4fe;"," --color-primary-400: #c084fc;"," --color-primary-500: #a855f7;"," --color-primary-600: #9333ea;"," --color-primary-700: #7e22ce;"," --color-primary-800: #6b21a8;"," --color-primary-900: #581c87;"," --color-primary-950: #3b0764;"," --color-primary-50-rgb: 250, 245, 255;"," --color-primary-100-rgb: 243, 233, 255;"," --color-primary-200-rgb: 233, 214, 254;"," --color-primary-300-rgb: 216, 182, 252;"," --color-primary-400-rgb: 191, 136, 249;"," --color-primary-500-rgb: 167, 92, 244;"," --color-primary-600-rgb: 146, 62, 231;"," --color-primary-700-rgb: 125, 46, 203;"," --color-primary-800-rgb: 106, 41, 166;"," --color-primary-900-rgb: 88, 34, 133;"," --color-primary-950-rgb: 59, 14, 99;","}"].join(`
`),document.head.appendChild(e))};return(e,h)=>{const d=F("ColorTile"),r=F("Example"),S=F("ClientOnly");return c(),t("div",null,[T,s("p",null,"ZUI 内置了 "+n(_.length)+" 种语义化调色板，每种类型都来自 TailwindCSS 内置的调色板，你可以根据产品中的需要来更换现有调色板。",1),o(r,{background:"light-circle",class:"space-y-4"},{default:p(()=>[(c(),t(E,null,y(_,a=>s("div",{key:a.id},[s("div",A,[s("div",{"data-toggle":"tooltip","data-title":`TailwindCSS 调色板名称：${a.tailwind}`},[s("strong",{class:b(`text-${a.id}`)},n(a.id.toUpperCase()),3),l(),v,l(),s("span",null,n(a.name),1)],8,k),s("small",w,n(a.meaning),1)]),s("div",x,[(c(),t(E,null,y(B,m=>s("div",{key:m,class:"flex-auto"},[o(d,{color:`color-${a.id}-${m}`},null,8,["color"]),s("div",P,n(m),1)])),64))])])),64))]),_:1}),q,I,V,o(r,{background:"light-circle",class:"space-y-4"},{default:p(()=>[(c(),t(E,null,y(f,a=>s("div",{class:"items-center gap-4 row",key:a.code},[o(d,{color:`color-${a.code}`,tileClass:"w-10 h-10 border border-fore rounded square"},null,8,["color"]),s("div",D,[s("div",null,[s("strong",null,n(a.code.toUpperCase()),1),l(),U,l(),s("span",null,n(a.name),1)]),s("div",N,[s("div",Z,n(a.meaning),1)])])])),64))]),_:1}),R,L,o(r,{background:"light-circle",class:"space-y-4"},{default:p(()=>[(c(),t(E,null,y(C,a=>s("div",{class:"items-center gap-4 row",key:a.code},[o(d,{color:`color-${a.code}`,tileClass:"w-10 h-10 border border-fore rounded square"},null,8,["color"]),s("div",$,[s("div",null,[s("strong",null,n(a.code.toUpperCase()),1),l(),z,l(),s("span",null,n(a.name),1)]),s("div",H,[s("div",{class:"muted",innerHTML:a.meaning},null,8,M)])])])),64))]),_:1}),O,o(r,null,{default:p(()=>[j]),_:1}),J,o(r,null,{default:p(()=>[G]),_:1}),K,o(S,null,{default:p(()=>[s("button",{type:"button",class:"rounded btn primary",onClick:h[0]||(h[0]=(...a)=>g(u)&&g(u)(...a))},"切换使用上面的调色板定义")]),_:1}),Q])}}});export{ss as __pageData,as as default};
3/assets/guide_config_base_font.md.190a4cae.js 0 → 100644
浏览文件 @ bd4e09de
import{H as h,o as n,c as i,J as o,E as l,C as e,a as s,V as g,F as p,R as m,t as a,n as _,G as u}from"./chunks/framework.42439fff.js";const T=e("h1",{id:"字体",tabindex:"-1"},[s("字体 "),e("a",{class:"header-anchor",href:"#字体","aria-label":'Permalink to "字体"'},"​")],-1),b=e("p",null,"字体配置包含字体、字号、字重和行高多个部分，下面分别进行介绍。",-1),v=e("h2",{id:"字体风格",tabindex:"-1"},[s("字体风格 "),e("a",{class:"header-anchor",href:"#字体风格","aria-label":'Permalink to "字体风格"'},"​")],-1),k=e("p",null,"字体用于设置文本呈现的风格，在 ZUI 中预设了三种字体风格，包括无衬线字体、衬线字体和等宽字体。下面为三种字体的直观展示：",-1),C={class:"items-center gap-2 row"},I={class:"font-mono uppercase text-primary"},w=e("span",{class:"muted"},"—",-1),z={class:"ml-4 muted"},P=["id"],$=e("p",null,"在 ZUI 中，以上三种字体风格所使用的 CSS font-family 属性值如下：",-1),V=e("p",null,[e("strong",null,[s("无衬线字体 "),e("code",null,"font-sans")])],-1),U={class:"px-2 py-1 rounded lighter"},q=e("p",null,[e("strong",null,[s("衬线字体 "),e("code",null,"font-serif")])],-1),A={class:"px-2 py-1 rounded lighter"},N=e("p",null,[e("strong",null,[s("等宽字体 "),e("code",null,"font-mono")])],-1),Z={class:"px-2 py-1 rounded lighter"},E=g('<div class="tip custom-block"><p class="custom-block-title">修改字体</p><p>通常不建议修改字体，如需修改可以通过定制主题实现，具体参见 <a href="/zui/3/guide/theme/">主题</a> 文档。</p></div><p>在 ZUI 中可以通过 CSS 工具类来设置字体，详细用法参加 <a href="/zui/3/utilities/typography/utilities/font-family.html">CSS 工具类 / 排版 / 字体</a> 文档。</p><h2 id="字号" tabindex="-1">字号 <a class="header-anchor" href="#字号" aria-label="Permalink to &quot;字号&quot;">​</a></h2><p>字号用于设置文本呈现的大小，在 ZUI 中预设了多种字号。详情参见下表：</p>',4),H={class:"items-center gap-2 row"},L={class:"font-mono uppercase text-primary"},M=e("span",{class:"muted"},"—",-1),D=["innerHTML"],j={class:"flex-auto font-mono text-sm text-right text-gray"},B=["id"],R=g('<div class="tip custom-block"><p class="custom-block-title">修改字号</p><p>通常不建议修改字号，如需修改可以通过定制主题实现，具体参见 <a href="/zui/3/guide/theme/">主题</a> 文档。</p></div><p>在 ZUI 中可以通过 CSS 工具类来设置字号，详细用法参加 <a href="/zui/3/utilities/typography/utilities/font-size.html">CSS 工具类 / 排版 / 字号</a> 文档。</p><h2 id="字重" tabindex="-1">字重 <a class="header-anchor" href="#字重" aria-label="Permalink to &quot;字重&quot;">​</a></h2><p>在 ZUI 中预设了 6 种常见字重，详情参见下表：</p>',4),F={class:"items-center gap-2 row"},J={class:"font-mono uppercase text-primary"},O=e("span",{class:"muted"},"—",-1),G=["innerHTML"],W={class:"flex-auto font-mono text-sm text-right text-gray"},K=["id"],Q=g('<div class="tip custom-block"><p class="custom-block-title">修改字重</p><p>通常不建议修改字重，如需修改可以通过定制主题实现，具体参见 <a href="/zui/3/guide/theme/">主题</a> 文档。</p></div><p>在 ZUI 中可以通过 CSS 工具类来设置字重，详细用法参加 <a href="/zui/3/utilities/typography/utilities/font-weight.html">CSS 工具类 / 排版 / 字重</a> 文档。</p><h2 id="行高" tabindex="-1">行高 <a class="header-anchor" href="#行高" aria-label="Permalink to &quot;行高&quot;">​</a></h2><p>ZUI 中预设了多种常见行高，下面为几种常见行高的示例：</p>',4),X={class:"items-center gap-2 row"},Y={class:"font-mono uppercase text-primary"},ee=e("span",{class:"muted"},"—",-1),te=["innerHTML"],oe={class:"flex-auto font-mono text-sm text-right text-gray"},se=["id"],ae=e("p",null,[s("在 ZUI 中可以通过 CSS 工具类来设置行高，详细用法参加 "),e("a",{href:"/zui/3/utilities/typography/utilities/leading.html"},"CSS 工具类 / 排版 / 行高"),s(" 文档。")],-1),re=JSON.parse('{"title":"字体","description":"","frontmatter":{},"headers":[],"relativePath":"guide/config/base/font.md","filePath":"guide/config/base/font.md","lastUpdated":null}'),ne={name:"guide/config/base/font.md"},pe=Object.assign(ne,{setup(ie){const f=[{code:"font-sans",name:"无衬线字体",desc:"默认字体，易于阅读，通常用于正文"},{code:"font-serif",name:"衬线字体",desc:"更美观，通常用于标题或装饰性文本"},{code:"font-mono",name:"等宽字体",desc:"每个字符宽度一致，便于对齐，辨识度高，通常用于代码和编号等"}],y=[{code:"text-root",name:"根节点字号",desc:"设置在 <code>&lt;html&gt;</code> 元素上的字号"},{code:"text-sm",name:"小号文本"},{code:"text-base",name:"基准字号文本",desc:"通常与页面默认字号一致"},{code:"text-md",name:"中号文本"},{code:"text-lg",name:"大号文本"},{code:"text-xl",name:"超大号文本"},{code:"text-2xl",name:"2x 超大号文本"},{code:"text-3xl",name:"3x 超大号文本"},{code:"text-4xl",name:"4x 超大号文本"}],S=[{code:"font-thin",name:"超细文本"},{code:"font-light",name:"细文本"},{code:"font-normal",name:"正常粗细文本"},{code:"font-medium",name:"中等粗细文本"},{code:"font-bold",name:"加粗文本"},{code:"font-black",name:"超粗文本"}],x=[{code:"leading-tight",name:"紧密"},{code:"leading-snug",name:"紧凑"},{code:"leading-normal",name:"正常"},{code:"leading-relaxed",name:"宽松"},{code:"leading-loose",name:"松散"}];return[...x],(le,ce)=>{const d=h("CopyCode"),r=h("Example"),c=h("CssPropValue");return n(),i("div",null,[T,b,v,k,o(r,{background:"light-circle",class:"space-y-8"},{default:l(()=>[(n(),i(p,null,m(f,t=>e("div",{key:t.code},[e("div",C,[o(d,{code:t.code,tip:`.${t.code}`,copyTip:"已复制类名"},{default:l(()=>[e("strong",I,a(t.code),1)]),_:2},1032,["code","tip"]),w,e("strong",null,a(t.name),1),s(),e("span",z,a(t.desc),1)]),e("pre",{class:_(`${t.code} text-xl mt-2`),id:`example-${t.code}`},`The quick brown fox jumps over the lazy dog.
白日依山尽，黄河入海流。欲穷千里目，更上一层楼。`,10,P)])),64))]),_:1}),$,V,e("div",U,[o(c,{class:"font-mono text-sm pre-line",prop:"font-family",target:"#example-font-sans"})]),q,e("div",A,[o(c,{class:"font-mono text-sm pre-line",prop:"font-family",target:"#example-font-serif"})]),N,e("div",Z,[o(c,{class:"font-mono text-sm pre-line",prop:"font-family",target:"#example-font-mono"})]),E,o(r,{class:"space-y-6"},{default:l(()=>[(n(),i(p,null,m(y,t=>e("div",{key:t.code},[e("div",H,[o(d,{code:t.code,tip:`.${t.code}`,copyTip:"已复制类名"},{default:l(()=>[e("strong",L,a(t.code),1)]),_:2},1032,["code","tip"]),M,e("strong",null,a(t.name),1),t.desc?(n(),i("span",{key:0,class:"ml-2 muted",innerHTML:t.desc},null,8,D)):u("",!0),e("div",j,[s("font-size: "),o(c,{prop:"font-size",target:`#example-${t.code}`},null,8,["target"])])]),e("pre",{class:_(`mt-2 font-sans pre clip ${t.code}`),id:`example-${t.code}`},`The quick brown fox jumps over the lazy dog.
白日依山尽，黄河入海流。欲穷千里目，更上一层楼。`,10,B)])),64))]),_:1}),R,o(r,{class:"space-y-6"},{default:l(()=>[(n(),i(p,null,m(S,t=>e("div",{key:t.code},[e("div",F,[o(d,{code:t.code,tip:`.${t.code}`,copyTip:"已复制类名"},{default:l(()=>[e("strong",J,a(t.code),1)]),_:2},1032,["code","tip"]),O,e("strong",null,a(t.name),1),t.desc?(n(),i("span",{key:0,class:"ml-2 muted",innerHTML:t.desc},null,8,G)):u("",!0),e("div",W,[s("font-weight: "),o(c,{prop:"font-weight",target:`#example-${t.code}`},null,8,["target"])])]),e("pre",{class:_(`mt-2 font-sans pre clip text-lg ${t.code}`),id:`example-${t.code}`},`The quick brown fox jumps over the lazy dog.
白日依山尽，黄河入海流。欲穷千里目，更上一层楼。`,10,K)])),64))]),_:1}),Q,o(r,{class:"space-y-6"},{default:l(()=>[(n(),i(p,null,m(x,t=>e("div",{key:t.code},[e("div",X,[o(d,{code:t.code,tip:`.${t.code}`,copyTip:"已复制类名"},{default:l(()=>[e("strong",Y,a(t.code),1)]),_:2},1032,["code","tip"]),ee,e("strong",null,a(t.name),1),t.desc?(n(),i("span",{key:0,class:"ml-2 muted",innerHTML:t.desc},null,8,te)):u("",!0),e("div",oe,[s("line-height: "),o(c,{prop:"line-height",target:`#example-${t.code}`},null,8,["target"])])]),e("pre",{class:_(`mt-2 font-sans pre-line text-lg ${t.code}`),id:`example-${t.code}`},`So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。`,10,se)])),64))]),_:1}),ae])}}});export{re as __pageData,pe as default};
3/assets/guide_config_base_font.md.190a4cae.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{H as h,o as n,c as i,J as o,E as l,C as e,a as s,V as g,F as p,R as m,t as a,n as _,G as u}from"./chunks/framework.42439fff.js";const T=e("h1",{id:"字体",tabindex:"-1"},[s("字体 "),e("a",{class:"header-anchor",href:"#字体","aria-label":'Permalink to "字体"'},"​")],-1),b=e("p",null,"字体配置包含字体、字号、字重和行高多个部分，下面分别进行介绍。",-1),v=e("h2",{id:"字体风格",tabindex:"-1"},[s("字体风格 "),e("a",{class:"header-anchor",href:"#字体风格","aria-label":'Permalink to "字体风格"'},"​")],-1),k=e("p",null,"字体用于设置文本呈现的风格，在 ZUI 中预设了三种字体风格，包括无衬线字体、衬线字体和等宽字体。下面为三种字体的直观展示：",-1),C={class:"items-center gap-2 row"},I={class:"font-mono uppercase text-primary"},w=e("span",{class:"muted"},"—",-1),z={class:"ml-4 muted"},P=["id"],$=e("p",null,"在 ZUI 中，以上三种字体风格所使用的 CSS font-family 属性值如下：",-1),V=e("p",null,[e("strong",null,[s("无衬线字体 "),e("code",null,"font-sans")])],-1),U={class:"px-2 py-1 rounded lighter"},q=e("p",null,[e("strong",null,[s("衬线字体 "),e("code",null,"font-serif")])],-1),A={class:"px-2 py-1 rounded lighter"},N=e("p",null,[e("strong",null,[s("等宽字体 "),e("code",null,"font-mono")])],-1),Z={class:"px-2 py-1 rounded lighter"},E=g("",4),H={class:"items-center gap-2 row"},L={class:"font-mono uppercase text-primary"},M=e("span",{class:"muted"},"—",-1),D=["innerHTML"],j={class:"flex-auto font-mono text-sm text-right text-gray"},B=["id"],R=g("",4),F={class:"items-center gap-2 row"},J={class:"font-mono uppercase text-primary"},O=e("span",{class:"muted"},"—",-1),G=["innerHTML"],W={class:"flex-auto font-mono text-sm text-right text-gray"},K=["id"],Q=g("",4),X={class:"items-center gap-2 row"},Y={class:"font-mono uppercase text-primary"},ee=e("span",{class:"muted"},"—",-1),te=["innerHTML"],oe={class:"flex-auto font-mono text-sm text-right text-gray"},se=["id"],ae=e("p",null,[s("在 ZUI 中可以通过 CSS 工具类来设置行高，详细用法参加 "),e("a",{href:"/zui/3/utilities/typography/utilities/leading.html"},"CSS 工具类 / 排版 / 行高"),s(" 文档。")],-1),re=JSON.parse('{"title":"字体","description":"","frontmatter":{},"headers":[],"relativePath":"guide/config/base/font.md","filePath":"guide/config/base/font.md","lastUpdated":null}'),ne={name:"guide/config/base/font.md"},pe=Object.assign(ne,{setup(ie){const f=[{code:"font-sans",name:"无衬线字体",desc:"默认字体，易于阅读，通常用于正文"},{code:"font-serif",name:"衬线字体",desc:"更美观，通常用于标题或装饰性文本"},{code:"font-mono",name:"等宽字体",desc:"每个字符宽度一致，便于对齐，辨识度高，通常用于代码和编号等"}],y=[{code:"text-root",name:"根节点字号",desc:"设置在 <code>&lt;html&gt;</code> 元素上的字号"},{code:"text-sm",name:"小号文本"},{code:"text-base",name:"基准字号文本",desc:"通常与页面默认字号一致"},{code:"text-md",name:"中号文本"},{code:"text-lg",name:"大号文本"},{code:"text-xl",name:"超大号文本"},{code:"text-2xl",name:"2x 超大号文本"},{code:"text-3xl",name:"3x 超大号文本"},{code:"text-4xl",name:"4x 超大号文本"}],S=[{code:"font-thin",name:"超细文本"},{code:"font-light",name:"细文本"},{code:"font-normal",name:"正常粗细文本"},{code:"font-medium",name:"中等粗细文本"},{code:"font-bold",name:"加粗文本"},{code:"font-black",name:"超粗文本"}],x=[{code:"leading-tight",name:"紧密"},{code:"leading-snug",name:"紧凑"},{code:"leading-normal",name:"正常"},{code:"leading-relaxed",name:"宽松"},{code:"leading-loose",name:"松散"}];return[...x],(le,ce)=>{const d=h("CopyCode"),r=h("Example"),c=h("CssPropValue");return n(),i("div",null,[T,b,v,k,o(r,{background:"light-circle",class:"space-y-8"},{default:l(()=>[(n(),i(p,null,m(f,t=>e("div",{key:t.code},[e("div",C,[o(d,{code:t.code,tip:`.${t.code}`,copyTip:"已复制类名"},{default:l(()=>[e("strong",I,a(t.code),1)]),_:2},1032,["code","tip"]),w,e("strong",null,a(t.name),1),s(),e("span",z,a(t.desc),1)]),e("pre",{class:_(`${t.code} text-xl mt-2`),id:`example-${t.code}`},`The quick brown fox jumps over the lazy dog.
白日依山尽，黄河入海流。欲穷千里目，更上一层楼。`,10,P)])),64))]),_:1}),$,V,e("div",U,[o(c,{class:"font-mono text-sm pre-line",prop:"font-family",target:"#example-font-sans"})]),q,e("div",A,[o(c,{class:"font-mono text-sm pre-line",prop:"font-family",target:"#example-font-serif"})]),N,e("div",Z,[o(c,{class:"font-mono text-sm pre-line",prop:"font-family",target:"#example-font-mono"})]),E,o(r,{class:"space-y-6"},{default:l(()=>[(n(),i(p,null,m(y,t=>e("div",{key:t.code},[e("div",H,[o(d,{code:t.code,tip:`.${t.code}`,copyTip:"已复制类名"},{default:l(()=>[e("strong",L,a(t.code),1)]),_:2},1032,["code","tip"]),M,e("strong",null,a(t.name),1),t.desc?(n(),i("span",{key:0,class:"ml-2 muted",innerHTML:t.desc},null,8,D)):u("",!0),e("div",j,[s("font-size: "),o(c,{prop:"font-size",target:`#example-${t.code}`},null,8,["target"])])]),e("pre",{class:_(`mt-2 font-sans pre clip ${t.code}`),id:`example-${t.code}`},`The quick brown fox jumps over the lazy dog.
白日依山尽，黄河入海流。欲穷千里目，更上一层楼。`,10,B)])),64))]),_:1}),R,o(r,{class:"space-y-6"},{default:l(()=>[(n(),i(p,null,m(S,t=>e("div",{key:t.code},[e("div",F,[o(d,{code:t.code,tip:`.${t.code}`,copyTip:"已复制类名"},{default:l(()=>[e("strong",J,a(t.code),1)]),_:2},1032,["code","tip"]),O,e("strong",null,a(t.name),1),t.desc?(n(),i("span",{key:0,class:"ml-2 muted",innerHTML:t.desc},null,8,G)):u("",!0),e("div",W,[s("font-weight: "),o(c,{prop:"font-weight",target:`#example-${t.code}`},null,8,["target"])])]),e("pre",{class:_(`mt-2 font-sans pre clip text-lg ${t.code}`),id:`example-${t.code}`},`The quick brown fox jumps over the lazy dog.
白日依山尽，黄河入海流。欲穷千里目，更上一层楼。`,10,K)])),64))]),_:1}),Q,o(r,{class:"space-y-6"},{default:l(()=>[(n(),i(p,null,m(x,t=>e("div",{key:t.code},[e("div",X,[o(d,{code:t.code,tip:`.${t.code}`,copyTip:"已复制类名"},{default:l(()=>[e("strong",Y,a(t.code),1)]),_:2},1032,["code","tip"]),ee,e("strong",null,a(t.name),1),t.desc?(n(),i("span",{key:0,class:"ml-2 muted",innerHTML:t.desc},null,8,te)):u("",!0),e("div",oe,[s("line-height: "),o(c,{prop:"line-height",target:`#example-${t.code}`},null,8,["target"])])]),e("pre",{class:_(`mt-2 font-sans pre-line text-lg ${t.code}`),id:`example-${t.code}`},`So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。`,10,se)])),64))]),_:1}),ae])}}});export{re as __pageData,pe as default};
3/assets/guide_config_base_rounded.md.d59a9c88.js 0 → 100644
浏览文件 @ bd4e09de
import{H as e,o as r,c as E,J as o,E as n,C as a,a as p,V as t,F as u,R as _,n as F,t as d}from"./chunks/framework.42439fff.js";const h=a("h1",{id:"圆角",tabindex:"-1"},[p("圆角 "),a("a",{class:"header-anchor",href:"#圆角","aria-label":'Permalink to "圆角"'},"​")],-1),m=a("h2",{id:"圆角配置",tabindex:"-1"},[p("圆角配置 "),a("a",{class:"header-anchor",href:"#圆角配置","aria-label":'Permalink to "圆角配置"'},"​")],-1),g=a("p",null,"圆角能让界面元素更加具有亲和力，在 ZUI 中预设了一系列的圆角，具体如下：",-1),C={class:"mt-2 font-bold"},b=t('<h2 id="使用圆角" tabindex="-1">使用圆角 <a class="header-anchor" href="#使用圆角" aria-label="Permalink to &quot;使用圆角&quot;">​</a></h2><h3 id="通过-css-工具类" tabindex="-1">通过 CSS 工具类 <a class="header-anchor" href="#通过-css-工具类" aria-label="Permalink to &quot;通过 CSS 工具类&quot;">​</a></h3><p>在 ZUI 中可以通过 CSS 工具类来设置圆角，详细用法参加 <a href="/zui/3/utilities/borders/utilities/border-radius.html">CSS 工具类 / 边框 / 边框圆角</a> 文档。下面为一个简单的例子：</p>',3),B=a("div",{class:"p-4 rounded-sm secondary"},"小圆角",-1),S=a("div",{class:"p-4 rounded-lg secondary"},"大圆角",-1),x=t(`<div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;p-4 rounded-sm secondary&quot;</span><span style="color:#E1E4E8;">&gt;小圆角&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;p-4 rounded-lg secondary&quot;</span><span style="color:#E1E4E8;">&gt;大圆角&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="通过-css-变量" tabindex="-1">通过 CSS 变量 <a class="header-anchor" href="#通过-css-变量" aria-label="Permalink to &quot;通过 CSS 变量&quot;">​</a></h3><p>你可以直接在 CSS 中引用圆角相关的 CSS 变量来使用圆角，例如：</p>`,3),f=a("div",{class:"p-4 secondary",style:{"border-radius":"var(--radius-sm)"}},"小圆角",-1),v=a("div",{class:"p-4 secondary",style:{"border-radius":"var(--radius-lg)"}},"大圆角",-1),T=t(`<div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;p-4 secondary&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">style</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;border-radius: var(--radius-sm)&quot;</span><span style="color:#E1E4E8;">&gt;小圆角&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;p-4 secondary&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">style</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;border-radius: var(--radius-lg)&quot;</span><span style="color:#E1E4E8;">&gt;大圆角&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="自定义圆角" tabindex="-1">自定义圆角 <a class="header-anchor" href="#自定义圆角" aria-label="Permalink to &quot;自定义圆角&quot;">​</a></h2><p>通过修改圆角配置可以快速改变界面风格，例如在一个简单清晰的风格下，你可能需要移除所有圆角设置。在 ZUI 中提供了多种方式来自定义圆角配置。</p><h3 id="覆盖-css-变量" tabindex="-1">覆盖 CSS 变量 <a class="header-anchor" href="#覆盖-css-变量" aria-label="Permalink to &quot;覆盖 CSS 变量&quot;">​</a></h3><p>最方便自定义圆角的方式是覆盖 CSS 变量。下面为一个例子：</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#B392F0;">:root</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--radius-none</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">0</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--radius-sm</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">0.125</span><span style="color:#F97583;">rem</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--radius-DEFAULT</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">0.25</span><span style="color:#F97583;">rem</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--radius-md</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">0.375</span><span style="color:#F97583;">rem</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--radius-lg</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">0.5</span><span style="color:#F97583;">rem</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--radius-xl</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">0.75</span><span style="color:#F97583;">rem</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--radius-2xl</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">1</span><span style="color:#F97583;">rem</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--radius-3xl</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">1.5</span><span style="color:#F97583;">rem</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--radius-full</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">9999</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre></div><h3 id="自定义主题" tabindex="-1">自定义主题 <a class="header-anchor" href="#自定义主题" aria-label="Permalink to &quot;自定义主题&quot;">​</a></h3><p>可以通过定制主题来修改圆角设置，具体参见 <a href="/zui/3/guide/theme/">主题</a> 文档。</p>`,8),V=JSON.parse('{"title":"圆角","description":"","frontmatter":{},"headers":[],"relativePath":"guide/config/base/rounded.md","filePath":"guide/config/base/rounded.md","lastUpdated":null}'),A={name:"guide/config/base/rounded.md"},U=Object.assign(A,{setup(q){const i=[{code:"none",name:"无圆角"},{code:"sm",name:"小圆角"},{code:"DEFAULT",name:"默认圆角"},{code:"md",name:"中等圆角"},{code:"lg",name:"大圆角"},{code:"xl",name:"超大圆角"},{code:"2xl",name:"2x 超大圆角"},{code:"3xl",name:"3x 超大圆角"},{code:"full",name:"完整圆角"}];return(D,P)=>{const c=e("CopyCode"),y=e("CssPropValue"),l=e("Example");return r(),E("div",null,[h,m,g,o(l,{class:"flex-wrap gap-4 row"},{default:n(()=>[(r(),E(u,null,_(i,s=>a("div",{key:s.code,class:"text-center w-28"},[o(c,{class:F(`bg-secondary hover-scale-shadow mx-auto w-14 h-14 ${s.code==="DEFAULT"?"rounded":`rounded-${s.code}`}`),code:s.code==="DEFAULT"?"rounded":`rounded-${s.code}`,tip:`.${s.code==="DEFAULT"?"rounded":`rounded-${s.code}`}`,id:`example-rounded-${s.code}`,copyTip:"已复制类名"},null,8,["class","code","tip","id"]),a("div",C,d(s.name),1),o(c,{class:"mt-1 font-mono text-sm",code:s.code==="DEFAULT"?"--radius":`--radius-${s.code}`,copyTip:"已复制变量名"},{default:n(()=>[p(d(s.code==="DEFAULT"?"--radius":`--radius-${s.code}`),1)]),_:2},1032,["code"]),o(y,{class:"font-mono text-sm muted",target:`#example-rounded-${s.code}`,prop:"border-radius","data-toggle":"tooltip","data-title":"实际值","data-placement":"left"},null,8,["target"])])),64))]),_:1}),b,o(l,{class:"gap-4 row"},{default:n(()=>[B,S]),_:1}),x,o(l,{class:"gap-4 row"},{default:n(()=>[f,v]),_:1}),T])}}});export{V as __pageData,U as default};
3/assets/guide_config_base_rounded.md.d59a9c88.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{H as e,o as r,c as E,J as o,E as n,C as a,a as p,V as t,F as u,R as _,n as F,t as d}from"./chunks/framework.42439fff.js";const h=a("h1",{id:"圆角",tabindex:"-1"},[p("圆角 "),a("a",{class:"header-anchor",href:"#圆角","aria-label":'Permalink to "圆角"'},"​")],-1),m=a("h2",{id:"圆角配置",tabindex:"-1"},[p("圆角配置 "),a("a",{class:"header-anchor",href:"#圆角配置","aria-label":'Permalink to "圆角配置"'},"​")],-1),g=a("p",null,"圆角能让界面元素更加具有亲和力，在 ZUI 中预设了一系列的圆角，具体如下：",-1),C={class:"mt-2 font-bold"},b=t("",3),B=a("div",{class:"p-4 rounded-sm secondary"},"小圆角",-1),S=a("div",{class:"p-4 rounded-lg secondary"},"大圆角",-1),x=t("",3),f=a("div",{class:"p-4 secondary",style:{"border-radius":"var(--radius-sm)"}},"小圆角",-1),v=a("div",{class:"p-4 secondary",style:{"border-radius":"var(--radius-lg)"}},"大圆角",-1),T=t("",8),V=JSON.parse('{"title":"圆角","description":"","frontmatter":{},"headers":[],"relativePath":"guide/config/base/rounded.md","filePath":"guide/config/base/rounded.md","lastUpdated":null}'),A={name:"guide/config/base/rounded.md"},U=Object.assign(A,{setup(q){const i=[{code:"none",name:"无圆角"},{code:"sm",name:"小圆角"},{code:"DEFAULT",name:"默认圆角"},{code:"md",name:"中等圆角"},{code:"lg",name:"大圆角"},{code:"xl",name:"超大圆角"},{code:"2xl",name:"2x 超大圆角"},{code:"3xl",name:"3x 超大圆角"},{code:"full",name:"完整圆角"}];return(D,P)=>{const c=e("CopyCode"),y=e("CssPropValue"),l=e("Example");return r(),E("div",null,[h,m,g,o(l,{class:"flex-wrap gap-4 row"},{default:n(()=>[(r(),E(u,null,_(i,s=>a("div",{key:s.code,class:"text-center w-28"},[o(c,{class:F(`bg-secondary hover-scale-shadow mx-auto w-14 h-14 ${s.code==="DEFAULT"?"rounded":`rounded-${s.code}`}`),code:s.code==="DEFAULT"?"rounded":`rounded-${s.code}`,tip:`.${s.code==="DEFAULT"?"rounded":`rounded-${s.code}`}`,id:`example-rounded-${s.code}`,copyTip:"已复制类名"},null,8,["class","code","tip","id"]),a("div",C,d(s.name),1),o(c,{class:"mt-1 font-mono text-sm",code:s.code==="DEFAULT"?"--radius":`--radius-${s.code}`,copyTip:"已复制变量名"},{default:n(()=>[p(d(s.code==="DEFAULT"?"--radius":`--radius-${s.code}`),1)]),_:2},1032,["code"]),o(y,{class:"font-mono text-sm muted",target:`#example-rounded-${s.code}`,prop:"border-radius","data-toggle":"tooltip","data-title":"实际值","data-placement":"left"},null,8,["target"])])),64))]),_:1}),b,o(l,{class:"gap-4 row"},{default:n(()=>[B,S]),_:1}),x,o(l,{class:"gap-4 row"},{default:n(()=>[f,v]),_:1}),T])}}});export{V as __pageData,U as default};
3/assets/guide_config_base_screens.md.bb6bec47.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as o,H as e,o as p,c,C as s,a as n,J as a,E as r,V as E}from"./chunks/framework.42439fff.js";const Y=JSON.parse('{"title":"屏幕","description":"","frontmatter":{},"headers":[],"relativePath":"guide/config/base/screens.md","filePath":"guide/config/base/screens.md","lastUpdated":null}'),i={name:"guide/config/base/screens.md"},d=s("h1",{id:"屏幕",tabindex:"-1"},[n("屏幕 "),s("a",{class:"header-anchor",href:"#屏幕","aria-label":'Permalink to "屏幕"'},"​")],-1),y=s("h2",{id:"屏幕断点",tabindex:"-1"},[n("屏幕断点 "),s("a",{class:"header-anchor",href:"#屏幕断点","aria-label":'Permalink to "屏幕断点"'},"​")],-1),h=s("p",null,"在 ZUI 中定义了一系列屏幕断点，你可以通过这些断点来实现响应式布局。下面为断点配置信息：",-1),_=s("thead",null,[s("tr",null,[s("th",null,"屏幕断点"),s("th",{style:{"text-align":"center"}},"内部名称"),s("th",{style:{"text-align":"center"}},"CSS 变量"),s("th",{style:{"text-align":"center"}},"尺寸范围")])],-1),F=s("td",null,"超小尺寸",-1),u=s("td",{style:{"text-align":"center"}},[s("code",null,"xs")],-1),x=s("td",{style:{"text-align":"center"}},"无",-1),g={style:{"text-align":"center"}},m=s("td",null,"小尺寸",-1),B=s("td",{style:{"text-align":"center"}},[s("code",null,"sm")],-1),b=s("td",{style:{"text-align":"center"}},[s("code",null,"--screen-sm")],-1),S={style:{"text-align":"center"}},C=s("td",null,"中等尺寸",-1),f=s("td",{style:{"text-align":"center"}},[s("code",null,"md")],-1),v=s("td",{style:{"text-align":"center"}},[s("code",null,"--screen-md")],-1),k={style:{"text-align":"center"}},P=s("td",null,"大尺寸",-1),A=s("td",{style:{"text-align":"center"}},[s("code",null,"lg")],-1),w=s("td",{style:{"text-align":"center"}},[s("code",null,"--screen-lg")],-1),q={style:{"text-align":"center"}},V=s("td",null,"超大尺寸",-1),T=s("td",{style:{"text-align":"center"}},[s("code",null,"xl")],-1),N=s("td",{style:{"text-align":"center"}},[s("code",null,"--screen-xl")],-1),D={style:{"text-align":"center"}},$=s("td",null,"2x 超大尺寸",-1),I=s("td",{style:{"text-align":"center"}},[s("code",null,"2xl")],-1),z=s("td",{style:{"text-align":"center"}},[s("code",null,"--screen-2xl")],-1),J={style:{"text-align":"center"}},U=s("h2",{id:"使用断点",tabindex:"-1"},[n("使用断点 "),s("a",{class:"header-anchor",href:"#使用断点","aria-label":'Permalink to "使用断点"'},"​")],-1),H=s("h3",{id:"通过-container-工具类",tabindex:"-1"},[n("通过 "),s("code",null,".container"),n(" 工具类 "),s("a",{class:"header-anchor",href:"#通过-container-工具类","aria-label":'Permalink to "通过 `.container` 工具类"'},"​")],-1),O=s("p",null,[n("使用屏幕断点最简单的方式为使用 CSS 工具类 "),s("code",null,".container"),n("，此工具类会让所属元素成为一个随屏幕宽度自动响应的容器。下面为一个示例：")],-1),R=s("div",{class:"container p-4 secondary"},"自适应容器",-1),Z=E(`<div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;container&quot;</span><span style="color:#E1E4E8;">&gt;自适应容器&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre></div><p>了解 <code>.container</code> 工具类的更多用法可以参考 <a href="/zui/3/utilities/layout/utilities/container.html">CSS 工具类 / 布局 / 容器</a> 文档。</p><h3 id="通过-css-变量" tabindex="-1">通过 CSS 变量 <a class="header-anchor" href="#通过-css-变量" aria-label="Permalink to &quot;通过 CSS 变量&quot;">​</a></h3><p>你可以通过 CSS 变量来获取屏幕断点的值，下面为通过 CSS 变量实现 <code>.container</code> 工具类的示例：</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#B392F0;">.-container</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">width</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">100</span><span style="color:#F97583;">%</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span>
<span class="line"><span style="color:#F97583;">@media</span><span style="color:#E1E4E8;"> (</span><span style="color:#79B8FF;">min-width</span><span style="color:#E1E4E8;">: var(--screen-sm)) {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">.-container</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">max-width</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">var</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">--screen-sm</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span>
<span class="line"><span style="color:#F97583;">@media</span><span style="color:#E1E4E8;"> (</span><span style="color:#79B8FF;">min-width</span><span style="color:#E1E4E8;">: var(--screen-md)) {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">.-container</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">max-width</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">var</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">--screen-md</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span>
<span class="line"><span style="color:#F97583;">@media</span><span style="color:#E1E4E8;"> (</span><span style="color:#79B8FF;">min-width</span><span style="color:#E1E4E8;">: var(--screen-lg)) {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">.-container</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">max-width</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">var</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">--screen-lg</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span>
<span class="line"><span style="color:#F97583;">@media</span><span style="color:#E1E4E8;"> (</span><span style="color:#79B8FF;">min-width</span><span style="color:#E1E4E8;">: var(--screen-xl)) {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">.-container</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">max-width</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">var</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">--screen-xl</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span>
<span class="line"><span style="color:#F97583;">@media</span><span style="color:#E1E4E8;"> (</span><span style="color:#79B8FF;">min-width</span><span style="color:#E1E4E8;">: var(--screen-2xl)) {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">.-container</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">max-width</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">var</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">--screen-2xl</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre></div><h2 id="自定义断点" tabindex="-1">自定义断点 <a class="header-anchor" href="#自定义断点" aria-label="Permalink to &quot;自定义断点&quot;">​</a></h2><h3 id="覆盖-css-变量" tabindex="-1">覆盖 CSS 变量 <a class="header-anchor" href="#覆盖-css-变量" aria-label="Permalink to &quot;覆盖 CSS 变量&quot;">​</a></h3><p>最方便自定义屏幕断点的方式是覆盖 CSS 变量。下面为一个例子：</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#B392F0;">:root</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--screen-sm</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">640</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--screen-md</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">768</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--screen-lg</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">1024</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--screen-xl</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">1280</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--screen-2xl</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">1536</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre></div><h3 id="自定义主题" tabindex="-1">自定义主题 <a class="header-anchor" href="#自定义主题" aria-label="Permalink to &quot;自定义主题&quot;">​</a></h3><p>可以通过定制主题来修改屏幕断点设置，具体参见 <a href="/zui/3/guide/theme/">主题</a> 文档。</p>`,11);function j(G,K,L,M,Q,W){const l=e("CssPropValue"),t=e("Example");return p(),c("div",null,[d,y,h,s("table",null,[_,s("tbody",null,[s("tr",null,[F,u,x,s("td",g,[n("< "),a(l,{prop:"--screen-sm",target:"body"})])]),s("tr",null,[m,B,b,s("td",S,[n("≥ "),a(l,{prop:"--screen-sm",target:"body"})])]),s("tr",null,[C,f,v,s("td",k,[n("≥ "),a(l,{prop:"--screen-md",target:"body"})])]),s("tr",null,[P,A,w,s("td",q,[n("≥ "),a(l,{prop:"--screen-lg",target:"body"})])]),s("tr",null,[V,T,N,s("td",D,[n("≥ "),a(l,{prop:"--screen-xl",target:"body"})])]),s("tr",null,[$,I,z,s("td",J,[n("≥ "),a(l,{prop:"--screen-2xl",target:"body"})])])])]),U,H,O,a(t,null,{default:r(()=>[R]),_:1}),Z])}const ss=o(i,[["render",j]]);export{Y as __pageData,ss as default};
3/assets/guide_config_base_screens.md.bb6bec47.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as o,H as e,o as p,c,C as s,a as n,J as a,E as r,V as E}from"./chunks/framework.42439fff.js";const Y=JSON.parse('{"title":"屏幕","description":"","frontmatter":{},"headers":[],"relativePath":"guide/config/base/screens.md","filePath":"guide/config/base/screens.md","lastUpdated":null}'),i={name:"guide/config/base/screens.md"},d=s("h1",{id:"屏幕",tabindex:"-1"},[n("屏幕 "),s("a",{class:"header-anchor",href:"#屏幕","aria-label":'Permalink to "屏幕"'},"​")],-1),y=s("h2",{id:"屏幕断点",tabindex:"-1"},[n("屏幕断点 "),s("a",{class:"header-anchor",href:"#屏幕断点","aria-label":'Permalink to "屏幕断点"'},"​")],-1),h=s("p",null,"在 ZUI 中定义了一系列屏幕断点，你可以通过这些断点来实现响应式布局。下面为断点配置信息：",-1),_=s("thead",null,[s("tr",null,[s("th",null,"屏幕断点"),s("th",{style:{"text-align":"center"}},"内部名称"),s("th",{style:{"text-align":"center"}},"CSS 变量"),s("th",{style:{"text-align":"center"}},"尺寸范围")])],-1),F=s("td",null,"超小尺寸",-1),u=s("td",{style:{"text-align":"center"}},[s("code",null,"xs")],-1),x=s("td",{style:{"text-align":"center"}},"无",-1),g={style:{"text-align":"center"}},m=s("td",null,"小尺寸",-1),B=s("td",{style:{"text-align":"center"}},[s("code",null,"sm")],-1),b=s("td",{style:{"text-align":"center"}},[s("code",null,"--screen-sm")],-1),S={style:{"text-align":"center"}},C=s("td",null,"中等尺寸",-1),f=s("td",{style:{"text-align":"center"}},[s("code",null,"md")],-1),v=s("td",{style:{"text-align":"center"}},[s("code",null,"--screen-md")],-1),k={style:{"text-align":"center"}},P=s("td",null,"大尺寸",-1),A=s("td",{style:{"text-align":"center"}},[s("code",null,"lg")],-1),w=s("td",{style:{"text-align":"center"}},[s("code",null,"--screen-lg")],-1),q={style:{"text-align":"center"}},V=s("td",null,"超大尺寸",-1),T=s("td",{style:{"text-align":"center"}},[s("code",null,"xl")],-1),N=s("td",{style:{"text-align":"center"}},[s("code",null,"--screen-xl")],-1),D={style:{"text-align":"center"}},$=s("td",null,"2x 超大尺寸",-1),I=s("td",{style:{"text-align":"center"}},[s("code",null,"2xl")],-1),z=s("td",{style:{"text-align":"center"}},[s("code",null,"--screen-2xl")],-1),J={style:{"text-align":"center"}},U=s("h2",{id:"使用断点",tabindex:"-1"},[n("使用断点 "),s("a",{class:"header-anchor",href:"#使用断点","aria-label":'Permalink to "使用断点"'},"​")],-1),H=s("h3",{id:"通过-container-工具类",tabindex:"-1"},[n("通过 "),s("code",null,".container"),n(" 工具类 "),s("a",{class:"header-anchor",href:"#通过-container-工具类","aria-label":'Permalink to "通过 `.container` 工具类"'},"​")],-1),O=s("p",null,[n("使用屏幕断点最简单的方式为使用 CSS 工具类 "),s("code",null,".container"),n("，此工具类会让所属元素成为一个随屏幕宽度自动响应的容器。下面为一个示例：")],-1),R=s("div",{class:"container p-4 secondary"},"自适应容器",-1),Z=E("",11);function j(G,K,L,M,Q,W){const l=e("CssPropValue"),t=e("Example");return p(),c("div",null,[d,y,h,s("table",null,[_,s("tbody",null,[s("tr",null,[F,u,x,s("td",g,[n("< "),a(l,{prop:"--screen-sm",target:"body"})])]),s("tr",null,[m,B,b,s("td",S,[n("≥ "),a(l,{prop:"--screen-sm",target:"body"})])]),s("tr",null,[C,f,v,s("td",k,[n("≥ "),a(l,{prop:"--screen-md",target:"body"})])]),s("tr",null,[P,A,w,s("td",q,[n("≥ "),a(l,{prop:"--screen-lg",target:"body"})])]),s("tr",null,[V,T,N,s("td",D,[n("≥ "),a(l,{prop:"--screen-xl",target:"body"})])]),s("tr",null,[$,I,z,s("td",J,[n("≥ "),a(l,{prop:"--screen-2xl",target:"body"})])])])]),U,H,O,a(t,null,{default:r(()=>[R]),_:1}),Z])}const ss=o(i,[["render",j]]);export{Y as __pageData,ss as default};
3/assets/guide_config_base_shadow.md.2c675445.js 0 → 100644
浏览文件 @ bd4e09de
import{H as p,o as E,c as r,J as o,E as n,C as s,a as e,V as t,F as i,R as B,n as h,t as y}from"./chunks/framework.42439fff.js";const _=s("h1",{id:"阴影",tabindex:"-1"},[e("阴影 "),s("a",{class:"header-anchor",href:"#阴影","aria-label":'Permalink to "阴影"'},"​")],-1),u=s("h2",{id:"阴影配置",tabindex:"-1"},[e("阴影配置 "),s("a",{class:"header-anchor",href:"#阴影配置","aria-label":'Permalink to "阴影配置"'},"​")],-1),x=s("p",null,"阴影能让界面元素更加具有层次感，在 ZUI 中预设了一系列的阴影，具体如下：",-1),m=s("div",{class:"gap-4 row"},[s("div",{class:"font-bold w-14 muted"},"预览"),s("div",{class:"w-20 font-bold muted"},"阴影名称"),s("div",{class:"font-bold w-28 muted"},"CSS 变量名"),s("div",{class:"font-bold muted"},"box-shadow 实际值")],-1),g={class:"flex-none w-20 mt-2 font-bold"},b={class:"flex-auto","data-toggle":"tooltip","data-title":"实际值"},v=t('<h2 id="使用阴影" tabindex="-1">使用阴影 <a class="header-anchor" href="#使用阴影" aria-label="Permalink to &quot;使用阴影&quot;">​</a></h2><h3 id="通过-css-工具类" tabindex="-1">通过 CSS 工具类 <a class="header-anchor" href="#通过-css-工具类" aria-label="Permalink to &quot;通过 CSS 工具类&quot;">​</a></h3><p>在 ZUI 中可以通过 CSS 工具类来设置阴影，详细用法参加 <a href="/zui/3/utilities/effects/utilities/shadow.html">CSS 工具类 / 效果 / 盒阴影</a> 文档。下面为一个简单的例子：</p>',3),C=s("div",{class:"p-4 shadow-sm canvas"},"小阴影",-1),w=s("div",{class:"p-4 shadow-lg canvas"},"大阴影",-1),f=t(`<div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;p-4 shadow-sm canvas&quot;</span><span style="color:#E1E4E8;">&gt;小阴影&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;p-4 shadow-lg canvas&quot;</span><span style="color:#E1E4E8;">&gt;大阴影&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="通过-css-变量" tabindex="-1">通过 CSS 变量 <a class="header-anchor" href="#通过-css-变量" aria-label="Permalink to &quot;通过 CSS 变量&quot;">​</a></h3><p>你可以直接在 CSS 中引用阴影相关的 CSS 变量来使用阴影，例如：</p>`,3),S=s("div",{class:"p-4 canvas",style:{"box-shadow":"var(--shadow-sm)"}},"小阴影",-1),T=s("div",{class:"p-4 canvas",style:{"box-shadow":"var(--shadow-lg)"}},"大阴影",-1),q=t(`<div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;p-4 canvas&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">style</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;box-shadow: var(--shadow-sm)&quot;</span><span style="color:#E1E4E8;">&gt;小阴影&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;p-4 canvas&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">style</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;box-shadow: var(--shadow-lg)&quot;</span><span style="color:#E1E4E8;">&gt;大阴影&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="自定义阴影" tabindex="-1">自定义阴影 <a class="header-anchor" href="#自定义阴影" aria-label="Permalink to &quot;自定义阴影&quot;">​</a></h2><p>通过修改阴影配置可以快速改变界面风格，例如在一个简单清晰的风格下，你可能需要移除所有阴影设置。在 ZUI 中提供了多种方式来自定义阴影配置。</p><h3 id="覆盖-css-变量" tabindex="-1">覆盖 CSS 变量 <a class="header-anchor" href="#覆盖-css-变量" aria-label="Permalink to &quot;覆盖 CSS 变量&quot;">​</a></h3><p>最方便自定义阴影的方式是覆盖 CSS 变量。下面为一个例子：</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#B392F0;">:root</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--shadow-sm</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">2</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">rgb</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> / </span><span style="color:#79B8FF;">0.05</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--shadow</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">4</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">rgb</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> / </span><span style="color:#79B8FF;">0.1</span><span style="color:#E1E4E8;">), </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">2</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">-1</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">rgb</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> / </span><span style="color:#79B8FF;">0.1</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--shadow-md</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">2</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">8</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">-1</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">rgb</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> / </span><span style="color:#79B8FF;">0.1</span><span style="color:#E1E4E8;">), </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">4</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">-2</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">rgb</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> / </span><span style="color:#79B8FF;">0.1</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--shadow-lg</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">4</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">16</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">-4</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">rgb</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> / </span><span style="color:#79B8FF;">0.1</span><span style="color:#E1E4E8;">), </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">2</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">6</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">-4</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">rgb</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> / </span><span style="color:#79B8FF;">0.1</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--shadow-xl</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">6</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">32</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">-6</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">rgb</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> / </span><span style="color:#79B8FF;">0.15</span><span style="color:#E1E4E8;">), </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">4</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">10</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">-6</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">rgb</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> / </span><span style="color:#79B8FF;">0.15</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--shadow-2xl</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">25</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">50</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">-12</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">rgb</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> / </span><span style="color:#79B8FF;">0.25</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--shadow-inner</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">inset</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">2</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">4</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">rgb</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> / </span><span style="color:#79B8FF;">0.05</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--shadow-none</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">none</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre></div><h3 id="自定义主题" tabindex="-1">自定义主题 <a class="header-anchor" href="#自定义主题" aria-label="Permalink to &quot;自定义主题&quot;">​</a></h3><p>可以通过定制主题来修改阴影设置，具体参见 <a href="/zui/3/guide/theme/">主题</a> 文档。</p>`,8),U=JSON.parse('{"title":"阴影","description":"","frontmatter":{},"headers":[],"relativePath":"guide/config/base/shadow.md","filePath":"guide/config/base/shadow.md","lastUpdated":null}'),A={name:"guide/config/base/shadow.md"},I=Object.assign(A,{setup(D){const F=[{code:"inner",name:"内部阴影"},{code:"none",name:"无阴影"},{code:"sm",name:"小阴影"},{code:"DEFAULT",name:"默认阴影"},{code:"md",name:"中等阴影"},{code:"lg",name:"大阴影"},{code:"xl",name:"超大阴影"},{code:"2xl",name:"2x 超大阴影"}];return(k,P)=>{const c=p("CopyCode"),d=p("CssPropValue"),l=p("Example");return E(),r("div",null,[_,u,x,o(l,{background:"light-grid",class:"space-y-6"},{default:n(()=>[m,(E(),r(i,null,B(F,a=>s("div",{key:a.code,class:"items-center gap-4 row"},[o(c,{class:h(`flex-none bg-canvas hover-scale mx-auto w-14 h-14 ${a.code==="DEFAULT"?"shadow":`shadow-${a.code}`}`),code:a.code==="DEFAULT"?"shadow":`shadow-${a.code}`,tip:`.${a.code==="DEFAULT"?"shadow":`shadow-${a.code}`}`,id:`example-shadow-${a.code}`,copyTip:"已复制类名"},null,8,["class","code","tip","id"]),s("div",g,y(a.name),1),o(c,{class:"flex-none mt-1 font-mono text-sm w-28",code:a.code==="DEFAULT"?"--shadow":`--shadow-${a.code}`,copyTip:"已复制变量名"},{default:n(()=>[e(y(a.code==="DEFAULT"?"--shadow":`--shadow-${a.code}`),1)]),_:2},1032,["code"]),s("div",b,[o(d,{class:"font-mono text-sm muted",target:`#example-shadow-${a.code}`,prop:"box-shadow"},null,8,["target"])])])),64))]),_:1}),v,o(l,{class:"gap-4 row"},{default:n(()=>[C,w]),_:1}),f,o(l,{class:"gap-4 row"},{default:n(()=>[S,T]),_:1}),q])}}});export{U as __pageData,I as default};
3/assets/guide_config_base_shadow.md.2c675445.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{H as p,o as E,c as r,J as o,E as n,C as s,a as e,V as t,F as i,R as B,n as h,t as y}from"./chunks/framework.42439fff.js";const _=s("h1",{id:"阴影",tabindex:"-1"},[e("阴影 "),s("a",{class:"header-anchor",href:"#阴影","aria-label":'Permalink to "阴影"'},"​")],-1),u=s("h2",{id:"阴影配置",tabindex:"-1"},[e("阴影配置 "),s("a",{class:"header-anchor",href:"#阴影配置","aria-label":'Permalink to "阴影配置"'},"​")],-1),x=s("p",null,"阴影能让界面元素更加具有层次感，在 ZUI 中预设了一系列的阴影，具体如下：",-1),m=s("div",{class:"gap-4 row"},[s("div",{class:"font-bold w-14 muted"},"预览"),s("div",{class:"w-20 font-bold muted"},"阴影名称"),s("div",{class:"font-bold w-28 muted"},"CSS 变量名"),s("div",{class:"font-bold muted"},"box-shadow 实际值")],-1),g={class:"flex-none w-20 mt-2 font-bold"},b={class:"flex-auto","data-toggle":"tooltip","data-title":"实际值"},v=t("",3),C=s("div",{class:"p-4 shadow-sm canvas"},"小阴影",-1),w=s("div",{class:"p-4 shadow-lg canvas"},"大阴影",-1),f=t("",3),S=s("div",{class:"p-4 canvas",style:{"box-shadow":"var(--shadow-sm)"}},"小阴影",-1),T=s("div",{class:"p-4 canvas",style:{"box-shadow":"var(--shadow-lg)"}},"大阴影",-1),q=t("",8),U=JSON.parse('{"title":"阴影","description":"","frontmatter":{},"headers":[],"relativePath":"guide/config/base/shadow.md","filePath":"guide/config/base/shadow.md","lastUpdated":null}'),A={name:"guide/config/base/shadow.md"},I=Object.assign(A,{setup(D){const F=[{code:"inner",name:"内部阴影"},{code:"none",name:"无阴影"},{code:"sm",name:"小阴影"},{code:"DEFAULT",name:"默认阴影"},{code:"md",name:"中等阴影"},{code:"lg",name:"大阴影"},{code:"xl",name:"超大阴影"},{code:"2xl",name:"2x 超大阴影"}];return(k,P)=>{const c=p("CopyCode"),d=p("CssPropValue"),l=p("Example");return E(),r("div",null,[_,u,x,o(l,{background:"light-grid",class:"space-y-6"},{default:n(()=>[m,(E(),r(i,null,B(F,a=>s("div",{key:a.code,class:"items-center gap-4 row"},[o(c,{class:h(`flex-none bg-canvas hover-scale mx-auto w-14 h-14 ${a.code==="DEFAULT"?"shadow":`shadow-${a.code}`}`),code:a.code==="DEFAULT"?"shadow":`shadow-${a.code}`,tip:`.${a.code==="DEFAULT"?"shadow":`shadow-${a.code}`}`,id:`example-shadow-${a.code}`,copyTip:"已复制类名"},null,8,["class","code","tip","id"]),s("div",g,y(a.name),1),o(c,{class:"flex-none mt-1 font-mono text-sm w-28",code:a.code==="DEFAULT"?"--shadow":`--shadow-${a.code}`,copyTip:"已复制变量名"},{default:n(()=>[e(y(a.code==="DEFAULT"?"--shadow":`--shadow-${a.code}`),1)]),_:2},1032,["code"]),s("div",b,[o(d,{class:"font-mono text-sm muted",target:`#example-shadow-${a.code}`,prop:"box-shadow"},null,8,["target"])])])),64))]),_:1}),v,o(l,{class:"gap-4 row"},{default:n(()=>[C,w]),_:1}),f,o(l,{class:"gap-4 row"},{default:n(()=>[S,T]),_:1}),q])}}});export{U as __pageData,I as default};
3/assets/guide_config_base_spacing.md.ed3e74aa.js 0 → 100644
浏览文件 @ bd4e09de
import{H as i,o as a,c as s,J as o,E as r,C as e,a as l,V as p,F as h,R as u,t as _,n as m}from"./chunks/framework.42439fff.js";const g=e("h1",{id:"间距",tabindex:"-1"},[l("间距 "),e("a",{class:"header-anchor",href:"#间距","aria-label":'Permalink to "间距"'},"​")],-1),f=e("h2",{id:"间距配置",tabindex:"-1"},[l("间距配置 "),e("a",{class:"header-anchor",href:"#间距配置","aria-label":'Permalink to "间距配置"'},"​")],-1),b=e("p",null,"为了方便实现风格一致的交互界面，ZUI 预置了间距设置。下面为默认的间距配置：",-1),x=e("div",{class:"gap-4 mb-2 row"},[e("div",{class:"w-12 font-bold muted"},"名称"),e("div",{class:"w-12 font-bold muted"},"实际值"),e("div",{class:"w-12 font-bold muted"},"预览")],-1),v={class:"w-12 font-mono font-bold"},w=["id"],S=p('<div class="tip custom-block"><p class="custom-block-title"><code>4px</code> 约定</p><p>通过上表可以看到，除了 <code>0</code> 和 <code>px</code> 比较特殊的设置，其他间距实际值都是 <code>4px</code> 的倍数，这是有意设计，无论是设计还是开发都应该将间距为 <code>4px</code> 的倍数作为约定，这样更有利于实现风格一致的交互界面。</p><p>当以上间距无法满足要求时，如果需要引入新的间距值也应当遵从 <code>4px</code> 约定。</p></div><p>间距会影响所有相关 CSS 属性配置，包括 <code>padding</code>、<code>margin</code>、<code>width</code>、<code>height</code>、<code>maxHeight</code>、<code>gap</code>、<code>inset</code> 等。</p><h2 id="使用间距" tabindex="-1">使用间距 <a class="header-anchor" href="#使用间距" aria-label="Permalink to &quot;使用间距&quot;">​</a></h2><p>在 ZUI 中提供了大量 CSS 工具类，可以非常方便的来应用间距配置，包括：</p><ul><li><a href="/zui/3/utilities/layout/utilities/top-right-bottom-left.html">布局 / 上/右/下/左</a></li><li><a href="/zui/3/utilities/spacing/utilities/margin.html">间距 / 外边距</a></li><li><a href="/zui/3/utilities/spacing/utilities/padding.html">间距 / 内边距</a></li><li><a href="/zui/3/utilities/spacing/utilities/space.html">间距 / 子元素间距</a></li><li><a href="/zui/3/utilities/sizing/utilities/width.html">尺寸 / 宽</a></li><li><a href="/zui/3/utilities/sizing/utilities/height.html">尺寸 / 高</a></li></ul><p>如需了解，请参考对应的文档。</p><h2 id="自定义间距" tabindex="-1">自定义间距 <a class="header-anchor" href="#自定义间距" aria-label="Permalink to &quot;自定义间距&quot;">​</a></h2><p>可以通过定制主题来修改间距设置，具体参见 <a href="/zui/3/guide/theme/">主题</a> 文档。</p>',8),T=JSON.parse('{"title":"间距","description":"","frontmatter":{},"headers":[],"relativePath":"guide/config/base/spacing.md","filePath":"guide/config/base/spacing.md","lastUpdated":null}'),k={name:"guide/config/base/spacing.md"},N=Object.assign(k,{setup(z){const c=["0","px","0.5","1","1.5","2","2.5","3","3.5","4","5","6","7","8","9","10","11","12","14","16","20","24","28","32","36","40","44","48","52","56","60","64","72","80","96"];return(C,P)=>{const d=i("CssPropValue"),n=i("Example");return a(),s("div",null,[g,f,b,o(n,{background:"light-circle",class:"space-y-1"},{default:r(()=>[x,(a(),s(h,null,u(c,t=>e("div",{key:t,class:"gap-4 row"},[e("div",v,_(t),1),o(d,{class:"w-12 text-sm text-center muted",prop:"width",target:`#example-spacing-${t}`},null,8,["target"]),e("div",{class:m(`bg-secondary h-4 w-${t}`),id:`example-spacing-${t}`},null,10,w)])),64))]),_:1}),S])}}});export{T as __pageData,N as default};
3/assets/guide_config_base_spacing.md.ed3e74aa.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{H as i,o as a,c as s,J as o,E as r,C as e,a as l,V as p,F as h,R as u,t as _,n as m}from"./chunks/framework.42439fff.js";const g=e("h1",{id:"间距",tabindex:"-1"},[l("间距 "),e("a",{class:"header-anchor",href:"#间距","aria-label":'Permalink to "间距"'},"​")],-1),f=e("h2",{id:"间距配置",tabindex:"-1"},[l("间距配置 "),e("a",{class:"header-anchor",href:"#间距配置","aria-label":'Permalink to "间距配置"'},"​")],-1),b=e("p",null,"为了方便实现风格一致的交互界面，ZUI 预置了间距设置。下面为默认的间距配置：",-1),x=e("div",{class:"gap-4 mb-2 row"},[e("div",{class:"w-12 font-bold muted"},"名称"),e("div",{class:"w-12 font-bold muted"},"实际值"),e("div",{class:"w-12 font-bold muted"},"预览")],-1),v={class:"w-12 font-mono font-bold"},w=["id"],S=p("",8),T=JSON.parse('{"title":"间距","description":"","frontmatter":{},"headers":[],"relativePath":"guide/config/base/spacing.md","filePath":"guide/config/base/spacing.md","lastUpdated":null}'),k={name:"guide/config/base/spacing.md"},N=Object.assign(k,{setup(z){const c=["0","px","0.5","1","1.5","2","2.5","3","3.5","4","5","6","7","8","9","10","11","12","14","16","20","24","28","32","36","40","44","48","52","56","60","64","72","80","96"];return(C,P)=>{const d=i("CssPropValue"),n=i("Example");return a(),s("div",null,[g,f,b,o(n,{background:"light-circle",class:"space-y-1"},{default:r(()=>[x,(a(),s(h,null,u(c,t=>e("div",{key:t,class:"gap-4 row"},[e("div",v,_(t),1),o(d,{class:"w-12 text-sm text-center muted",prop:"width",target:`#example-spacing-${t}`},null,8,["target"]),e("div",{class:m(`bg-secondary h-4 w-${t}`),id:`example-spacing-${t}`},null,10,w)])),64))]),_:1}),S])}}});export{T as __pageData,N as default};
3/assets/guide_customize_build.md.5b87036e.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as e,o as a,c as s,V as t}from"./chunks/framework.42439fff.js";const m=JSON.parse('{"title":"打包","description":"","frontmatter":{},"headers":[],"relativePath":"guide/customize/build.md","filePath":"guide/customize/build.md","lastUpdated":null}'),o={name:"guide/customize/build.md"},n=t('<h1 id="打包" tabindex="-1">打包 <a class="header-anchor" href="#打包" aria-label="Permalink to &quot;打包&quot;">​</a></h1><p>执行如下命令进行打包操作：</p><div class="language-sh"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#B392F0;">pnpm</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">build</span></span></code></pre></div>',3),l=[n];function c(i,d,p,r,_,u){return a(),s("div",null,l)}const b=e(o,[["render",c]]);export{m as __pageData,b as default};
3/assets/guide_customize_build.md.5b87036e.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as e,o as a,c as s,V as t}from"./chunks/framework.42439fff.js";const m=JSON.parse('{"title":"打包","description":"","frontmatter":{},"headers":[],"relativePath":"guide/customize/build.md","filePath":"guide/customize/build.md","lastUpdated":null}'),o={name:"guide/customize/build.md"},n=t("",3),l=[n];function c(i,d,p,r,_,u){return a(),s("div",null,l)}const b=e(o,[["render",c]]);export{m as __pageData,b as default};
3/assets/guide_customize_dev.md.9571e07a.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as e,o as a,c as t,V as o}from"./chunks/framework.42439fff.js";const m=JSON.parse('{"title":"开发","description":"","frontmatter":{},"headers":[],"relativePath":"guide/customize/dev.md","filePath":"guide/customize/dev.md","lastUpdated":null}'),s={name:"guide/customize/dev.md"},c=o('<h1 id="开发" tabindex="-1">开发 <a class="header-anchor" href="#开发" aria-label="Permalink to &quot;开发&quot;">​</a></h1><h2 id="开发服务" tabindex="-1">开发服务 <a class="header-anchor" href="#开发服务" aria-label="Permalink to &quot;开发服务&quot;">​</a></h2><p>执行如下命令启动开发服务：</p><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#B392F0;">$</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">pnpm</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">dev</span></span></code></pre></div><p>开发服务器启动后，默认情况下可以通过网址：<code>http://localhost:5173/</code> 来访问开发服务页面。通过页面上的组件导航，可以访问对应的组件开发页面。也可以将组件名附加到网址后面，直接访问对应的组件页面，例如 <code>http://localhost:5173/button/</code>。</p><p>在开发服务页面上支持热更新，当开发文件变更后会自动反馈到开发服务页面上。</p><h2 id="对组件进行开发调试" tabindex="-1">对组件进行开发调试 <a class="header-anchor" href="#对组件进行开发调试" aria-label="Permalink to &quot;对组件进行开发调试&quot;">​</a></h2><h3 id="组件开发目录" tabindex="-1">组件开发目录 <a class="header-anchor" href="#组件开发目录" aria-label="Permalink to &quot;组件开发目录&quot;">​</a></h3><p>ZUI3 每个组件在一个独立的目录内，拥有自己的 <code>package.json</code> 文件，使得组件可以独立作为 npm 包来使用，也可以单独作为子项目进行开发维护。</p><div class="tip custom-block"><p class="custom-block-title">提示</p><p>通常组件通过在 <code>package.json</code> 文件中设置属性 <code>private: true</code> 来让包仅在 zui3 <a href="https://pnpm.io/zh/workspaces" target="_blank" rel="noreferrer">工作空间</a>内可用，但组件仍然拥有作为公开的包发布到 npm 上进行独立使用。</p></div>',10),l=[c];function n(r,p,d,i,h,u){return a(),t("div",null,l)}const b=e(s,[["render",n]]);export{m as __pageData,b as default};
3/assets/guide_customize_dev.md.9571e07a.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as e,o as a,c as t,V as o}from"./chunks/framework.42439fff.js";const m=JSON.parse('{"title":"开发","description":"","frontmatter":{},"headers":[],"relativePath":"guide/customize/dev.md","filePath":"guide/customize/dev.md","lastUpdated":null}'),s={name:"guide/customize/dev.md"},c=o("",10),l=[c];function n(r,p,d,i,h,u){return a(),t("div",null,l)}const b=e(s,[["render",n]]);export{m as __pageData,b as default};
3/assets/guide_customize_exts-lib.md.0a3f6e6a.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.42439fff.js";const u=JSON.parse('{"title":"组件库扩展","description":"","frontmatter":{},"headers":[],"relativePath":"guide/customize/exts-lib.md","filePath":"guide/customize/exts-lib.md","lastUpdated":null}'),o={name:"guide/customize/exts-lib.md"},e=n(`<h1 id="组件库扩展" tabindex="-1">组件库扩展 <a class="header-anchor" href="#组件库扩展" aria-label="Permalink to &quot;组件库扩展&quot;">​</a></h1><p>ZUI3 组件库内置了大量组件，并支持集中开发、调试和打包，其中打包还支持只选择指定的组件进行个性化定制，同步输出组件库文档。但当需求扩展到组件库之外时，就需要用到扩展组件库了。ZUI3 支持扩展组件库模式，可以从其他位置引入一个或多个组件库目录，享受集中开发、调试和打包。下面介绍扩展组件库的使用方法。</p><h2 id="定义扩展库" tabindex="-1">定义扩展库 <a class="header-anchor" href="#定义扩展库" aria-label="Permalink to &quot;定义扩展库&quot;">​</a></h2><p>扩展组件库可以来自本地系统的任意位置，只需要提供一个路径，例如：</p><div class="language-txt"><button title="Copy Code" class="copy"></button><span class="lang">txt</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#e1e4e8;">/Users/TaiJi/Projects/zui3_exts/lib/</span></span></code></pre></div><p>扩展组件库的目录结构与 ZUI3 <code>/lib/</code> 下的目录结构一致，下面的每个子目录为一个独立的组件，详细定义参考 <a href="/zui/3/guide/customize/dev.html">开发文档</a>。</p><h2 id="添加扩展库" tabindex="-1">添加扩展库 <a class="header-anchor" href="#添加扩展库" aria-label="Permalink to &quot;添加扩展库&quot;">​</a></h2><p>在 <code>zui3</code> 项目根目录执行：</p><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#B392F0;">$</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">pnpm</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">extend-lib</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">--</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">&lt;</span><span style="color:#9ECBFF;">ext_lib_pat</span><span style="color:#E1E4E8;">h</span><span style="color:#F97583;">&gt;</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">&lt;</span><span style="color:#9ECBFF;">lib_nam</span><span style="color:#E1E4E8;">e</span><span style="color:#F97583;">&gt;</span></span></code></pre></div><p>其中参数 <code>ext_lib_path</code> 为扩展组件库路径，<code>&lt;lib_name&gt;</code> 为扩展组件库名称。例如：</p><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#B392F0;">$</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">pnpm</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">extend-lib</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">--</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">/Users/TaiJi/Projects/zui3_exts/lib/</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">zentao</span></span></code></pre></div><p>执行上述命令之后，会将组件库目录文件拷贝到 <code>zui3/lib_name</code> 目录下，同时会在 <code>zui3/exts/libs.json</code> 文件中记录此扩展库的名称和路径。</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#E1E4E8;">{</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">&quot;zentao&quot;</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">&quot;/Users/TaiJi/Projects/zui3_exts/lib/*&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre></div><p>实际上，你也可以通过自己编辑这个文件来添加扩展库。</p><h2 id="启动开发服务" tabindex="-1">启动开发服务 <a class="header-anchor" href="#启动开发服务" aria-label="Permalink to &quot;启动开发服务&quot;">​</a></h2><p>要在开发模式中包含对扩展组件库的开发调试，只需要执行如下命令代替 <code>pnpm dev</code> 命令即可：</p><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#B392F0;">$</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">pnpm</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">dev:exts</span></span></code></pre></div><p>当添加了多个扩展库时，上述命令会包含所有扩展库，有时只需要包含特定的扩展库，只需要自定义 <code>--lib</code> 参数即可：</p><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#B392F0;">$</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">pnpm</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">dev:exts</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">--lib=zui,zentao</span></span></code></pre></div><h2 id="启动文档服务器" tabindex="-1">启动文档服务器 <a class="header-anchor" href="#启动文档服务器" aria-label="Permalink to &quot;启动文档服务器&quot;">​</a></h2><p>要在文档网站服务模式中包含对扩展组件库的文档支持，只需要如下命令代替 <code>pnpm docs:dev</code> 命令即可：</p><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#B392F0;">$</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">pnpm</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">docs:dev:exts</span></span></code></pre></div><h2 id="打包" tabindex="-1">打包 <a class="header-anchor" href="#打包" aria-label="Permalink to &quot;打包&quot;">​</a></h2><p>打包时如果需要将扩展库中的组件也进行打包，则需要添加 <code>--exts</code> 参数，然后就可以在需要打包的组件清单中指定扩展库中的组件名称：</p><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#B392F0;">$</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">pnpm</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">build</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">--</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">label</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">@zentao/status-label</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">--exts</span></span></code></pre></div><p>如果不指定名称，则默认打包仍然只打包内置组件库的组件，例如下面的命令仍然相当于 <code>pnpm build</code>：</p><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#B392F0;">$</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">pnpm</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">build</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">--</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">--exts</span></span></code></pre></div><p>如果需要将所有内置组件库和扩展库中的所有组件一并打包，可以使用如下命令：</p><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#B392F0;">$</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">pnpm</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">build</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">--</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">zui+exts</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">--exts</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">--name=zentao</span></span></code></pre></div><p>当添加了多个扩展库时，上述命令会包含所有扩展库，有时只需要包含特定的扩展库，只需要自定义 <code>--exts</code> 参数即可：</p><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#B392F0;">$</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">pnpm</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">build</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">--</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">zui+exts</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">--exts=zui,zentao</span></span></code></pre></div>`,31),p=[e];function t(c,r,i,E,d,y){return a(),l("div",null,p)}const h=s(o,[["render",t]]);export{u as __pageData,h as default};
3/assets/guide_customize_exts-lib.md.0a3f6e6a.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.42439fff.js";const u=JSON.parse('{"title":"组件库扩展","description":"","frontmatter":{},"headers":[],"relativePath":"guide/customize/exts-lib.md","filePath":"guide/customize/exts-lib.md","lastUpdated":null}'),o={name:"guide/customize/exts-lib.md"},e=n("",31),p=[e];function t(c,r,i,E,d,y){return a(),l("div",null,p)}const h=s(o,[["render",t]]);export{u as __pageData,h as default};
3/assets/guide_index.md.a2d61946.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as a,o as t,c as d,C as e,a as n}from"./chunks/framework.42439fff.js";const u=JSON.parse('{"title":"指引","description":"","frontmatter":{},"headers":[],"relativePath":"guide/index.md","filePath":"guide/index.md","lastUpdated":null}'),s={name:"guide/index.md"},o=e("h1",{id:"指引",tabindex:"-1"},[n("指引 "),e("a",{class:"header-anchor",href:"#指引","aria-label":'Permalink to "指引"'},"​")],-1),r=[o];function i(c,l,_,p,h,m){return t(),d("div",null,r)}const x=a(s,[["render",i]]);export{u as __pageData,x as default};
3/assets/guide_index.md.a2d61946.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as a,o as t,c as d,C as e,a as n}from"./chunks/framework.42439fff.js";const u=JSON.parse('{"title":"指引","description":"","frontmatter":{},"headers":[],"relativePath":"guide/index.md","filePath":"guide/index.md","lastUpdated":null}'),s={name:"guide/index.md"},o=e("h1",{id:"指引",tabindex:"-1"},[n("指引 "),e("a",{class:"header-anchor",href:"#指引","aria-label":'Permalink to "指引"'},"​")],-1),r=[o];function i(c,l,_,p,h,m){return t(),d("div",null,r)}const x=a(s,[["render",i]]);export{u as __pageData,x as default};
3/assets/guide_start_index.md.ee98852f.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as e,o as a,c as i,V as l}from"./chunks/framework.42439fff.js";const m=JSON.parse('{"title":"快速开始","description":"","frontmatter":{},"headers":[],"relativePath":"guide/start/index.md","filePath":"guide/start/index.md","lastUpdated":null}'),o={name:"guide/start/index.md"},t=l('<h1 id="快速开始" tabindex="-1">快速开始 <a class="header-anchor" href="#快速开始" aria-label="Permalink to &quot;快速开始&quot;">​</a></h1><h2 id="兼容性" tabindex="-1">兼容性 <a class="header-anchor" href="#兼容性" aria-label="Permalink to &quot;兼容性&quot;">​</a></h2><h3 id="支持的浏览器" tabindex="-1">支持的浏览器 <a class="header-anchor" href="#支持的浏览器" aria-label="Permalink to &quot;支持的浏览器&quot;">​</a></h3><ul><li>Chrome：49+</li><li>Firefox：45+</li><li>Safari：10+</li><li>Edge：13+</li><li>Chrome for Android：112+</li><li>iOS Safari：10+</li></ul><h3 id="关键特性" tabindex="-1">关键特性 <a class="header-anchor" href="#关键特性" aria-label="Permalink to &quot;关键特性&quot;">​</a></h3><h4 id="js" tabindex="-1">JS <a class="header-anchor" href="#js" aria-label="Permalink to &quot;JS&quot;">​</a></h4><ul><li>✅ <code>let</code>、<code>const</code></li><li>✅ 箭头函数</li><li>✅ 模版字符串</li><li>✅ <code>class</code></li><li>✅ <code>symbol</code></li><li>✅ <code>Set</code>、<code>Map</code></li><li>✅ <code>Promise</code></li><li>✅ 扩展运算符 <code>...</code></li><li>✅ <code>Object.assign</code>、<code>Object.keys</code></li><li>🚫 <code>Object.entries</code>、<code>Object.values</code></li><li>🚫 <code>async</code>、<code>await</code></li><li>🚫 解构赋值</li></ul><h4 id="css" tabindex="-1">CSS <a class="header-anchor" href="#css" aria-label="Permalink to &quot;CSS&quot;">​</a></h4><ul><li>✅ <code>var()</code></li><li>✅ <code>calc()</code></li><li>🚫 <code>vw</code>、<code>vh</code></li></ul><h3 id="第三方依赖" tabindex="-1">第三方依赖 <a class="header-anchor" href="#第三方依赖" aria-label="Permalink to &quot;第三方依赖&quot;">​</a></h3><ul><li><a href="https://floating-ui.com/" target="_blank" rel="noreferrer">floating UI</a></li><li><a href="https://preactjs.com/" target="_blank" rel="noreferrer">preact</a></li></ul><p>如果把握不准对照支持的浏览器参考 <a href="https://caniuse.com/" target="_blank" rel="noreferrer">https://caniuse.com/</a> 。</p>',12),r=[t];function c(d,s,n,h,u,_){return a(),i("div",null,r)}const b=e(o,[["render",c]]);export{m as __pageData,b as default};
3/assets/guide_start_index.md.ee98852f.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as e,o as a,c as i,V as l}from"./chunks/framework.42439fff.js";const m=JSON.parse('{"title":"快速开始","description":"","frontmatter":{},"headers":[],"relativePath":"guide/start/index.md","filePath":"guide/start/index.md","lastUpdated":null}'),o={name:"guide/start/index.md"},t=l("",12),r=[t];function c(d,s,n,h,u,_){return a(),i("div",null,r)}const b=e(o,[["render",c]]);export{m as __pageData,b as default};
3/assets/index.md.99dcc343.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as t,o as e,c as a}from"./chunks/framework.42439fff.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"ZUI3","text":"开箱即用的组合式前端 UI 框架","tagline":"100+ 组件","actions":[{"theme":"brand","text":"快速开始","link":"/guide/start/"},{"theme":"alt","text":"GitHub","link":"https://github.com/easysoft/zui"}]},"features":[{"icon":"⚡️","title":"开箱即用，按需加载","details":"采用基础 + 组件库模式，按需使用"},{"icon":"💎","title":"100+ 组件","details":"丰富组件库，实现你的创意"},{"icon":"🛠️","title":"丰富主题，灵活定制","details":"深色模式，自定义主题，定制打包"}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":null}'),i={name:"index.md"};function n(s,o,d,l,r,c){return e(),a("div")}const p=t(i,[["render",n]]);export{m as __pageData,p as default};
3/assets/index.md.99dcc343.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as t,o as e,c as a}from"./chunks/framework.42439fff.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"ZUI3","text":"开箱即用的组合式前端 UI 框架","tagline":"100+ 组件","actions":[{"theme":"brand","text":"快速开始","link":"/guide/start/"},{"theme":"alt","text":"GitHub","link":"https://github.com/easysoft/zui"}]},"features":[{"icon":"⚡️","title":"开箱即用，按需加载","details":"采用基础 + 组件库模式，按需使用"},{"icon":"💎","title":"100+ 组件","details":"丰富组件库，实现你的创意"},{"icon":"🛠️","title":"丰富主题，灵活定制","details":"深色模式，自定义主题，定制打包"}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":null}'),i={name:"index.md"};function n(s,o,d,l,r,c){return e(),a("div")}const p=t(i,[["render",n]]);export{m as __pageData,p as default};
3/assets/lib_components_action-menu_index.md.21dadaf3.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as c,H as r,o as i,c as E,J as l,E as e,C as a,a as n,V as p}from"./chunks/framework.42439fff.js";const d={mounted(){onZUIReady(()=>{const t=new zui.ActionMenu("#actionMenu",{className:"row gap-3 items-center",items:[{title:"复制",icon:"icon-copy"},{title:"粘贴",icon:"icon-paste"},{text:"剪切"},{type:"heading",title:"更多操作"},{title:"导入",icon:"icon-upload-alt"},{title:"导出",icon:"icon-download-alt"},{title:"保存",icon:"icon-save",onClick:s=>console.log("> menuItem.clicked",s)}],itemProps:{item:{className:"flex-inline row items-center gap-2 state"}},onClickItem:s=>{console.log("> actionMenu.onClickItem",s)}});console.log("> actionMenu",t),new zui.ActionMenu("#navExample",{name:"nav",items:[{text:"首页",icon:"icon-home"},{text:"动态"},{text:"论坛"},{type:"divider"},{text:"博客",icon:"icon-rss"},{text:"关注我们",icon:"icon-group"}],onClickItem:s=>{console.log("> nav.onClickItem",s)}}),new zui.ActionMenuNested("#nestedActionMenu",{nestedTrigger:"click",items:[{type:"heading",text:"更多操作"},{text:"导入",icon:"icon-upload-alt"},{text:"导出",icon:"icon-download-alt"},{text:"保存",icon:"icon-save",onClick:s=>console.log("> menuItem.clicked",s),items:[{text:"保存到云端"},{text:"下载到本地",items:[{text:"下载为 PDF"},{text:"下载为 Excel"}]}]}],onClickItem:s=>{console.log("> menu.onClickItem",s)}}),new zui.ActionMenu("#actionMenuItemRender",{className:"row gap-3 items-center",items:[{title:"复制",icon:"icon-copy"},{title:"粘贴",icon:"icon-paste"},{text:"剪切"}],itemRender:s=>{s.text="itemRender"}})})}},I=JSON.parse('{"title":"操作菜单","description":"","frontmatter":{},"headers":[],"relativePath":"lib/components/action-menu/index.md","filePath":"lib/components/action-menu/index.md","lastUpdated":null}'),y=a("h1",{id:"操作菜单",tabindex:"-1"},[n("操作菜单 "),a("a",{class:"header-anchor",href:"#操作菜单","aria-label":'Permalink to "操作菜单"'},"​")],-1),h=a("p",null,"操作菜单是一个不包含具体外观的通用组件，需要通过 JS 动态调用，通常用于构建更复杂的组件，例如菜单、工具栏、列表等。",-1),u=a("h2",{id:"示例",tabindex:"-1"},[n("示例 "),a("a",{class:"header-anchor",href:"#示例","aria-label":'Permalink to "示例"'},"​")],-1),m=a("p",null,[n("通过构造一个 "),a("code",null,"ActionMenu"),n(" 实例，在一个空的 "),a("code",null,"<div>"),n(" 元素上创建一个菜单。")],-1),F=a("div",{id:"actionMenu"},null,-1),b=p("",21),g=a("div",{id:"nestedActionMenu"},null,-1),C=p("",4),k=a("div",{id:"navExample"},null,-1),B=p("",31),q=a("div",{id:"actionMenuItemRender"},null,-1),x=p("",123);function f(t,s,P,_,v,A){const o=r("Example");return i(),E("div",null,[y,h,u,m,l(o,null,{default:e(()=>[F]),_:1}),b,l(o,{class:"flex gap-4"},{default:e(()=>[g]),_:1}),C,l(o,null,{default:e(()=>[k]),_:1}),B,l(o,null,{default:e(()=>[q]),_:1}),x])}const T=c(d,[["render",f]]);export{I as __pageData,T as default};
3/assets/lib_components_alert_index.md.fd00ec66.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_alert_index.md.fd00ec66.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as p,H as E,o as e,c,J as n,E as o,C as s,a,V as t}from"./chunks/framework.42439fff.js";const Cs=JSON.parse('{"title":"消息框","description":"","frontmatter":{},"headers":[],"relativePath":"lib/components/alert/index.md","filePath":"lib/components/alert/index.md","lastUpdated":null}'),r={name:"lib/components/alert/index.md"},y=s("h1",{id:"消息框",tabindex:"-1"},[a("消息框 "),s("a",{class:"header-anchor",href:"#消息框","aria-label":'Permalink to "消息框"'},"​")],-1),i=s("p",null,"消息框能够轻松展示一些需要引起用户注意的内容。",-1),d=s("h2",{id:"使用方法",tabindex:"-1"},[a("使用方法 "),s("a",{class:"header-anchor",href:"#使用方法","aria-label":'Permalink to "使用方法"'},"​")],-1),g=s("p",null,[a("使用 "),s("code",null,".alert"),a(" 类来获得消息框的外观和交互体验。")],-1),u=s("div",{class:"alert"},"Hi! 这条消息可能需要你注意。",-1),_=s("div",{class:"alert success"},[s("i",{class:"icon icon-check-circle alert-icon"}),a(" 一切已准备就绪。 ")],-1),F=s("div",{class:"alert warning-pale flex items-center"},[s("i",{class:"icon icon-warning-sign icon-2x alert-icon"}),s("div",null,[s("h4",{class:"font-bold text-lg"},"注意！"),s("p",null,"可能存在潜在风险。")])],-1),h=t("",2),v=s("div",{class:"alert success"},[s("i",{class:"icon icon-check-circle icon-2x alert-icon"}),s("div",null,[s("h4",{class:"alert-heading"},"太棒了！"),s("p",{class:"alert-content"},"一切已准备就绪。")])],-1),D=t("",4),q=s("div",{class:"alert primary"},"准备开始",-1),B=s("div",{class:"alert secondary"},"请点击下一步",-1),C=s("div",{class:"alert success"},"太好了！一切已准备就绪。",-1),b=s("div",{class:"alert warning"},"注意！看起来遇到一些问题。",-1),m=s("div",{class:"alert danger"},"确实遇到了问题，请立即处理吧。",-1),f=s("div",{class:"alert important"},"不要忘了勾选协议哦！",-1),x=s("div",{class:"alert special"},"你可能还需要深入了解ZUI3。",-1),T=s("div",{class:"alert white"},"ZUI3，开箱即用的组合式前端 UI 框架。",-1),k=s("div",{class:"alert lighter"},"采用基础 + 组件库模式，按需使用。",-1),S=s("div",{class:"alert light"},"丰富组件库，实现你的创意。",-1),I=s("div",{class:"alert gray"},"深色模式，自定义主题，定制打包。",-1),P=s("div",{class:"alert dark"},"ZUI3使用组件库来管理组件。",-1),w=s("div",{class:"alert darker"},"库中的每个组件可以被独立打包和使用。",-1),A=s("div",{class:"alert black"},"组件库采用 pnpm 的工作空间实现。",-1),V=s("div",{class:"alert inverse"},"每个组件作为一个单独的包进行管理。",-1),U=s("div",{class:"alert surface"},"组件名称只能以小写字母开头。",-1),Z=s("div",{class:"alert canvas"},"使用起来更方便，更快捷。",-1),N=s("div",{class:"alert ghost"},"欢迎使用ZUI3。",-1),R=t("",1),$=s("div",{class:"alert primary-pale"},"准备开始",-1),H=s("div",{class:"alert secondary-pale"},"请点击下一步",-1),J=s("div",{class:"alert success-pale bd bd-success"},"太好了！一切已准备就绪。",-1),z=s("div",{class:"alert warning-pale bd bd-warning"},"注意！看起来遇到一些问题。",-1),O=s("div",{class:"alert danger-outline"},"确实遇到了问题，请立即处理吧。",-1),j=s("div",{class:"alert important-outline"},"不要忘了勾选协议哦！",-1),G=s("div",{class:"alert text-special"},"你可能还需要深入了解ZUI3。",-1),K=s("div",{class:"alert text-dark"},"欢迎使用ZUI3。",-1),L=t("",2),M=s("div",{class:"alert primary rounded-none"},"准备开始。",-1),Q=s("div",{class:"alert secondary rounded-sm"},"请点击下一步。",-1),W=s("div",{class:"alert success rounded"},"一切已准备就绪。",-1),X=s("div",{class:"alert warning rounded-md"},"注意！看起来遇到一些问题。",-1),Y=s("div",{class:"alert danger rounded-lg"},"确实遇到了问题，请立即处理吧。",-1),ss=s("div",{class:"alert light rounded-xl"},"你可能需要了解一些内容。",-1),as=s("div",{class:"alert important circle"},"欢迎使用ZUI3。",-1),ls=t("",2),ns=s("div",{class:"alert success"},[s("i",{class:"icon icon-check-circle alert-icon"}),a(" 一切已准备就绪。 ")],-1),os=s("div",{class:"alert danger"},[s("i",{class:"icon icon-remove-sign alert-icon"}),a(" 出现了一些错误。 ")],-1),ts=s("div",{class:"alert warning-pale flex items-center"},[s("i",{class:"icon icon-warning-sign icon-2x alert-icon"}),s("div",null,[s("h4",{class:"font-bold text-lg"},"注意！"),s("p",null,"可能存在潜在风险。")])],-1),ps=s("div",{class:"alert light-pale flex items-center"},[s("i",{class:"icon icon-info-sign icon-2x alert-icon"}),s("div",null,[s("h4",{class:"font-bold text-lg"},"提示"),s("p",null,"你可能需要知道一些内容。")])],-1),Es=t("",2),es=s("div",{class:"alert success"},[s("i",{class:"icon icon-check-circle alert-icon"}),a(" 一切已"),s("a",{href:"###",class:"font-bold"},"准备就绪"),a("。 ")],-1),cs=s("div",{class:"alert danger"},[s("i",{class:"icon icon-remove-sign alert-icon"}),a(" 出现了一些"),s("a",{href:"###",class:"font-bold"},"错误"),a("。 ")],-1),rs=s("div",{class:"alert warning-pale"},[s("i",{class:"icon icon-warning-sign alert-icon"}),a(" 注意！可能存在"),s("a",{href:"###",class:"font-bold"},"潜在风险"),a("。 ")],-1),ys=s("div",{class:"alert light-pale"},[s("i",{class:"icon icon-info-sign alert-icon"}),a(" 你可能需要知道"),s("a",{href:"###",class:"font-bold"},"一些内容"),a("。 ")],-1),is=t("",2),ds=s("div",{class:"alert warning-pale"},[s("i",{class:"icon icon-remove-sign alert-icon-close"}),s("p",null,"右上角有关闭按钮")],-1),gs=t("",7);function us(_s,Fs,hs,vs,Ds,qs){const l=E("Example");return e(),c("div",null,[y,i,d,g,n(l,{class:"space-y-4"},{default:o(()=>[u,_,F]),_:1}),h,n(l,null,{default:o(()=>[v]),_:1}),D,n(l,{class:"space-y-4"},{default:o(()=>[q,B,C,b,m,f,x,T,k,S,I,P,w,A,V,U,Z,N]),_:1}),R,n(l,{class:"space-y-4"},{default:o(()=>[$,H,J,z,O,j,G,K]),_:1}),L,n(l,{class:"space-y-4"},{default:o(()=>[M,Q,W,X,Y,ss,as]),_:1}),ls,n(l,{class:"space-y-4"},{default:o(()=>[ns,os,ts,ps]),_:1}),Es,n(l,{class:"space-y-4"},{default:o(()=>[es,cs,rs,ys]),_:1}),is,n(l,null,{default:o(()=>[ds]),_:1}),gs])}const bs=p(r,[["render",us]]);export{Cs as __pageData,bs as default};
3/assets/lib_components_avatar-group_index.md.b6c09ee5.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as g}from"./chunks/avatar.dd67262f.js";import{_ as a,a as n,b as o,c as l,d as r,e as y,f as e}from"./chunks/avatar-7.ca25d44e.js";import{_ as d,H as F,o as u,c as q,J as E,E as c,V as p,C as s}from"./chunks/framework.42439fff.js";const i="/zui/3/assets/avatar/avatar-8.png",B="/zui/3/assets/avatar/avatar-9.png",v="/zui/3/assets/avatar/avatar-10.png",L=JSON.parse('{"title":"头像组","description":"","frontmatter":{},"headers":[],"relativePath":"lib/components/avatar-group/index.md","filePath":"lib/components/avatar-group/index.md","lastUpdated":null}'),D={name:"lib/components/avatar-group/index.md"},_=p("",4),m=s("div",{class:"avatar-group"},[s("div",{class:"avatar circle"},[s("img",{src:g})]),s("div",{class:"avatar circle"},[s("img",{src:a})]),s("div",{class:"avatar circle"},[s("img",{src:n})]),s("div",{class:"avatar circle"},[s("img",{src:o})]),s("div",{class:"avatar circle"},[s("img",{src:l})]),s("div",{class:"avatar circle gray-pale"},"+10")],-1),C=p("",3),h=s("div",{class:"avatar-group size-xs"},[s("div",{class:"avatar size-xs circle"},[s("img",{src:a})]),s("div",{class:"avatar size-xs circle"},[s("img",{src:n})]),s("div",{class:"avatar size-xs circle"},[s("img",{src:o})])],-1),x=s("div",{class:"avatar-group size-sm"},[s("div",{class:"avatar size-sm circle"},[s("img",{src:l})]),s("div",{class:"avatar size-sm circle"},[s("img",{src:r})]),s("div",{class:"avatar size-sm circle"},[s("img",{src:y})])],-1),z=s("div",{class:"avatar-group"},[s("div",{class:"avatar circle"},[s("img",{src:e})]),s("div",{class:"avatar circle"},[s("img",{src:i})]),s("div",{class:"avatar circle"},[s("img",{src:B})])],-1),b=s("div",{class:"avatar-group size-lg"},[s("div",{class:"avatar size-lg circle"},[s("img",{src:v})]),s("div",{class:"avatar size-lg circle"},[s("img",{src:a})]),s("div",{class:"avatar size-lg circle"},[s("img",{src:n})])],-1),f=s("div",{class:"avatar-group size-xl"},[s("div",{class:"avatar size-xl circle"},[s("img",{src:o})]),s("div",{class:"avatar size-xl circle"},[s("img",{src:l})]),s("div",{class:"avatar size-xl circle"},[s("img",{src:r})])],-1),T=p("",3),S=s("div",{class:"avatar-group gap-0"},[s("div",{class:"avatar circle"},[s("img",{src:a})]),s("div",{class:"avatar circle"},[s("img",{src:n})]),s("div",{class:"avatar circle gray"},"0")],-1),P=s("div",{class:"avatar-group gap-1"},[s("div",{class:"avatar circle"},[s("img",{src:l})]),s("div",{class:"avatar circle"},[s("img",{src:r})]),s("div",{class:"avatar circle gray"},"1")],-1),k=s("div",{class:"avatar-group gap-2"},[s("div",{class:"avatar circle"},[s("img",{src:e})]),s("div",{class:"avatar circle"},[s("img",{src:i})]),s("div",{class:"avatar circle gray"},"2")],-1),A=s("div",{class:"avatar-group"},[s("div",{class:"avatar circle"},[s("img",{src:v})]),s("div",{class:"avatar circle"},[s("img",{src:a})]),s("div",{class:"avatar circle gray"},"2.5")],-1),V=s("div",{class:"avatar-group gap-3"},[s("div",{class:"avatar circle"},[s("img",{src:o})]),s("div",{class:"avatar circle"},[s("img",{src:l})]),s("div",{class:"avatar circle gray"},"3")],-1),I=s("div",{class:"avatar-group gap-3.5"},[s("div",{class:"avatar circle"},[s("img",{src:y})]),s("div",{class:"avatar circle"},[s("img",{src:e})]),s("div",{class:"avatar circle gray"},"3.5")],-1),N=p("",4);function w(R,$,J,H,O,U){const t=F("Example");return u(),q("div",null,[_,E(t,{class:"flex gap-4 flex-wrap items-end"},{default:c(()=>[m]),_:1}),C,E(t,{class:"flex gap-4 flex-wrap items-end"},{default:c(()=>[h,x,z,b,f]),_:1}),T,E(t,{class:"flex gap-4 flex-wrap items-end"},{default:c(()=>[S,P,k,A,V,I]),_:1}),N])}const M=d(D,[["render",w]]);export{L as __pageData,M as default};
3/assets/lib_components_avatar_index.md.43cd09dd.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as y}from"./chunks/avatar.dd67262f.js";import{_ as p,a as e,b as r,c as E,d as c,e as i,f as d}from"./chunks/avatar-7.ca25d44e.js";import{_ as v,H as u,o as _,c as g,J as t,E as o,C as s,a,V as n}from"./chunks/framework.42439fff.js";const Y=JSON.parse('{"title":"头像","description":"","frontmatter":{},"headers":[],"relativePath":"lib/components/avatar/index.md","filePath":"lib/components/avatar/index.md","lastUpdated":null}'),h={name:"lib/components/avatar/index.md"},F=s("h1",{id:"头像",tabindex:"-1"},[a("头像 "),s("a",{class:"header-anchor",href:"#头像","aria-label":'Permalink to "头像"'},"​")],-1),m=s("p",null,"头像是用图片、图标或者文字的形式展示用户及具有特殊标识的其他对象。",-1),q=s("h2",{id:"使用方法",tabindex:"-1"},[a("使用方法 "),s("a",{class:"header-anchor",href:"#使用方法","aria-label":'Permalink to "使用方法"'},"​")],-1),B=s("p",null,[a("使用一个 "),s("code",null,"<div>"),a(" 元素并添加类 "),s("code",null,".avatar"),a("，然后将作为图像的图片、文字或图标放置在此元素内。")],-1),C=s("div",{class:"avatar"},[s("img",{src:y})],-1),D=s("div",{class:"avatar"},[s("i",{class:"icon icon-user"})],-1),x=s("div",{class:"avatar"},"Z",-1),b=n(`<div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;avatar&quot;</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">img</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/assets/avatar/avatar.png&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;avatar&quot;</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">i</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;icon icon-user&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">i</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;avatar&quot;</span><span style="color:#E1E4E8;">&gt;Z&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">提示</p><p>当使用文字作为头像时，建议文字数目不要超过 2 个，如果需要显示更多文字进行个性化排版，推荐使用 JavaScript 增强的头像插件。</p></div><h2 id="头像形状" tabindex="-1">头像形状 <a class="header-anchor" href="#头像形状" aria-label="Permalink to &quot;头像形状&quot;">​</a></h2><p>搭配 CSS 工具类 <code>rounded-*</code> 为头像应用不同的圆角样式。</p>`,4),f=s("div",{class:"rounded-none avatar"},[s("img",{src:p})],-1),S=s("div",{class:"rounded-xs avatar"},[s("img",{src:e})],-1),T=s("div",{class:"rounded-sm avatar"},[s("img",{src:r})],-1),k=s("div",{class:"rounded avatar"},[s("img",{src:E})],-1),P=s("div",{class:"rounded-lg avatar"},[s("img",{src:c})],-1),z=s("div",{class:"rounded-xl avatar"},[s("img",{src:i})],-1),V=s("div",{class:"rounded-full avatar"},[s("img",{src:d})],-1),A=n(`<div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;rounded-none avatar&quot;</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">img</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/assets/avatar/avatar-1.png&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;rounded-xs avatar&quot;</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">img</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/assets/avatar/avatar-2.png&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;rounded-sm avatar&quot;</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">img</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/assets/avatar/avatar-3.png&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;rounded avatar&quot;</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">img</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/assets/avatar/avatar-4.png&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;rounded-lg avatar&quot;</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">img</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/assets/avatar/avatar-5.png&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;rounded-xl avatar&quot;</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">img</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/assets/avatar/avatar-6.png&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;rounded-full avatar&quot;</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">img</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/assets/avatar/avatar-7.png&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="外观类型" tabindex="-1">外观类型 <a class="header-anchor" href="#外观类型" aria-label="Permalink to &quot;外观类型&quot;">​</a></h2><p>当使用文字或图标作为头像时，配合使用<a href="/zui/3/utilities/">CSS 工具类</a>来实现不同头像的外观。下面展示各种工具类的外观效果。</p>`,3),Z=s("div",{class:"avatar primary"},"Z",-1),N=s("div",{class:"avatar primary-pale"},"Z",-1),I=s("div",{class:"avatar primary-outline"},"Z",-1),w=s("div",{class:"avatar black"},"Z",-1),R=n(`<div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;avatar primary&quot;</span><span style="color:#E1E4E8;">&gt;Z&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;avatar primary-pale&quot;</span><span style="color:#E1E4E8;">&gt;Z&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;avatar primary-outline&quot;</span><span style="color:#E1E4E8;">&gt;Z&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;avatar black&quot;</span><span style="color:#E1E4E8;">&gt;Z&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="尺寸" tabindex="-1">尺寸 <a class="header-anchor" href="#尺寸" aria-label="Permalink to &quot;尺寸&quot;">​</a></h2><p>除了默认大小，还提供了额外的 4 种预设尺寸。</p>`,3),$=s("div",{class:"flex flex-wrap items-end gap-4"},[s("div",{class:"avatar size-xs"},[s("img",{src:p})]),s("div",{class:"avatar size-sm"},[s("img",{src:e})]),s("div",{class:"avatar"},[s("img",{src:r})]),s("div",{class:"avatar size-lg"},[s("img",{src:E})]),s("div",{class:"avatar size-xl"},[s("img",{src:c})])],-1),J=s("div",{class:"flex flex-wrap items-end gap-4"},[s("div",{class:"avatar size-xs"},"X"),s("div",{class:"avatar size-sm"},"S"),s("div",{class:"avatar"},"Z"),s("div",{class:"avatar size-lg"},"LG"),s("div",{class:"avatar size-xl"},"XL")],-1),L=n(`<div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;avatar size-xs&quot;</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">img</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/assets/avatar/avatar-1.png&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;avatar size-sm&quot;</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">img</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/assets/avatar/avatar-2.png&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;avatar&quot;</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">img</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/assets/avatar/avatar-3.png&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;avatar size-lg&quot;</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">img</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/assets/avatar/avatar-4.png&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;avatar size-xl&quot;</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">img</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/assets/avatar/avatar-5.png&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="特殊用法示例" tabindex="-1">特殊用法示例 <a class="header-anchor" href="#特殊用法示例" aria-label="Permalink to &quot;特殊用法示例&quot;">​</a></h2><p>下面演示一些特殊用法。</p><h3 id="右上角未读标签" tabindex="-1">右上角未读标签 <a class="header-anchor" href="#右上角未读标签" aria-label="Permalink to &quot;右上角未读标签&quot;">​</a></h3><p>[待定]</p><h3 id="右下角状态标志" tabindex="-1">右下角状态标志 <a class="header-anchor" href="#右下角状态标志" aria-label="Permalink to &quot;右下角状态标志&quot;">​</a></h3><p>[待定]</p><h2 id="css-类" tabindex="-1">CSS 类 <a class="header-anchor" href="#css-类" aria-label="Permalink to &quot;CSS 类&quot;">​</a></h2><p>头像提供了如下 CSS 类：</p><table><thead><tr><th>类</th><th style="text-align:center;">类型</th><th>作用</th></tr></thead><tbody><tr><td><code>avatar</code></td><td style="text-align:center;">实体类</td><td>元素作为头像组件</td></tr><tr><td><code>size-xs</code></td><td style="text-align:center;">工具类</td><td>头像使用超小号尺寸</td></tr><tr><td><code>size-sm</code></td><td style="text-align:center;">工具类</td><td>头像使用小号尺寸</td></tr><tr><td><code>size-lg</code></td><td style="text-align:center;">工具类</td><td>头像使用大号尺寸</td></tr><tr><td><code>size-xl</code></td><td style="text-align:center;">工具类</td><td>头像使用超大号尺寸</td></tr></tbody></table><h2 id="css-变量" tabindex="-1">CSS 变量 <a class="header-anchor" href="#css-变量" aria-label="Permalink to &quot;CSS 变量&quot;">​</a></h2><p>头像提供了如下 CSS 变量，可进行全局修改：</p><table><thead><tr><th>CSS 变量名</th><th style="text-align:left;">作用</th></tr></thead><tbody><tr><td><code>--avatar-radius</code></td><td style="text-align:left;">头像默认圆角大小</td></tr><tr><td><code>--avatar-bg</code></td><td style="text-align:left;">头像默认背景颜色</td></tr></tbody></table>`,13);function X(G,H,O,U,j,K){const l=u("Example");return _(),g("div",null,[F,m,q,B,t(l,{class:"flex gap-4"},{default:o(()=>[C,D,x]),_:1}),b,t(l,{class:"flex flex-wrap gap-4"},{default:o(()=>[f,S,T,k,P,z,V]),_:1}),A,t(l,{class:"flex flex-wrap gap-4"},{default:o(()=>[Z,N,I,w]),_:1}),R,t(l,{class:"space-y-4"},{default:o(()=>[$,J]),_:1}),L])}const ss=v(h,[["render",X]]);export{Y as __pageData,ss as default};
3/assets/lib_components_avatar_index.md.43cd09dd.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as y}from"./chunks/avatar.dd67262f.js";import{_ as p,a as e,b as r,c as E,d as c,e as i,f as d}from"./chunks/avatar-7.ca25d44e.js";import{_ as v,H as u,o as _,c as g,J as t,E as o,C as s,a,V as n}from"./chunks/framework.42439fff.js";const Y=JSON.parse('{"title":"头像","description":"","frontmatter":{},"headers":[],"relativePath":"lib/components/avatar/index.md","filePath":"lib/components/avatar/index.md","lastUpdated":null}'),h={name:"lib/components/avatar/index.md"},F=s("h1",{id:"头像",tabindex:"-1"},[a("头像 "),s("a",{class:"header-anchor",href:"#头像","aria-label":'Permalink to "头像"'},"​")],-1),m=s("p",null,"头像是用图片、图标或者文字的形式展示用户及具有特殊标识的其他对象。",-1),q=s("h2",{id:"使用方法",tabindex:"-1"},[a("使用方法 "),s("a",{class:"header-anchor",href:"#使用方法","aria-label":'Permalink to "使用方法"'},"​")],-1),B=s("p",null,[a("使用一个 "),s("code",null,"<div>"),a(" 元素并添加类 "),s("code",null,".avatar"),a("，然后将作为图像的图片、文字或图标放置在此元素内。")],-1),C=s("div",{class:"avatar"},[s("img",{src:y})],-1),D=s("div",{class:"avatar"},[s("i",{class:"icon icon-user"})],-1),x=s("div",{class:"avatar"},"Z",-1),b=n("",4),f=s("div",{class:"rounded-none avatar"},[s("img",{src:p})],-1),S=s("div",{class:"rounded-xs avatar"},[s("img",{src:e})],-1),T=s("div",{class:"rounded-sm avatar"},[s("img",{src:r})],-1),k=s("div",{class:"rounded avatar"},[s("img",{src:E})],-1),P=s("div",{class:"rounded-lg avatar"},[s("img",{src:c})],-1),z=s("div",{class:"rounded-xl avatar"},[s("img",{src:i})],-1),V=s("div",{class:"rounded-full avatar"},[s("img",{src:d})],-1),A=n("",3),Z=s("div",{class:"avatar primary"},"Z",-1),N=s("div",{class:"avatar primary-pale"},"Z",-1),I=s("div",{class:"avatar primary-outline"},"Z",-1),w=s("div",{class:"avatar black"},"Z",-1),R=n("",3),$=s("div",{class:"flex flex-wrap items-end gap-4"},[s("div",{class:"avatar size-xs"},[s("img",{src:p})]),s("div",{class:"avatar size-sm"},[s("img",{src:e})]),s("div",{class:"avatar"},[s("img",{src:r})]),s("div",{class:"avatar size-lg"},[s("img",{src:E})]),s("div",{class:"avatar size-xl"},[s("img",{src:c})])],-1),J=s("div",{class:"flex flex-wrap items-end gap-4"},[s("div",{class:"avatar size-xs"},"X"),s("div",{class:"avatar size-sm"},"S"),s("div",{class:"avatar"},"Z"),s("div",{class:"avatar size-lg"},"LG"),s("div",{class:"avatar size-xl"},"XL")],-1),L=n("",13);function X(G,H,O,U,j,K){const l=u("Example");return _(),g("div",null,[F,m,q,B,t(l,{class:"flex gap-4"},{default:o(()=>[C,D,x]),_:1}),b,t(l,{class:"flex flex-wrap gap-4"},{default:o(()=>[f,S,T,k,P,z,V]),_:1}),A,t(l,{class:"flex flex-wrap gap-4"},{default:o(()=>[Z,N,I,w]),_:1}),R,t(l,{class:"space-y-4"},{default:o(()=>[$,J]),_:1}),L])}const ss=v(h,[["render",X]]);export{Y as __pageData,ss as default};
3/assets/lib_components_avatar_js.md.4112e89d.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_avatar_js.md.4112e89d.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as e,H as t,o as p,c as r,J as n,E as l,V as a,C as o}from"./chunks/framework.42439fff.js";const c={mounted(){onZUIReady(()=>{new zui.Avatar("#avatar1",{text:"user"}),new zui.Avatar("#avatar2",{src:"/assets/avatar/avatar.png"})})}},k=JSON.parse('{"title":"头像生成器","description":"","frontmatter":{},"headers":[],"relativePath":"lib/components/avatar/js.md","filePath":"lib/components/avatar/js.md","lastUpdated":null}'),i=a("",5),E=o("div",{id:"avatar1"},null,-1),d=a("",2),u=o("div",{id:"avatar2"},null,-1),y=a("",53);function h(b,g,m,v,F,_){const s=t("Example");return p(),r("div",null,[i,n(s,null,{default:l(()=>[E]),_:1}),d,n(s,null,{default:l(()=>[u]),_:1}),y])}const C=e(c,[["render",h]]);export{k as __pageData,C as default};
3/assets/lib_components_breadcrumb_index.md.3cd99bed.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as l,H as e,o,c as n,J as r,E as p,C as s,a,V as c}from"./chunks/framework.42439fff.js";const D=JSON.parse('{"title":"面包屑","description":"","frontmatter":{},"headers":[],"relativePath":"lib/components/breadcrumb/index.md","filePath":"lib/components/breadcrumb/index.md","lastUpdated":null}'),E={name:"lib/components/breadcrumb/index.md"},d=s("h1",{id:"面包屑",tabindex:"-1"},[a("面包屑 "),s("a",{class:"header-anchor",href:"#面包屑","aria-label":'Permalink to "面包屑"'},"​")],-1),i=s("h2",{id:"使用方法",tabindex:"-1"},[a("使用方法 "),s("a",{class:"header-anchor",href:"#使用方法","aria-label":'Permalink to "使用方法"'},"​")],-1),y=s("p",null,[a("使用类 "),s("code",null,".breadcrumb"),a(" 来实现面包屑，通常搭配 "),s("code",null,"<ol>"),a("、"),s("code",null,"<li>"),a(" 元素使用。")],-1),h=s("ol",{class:"breadcrumb"},[s("li",null,[s("a",{href:"your/url/"},"首页")]),s("li",null,[s("a",{href:"your/url/"},"图书馆")]),s("li",{class:"active"},"数据")],-1),u=c(`<div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">ol</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;breadcrumb&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;your/url/&quot;</span><span style="color:#E1E4E8;">&gt;首页&lt;/</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;your/url/&quot;</span><span style="color:#E1E4E8;">&gt;图书馆&lt;/</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;active&quot;</span><span style="color:#E1E4E8;">&gt;数据&lt;/</span><span style="color:#85E89D;">li</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">ol</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="css-类" tabindex="-1">CSS 类 <a class="header-anchor" href="#css-类" aria-label="Permalink to &quot;CSS 类&quot;">​</a></h2><p>面包屑提供了如下CSS类</p><table><thead><tr><th>类</th><th style="text-align:center;">类型</th><th>作用</th></tr></thead><tbody><tr><td><code>breadcrumb</code></td><td style="text-align:center;">实体类</td><td>元素作为面包屑组件</td></tr></tbody></table><h2 id="css-变量" tabindex="-1">CSS 变量 <a class="header-anchor" href="#css-变量" aria-label="Permalink to &quot;CSS 变量&quot;">​</a></h2><table><thead><tr><th>变量名称</th><th>变量含义</th></tr></thead><tbody><tr><td>--breadcrumb-divider</td><td>面包屑分割元素标签类型</td></tr><tr><td>--breadcrumb-divider-color</td><td>面包屑分割元素颜色</td></tr><tr><td>--breadcrumb-color-active</td><td>面包屑选中态元素颜色</td></tr></tbody></table>`,6);function b(_,m,g,f,x,C){const t=e("Example");return o(),n("div",null,[d,i,y,r(t,null,{default:p(()=>[h]),_:1}),u])}const q=l(E,[["render",b]]);export{D as __pageData,q as default};
3/assets/lib_components_breadcrumb_index.md.3cd99bed.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as l,H as e,o,c as n,J as r,E as p,C as s,a,V as c}from"./chunks/framework.42439fff.js";const D=JSON.parse('{"title":"面包屑","description":"","frontmatter":{},"headers":[],"relativePath":"lib/components/breadcrumb/index.md","filePath":"lib/components/breadcrumb/index.md","lastUpdated":null}'),E={name:"lib/components/breadcrumb/index.md"},d=s("h1",{id:"面包屑",tabindex:"-1"},[a("面包屑 "),s("a",{class:"header-anchor",href:"#面包屑","aria-label":'Permalink to "面包屑"'},"​")],-1),i=s("h2",{id:"使用方法",tabindex:"-1"},[a("使用方法 "),s("a",{class:"header-anchor",href:"#使用方法","aria-label":'Permalink to "使用方法"'},"​")],-1),y=s("p",null,[a("使用类 "),s("code",null,".breadcrumb"),a(" 来实现面包屑，通常搭配 "),s("code",null,"<ol>"),a("、"),s("code",null,"<li>"),a(" 元素使用。")],-1),h=s("ol",{class:"breadcrumb"},[s("li",null,[s("a",{href:"your/url/"},"首页")]),s("li",null,[s("a",{href:"your/url/"},"图书馆")]),s("li",{class:"active"},"数据")],-1),u=c("",6);function b(_,m,g,f,x,C){const t=e("Example");return o(),n("div",null,[d,i,y,r(t,null,{default:p(()=>[h]),_:1}),u])}const q=l(E,[["render",b]]);export{D as __pageData,q as default};
3/assets/lib_components_btn-group_index.md.457467b6.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_btn-group_js.md.7e092621.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_btn-group_js.md.7e092621.lean.js 0 → 100644
浏览文件 @ bd4e09de
import{_ as r,H as i,o as y,c as d,J as o,E as p,C as s,a as t,V as e}from"./chunks/framework.42439fff.js";const u={mounted(){onZUIReady(()=>{const a=[{icon:"icon-search",hint:"查看详情"},{icon:"icon-edit",hint:"编辑"},{icon:"icon-trash",hint:"删除"}];new zui.BtnGroup("#btnGroup",{items:[{text:"查看详情",active:!0},{text:"编辑"},{text:"删除"}],onClickItem:n=>{console.log("> btnGroup.onClickItem",n)}}),new zui.BtnGroup("#btnGroup2",{items:a,onClickItem:n=>{console.log("> btnGroup.onClickItem",n)}}),[{id:"#iconBtnGroup",className:"ghost"},{id:"#iconBtnGroup2",className:"text-primary"},{id:"#iconBtnGroup3",className:"primary-outline bg-canvas"}].forEach(n=>{new zui.BtnGroup(n.id,{btnProps:{className:n.className},items:a})}),["xs","sm","lg","xl"].forEach(n=>{new zui.BtnGroup(`#${n}BtnGroup`,{size:n,items:a})}),new zui.BtnGroup("#defaultBtnGroup",{items:a}),new zui.BtnGroup("#disabledBtnGroup",{items:[{icon:"icon-search"},{icon:"icon-edit"},{icon:"icon-trash",disabled:!0},{icon:"icon-exclamation-sign"}]})})}},S=JSON.parse('{"title":"按钮组生成器","description":"","frontmatter":{},"headers":[],"relativePath":"lib/components/btn-group/js.md","filePath":"lib/components/btn-group/js.md","lastUpdated":null}'),F=s("h1",{id:"按钮组生成器",tabindex:"-1"},[t("按钮组生成器 "),s("a",{class:"header-anchor",href:"#按钮组生成器","aria-label":'Permalink to "按钮组生成器"'},"​")],-1),h=s("p",null,"常用于多项按钮操作的组件，通过 JS 动态生成，使用时方便快捷。",-1),B=s("h2",{id:"使用方法",tabindex:"-1"},[t("使用方法 "),s("a",{class:"header-anchor",href:"#使用方法","aria-label":'Permalink to "使用方法"'},"​")],-1),b=s("div",{id:"btnGroup"},null,-1),m=s("div",{id:"btnGroup2"},null,-1),g=e("",3),_=s("div",{id:"iconBtnGroup"},null,-1),C=s("div",{id:"iconBtnGroup2"},null,-1),G=s("div",{id:"iconBtnGroup3"},null,-1),f=s("div",{id:"btnGroup2"},null,-1),q=e("",2),v=s("div",{id:"disabledBtnGroup"},null,-1),k=e("",3),x=s("div",{id:"xsBtnGroup"},null,-1),P=s("div",{id:"smBtnGroup"},null,-1),D=s("div",{id:"defaultBtnGroup"},null,-1),z=s("div",{id:"lgBtnGroup"},null,-1),T=s("div",{id:"xlBtnGroup"},null,-1),A=e("",54);function w(a,c,E,n,I,N){const l=i("Example");return y(),d("div",null,[F,h,B,o(l,{class:"flex gap-2"},{default:p(()=>[b,m]),_:1}),g,o(l,{class:"flex gap-1"},{default:p(()=>[_,C,G,f]),_:1}),q,o(l,null,{default:p(()=>[v]),_:1}),k,o(l,{class:"col gap-3"},{default:p(()=>[x,P,D,z,T]),_:1}),A])}const R=r(u,[["render",w]]);export{S as __pageData,R as default};
3/assets/lib_components_button_index.md.2cbc7954.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_button_js.md.7725567a.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_button_js.md.7725567a.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_dashboard_index.md.75bb7957.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_dropdown_index.md.30374d91.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_label_index.md.47b3fb8f.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_label_index.md.47b3fb8f.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_menu_index.md.86c66a40.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_menu_index.md.86c66a40.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_menu_js.md.365da827.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_menu_js.md.365da827.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_messager_index.md.c69ffb2c.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_modal_index.md.24d96994.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_modal_index.md.24d96994.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_modal_js.md.98c84023.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_modal_js.md.98c84023.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_nav_index.md.beed955b.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_nav_index.md.beed955b.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_nav_js.md.37903db9.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_nav_js.md.37903db9.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_pager_index.md.a20c761f.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_pager_index.md.a20c761f.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_pager_js.md.315f2247.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_pager_js.md.315f2247.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_panel_index.md.56e3dc66.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_panel_index.md.56e3dc66.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_picker_index.md.d5beabca.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_progress_index.md.1f137129.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_scrollbar_index.md.c96eb840.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_search-box_index.md.41abbfb3.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_table_index.md.0fd79e8f.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_table_index.md.0fd79e8f.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_tabs_index.md.30e48fce.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_tabs_index.md.30e48fce.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_toolbar_index.md.a94b2ad6.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_toolbar_js.md.8a6232ef.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_toolbar_js.md.8a6232ef.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_tooltip_index.md.f1196e29.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_tree_index.md.50e26d42.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_tree_index.md.50e26d42.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_components_upload_index.md.7cfeca6e.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_dtable_dtable_index.md.c90b3eea.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_dtable_dtable_index.md.c90b3eea.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_dtable_dtable_plugins.md.fd239311.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_dtable_dtable_plugins.md.fd239311.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_forms_checkbox_index.md.5731e112.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_forms_checkbox_index.md.5731e112.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_forms_form_index.md.c1fda88c.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_forms_form_index.md.c1fda88c.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_forms_input-control_index.md.dd69c06e.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_forms_input-group_index.md.b4d256d7.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_helpers_helpers_index.md.9c69a028.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_helpers_helpers_index.md.9c69a028.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_helpers_store_index.md.bf18d12b.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_helpers_store_index.md.bf18d12b.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_icons_icons_index.md.40e3157d.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_icons_icons_index.md.40e3157d.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_index.md.b9276d69.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/lib_index.md.b9276d69.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/style.d701c661.css 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/themes_index.md.ee20da27.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/themes_index.md.ee20da27.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/utilities_flex_utilities_basis.md.77bda077.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/utilities_flex_utilities_flex.md.4411093a.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/utilities_flex_utilities_gap.md.3889ecef.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/utilities_flex_utilities_grow.md.3d00093a.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/utilities_flex_utilities_order.md.2fc58ed6.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/utilities_flex_utilities_shrink.md.fefbaa22.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/utilities_flex_utilities_wrap.md.d4f82c45.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/utilities_index.md.eef317c2.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/utilities_index.md.eef317c2.lean.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/utilities_style_utilities_pale.md.df51e90f.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/assets/utilities_style_utilities_solid.md.258f83f8.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/favicon.svg 0 → 100755
浏览文件 @ bd4e09de
此差异已折叠。
3/frames/zui.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/guide/config/base/color.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/guide/config/base/font.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/guide/config/base/rounded.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/guide/config/base/screens.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/guide/config/base/shadow.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/guide/config/base/spacing.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/guide/customize/build.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/guide/customize/dev.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/guide/customize/exts-lib.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/guide/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/guide/start/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/hashmap.json 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/icons/fontawesome-license.md 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/icons/icons.json 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/icons/selection.json 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/icons/zenicon.eot 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/icons/zenicon.json 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/icons/zenicon.svg 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/icons/zenicon.ttf 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/icons/zenicon.woff 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/action-menu/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/alert/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/avatar-group/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/avatar/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/avatar/js.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/breadcrumb/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/btn-group/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/btn-group/js.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/button/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/button/js.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/color-picker/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/contextmenu/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/dashboard/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/datetime-picker/date.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/datetime-picker/datetime.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/datetime-picker/time.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/dropdown/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/label/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/menu/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/menu/js.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/messager/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/modal/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/modal/js.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/nav/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/nav/js.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/pager/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/pager/js.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/panel/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/picker/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/progress-circle/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/progress/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/scrollbar/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/search-box/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/table/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/tabs/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/toolbar/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/toolbar/js.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/tooltip/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/tree/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/upload-imgs/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/components/upload/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/dtable/dtable/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/dtable/dtable/plugins.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/forms/checkbox/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/forms/form/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/forms/input-control/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/forms/input-group/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/helpers/helpers/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/helpers/store/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/icons/icons/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/lib/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/public/icons/fontawesome-license.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/sortable/sortable.min.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/themes/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/backgrounds/utilities/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/borders/utilities/border-color.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/borders/utilities/border-radius.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/borders/utilities/border-width.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/effects/utilities/animation.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/effects/utilities/filter.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/effects/utilities/flip.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/effects/utilities/opacity.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/effects/utilities/rotate.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/effects/utilities/scale.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/effects/utilities/shadow.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/flex/utilities/align-content.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/flex/utilities/align-items.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/flex/utilities/align-self.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/flex/utilities/basis.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/flex/utilities/direction.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/flex/utilities/flex.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/flex/utilities/gap.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/flex/utilities/grow.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/flex/utilities/justify-content.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/flex/utilities/order.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/flex/utilities/shrink.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/flex/utilities/wrap.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/interactivity/utilities/disabled.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/interactivity/utilities/pointer-events.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/interactivity/utilities/scroll.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/interactivity/utilities/state.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/interactivity/utilities/user-select.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/layout/utilities/aspect-ratio.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/layout/utilities/container.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/layout/utilities/display.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/layout/utilities/floats.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/layout/utilities/object-fit.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/layout/utilities/overflow.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/layout/utilities/position.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/layout/utilities/top-right-bottom-left.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/layout/utilities/visibility.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/layout/utilities/z-index.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/sizing/utilities/height.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/sizing/utilities/width.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/spacing/utilities/margin.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/spacing/utilities/padding.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/spacing/utilities/space.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/style/utilities/outline.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/style/utilities/pale.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/style/utilities/solid.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/typography/utilities/font-family.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/typography/utilities/font-size.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/typography/utilities/font-weight.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/typography/utilities/leading.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/typography/utilities/line-clamp.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/typography/utilities/text-align.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/typography/utilities/text-color.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/typography/utilities/text-overflow.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/typography/utilities/vertical-align.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/typography/utilities/whitespace.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/utilities/typography/utilities/word-break.html 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/zui-libs.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/zui-libs.json 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/zui.css 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/zui.js 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/zui.js.map 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/zui.umd.cjs 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。
3/zui.umd.cjs.map 0 → 100644
浏览文件 @ bd4e09de
此差异已折叠。