@ruixinkeji/prism-ui 1.0.14 → 1.0.16

package/dist/dev/mp-weixin/pages/demo/colors.wxml

@@ -0,0 +1 @@
+<view class="{{['prism-page', j && 'dark-mode']}}"><prism-nav-bar wx:if="{{a}}" u-i="b6228f62-0" bind:__l="__l" u-p="{{a}}"/><view class="color-content-wrapper" style="{{'padding-top:' + f}}"><scroll-view class="prism-main" scroll-y scroll-into-view="{{d}}" bindscroll="{{e}}"><view class="prism-section" id="color-overview"><view class="prism-card"><view class="card-title">颜色系统总览</view><view class="overview-grid"><view class="overview-item"><text class="overview-value">14</text><text class="overview-label">种颜色</text></view><view class="overview-item"><text class="overview-value">5</text><text class="overview-label">种形态</text></view><view class="overview-item"><text class="overview-value">3</text><text class="overview-label">种组件</text></view><view class="overview-item"><text class="overview-value">210</text><text class="overview-label">个CSS类</text></view></view><view class="color-palette"><view wx:for="{{b}}" wx:for-item="color" wx:key="b" class="palette-item" style="{{'background:' + color.c}}" bindtap="{{color.d}}"><text class="palette-name">{{color.a}}</text></view></view></view></view><view class="prism-section"><view class="prism-card"><view class="card-title">基本颜色用法</view><view class="style-list"><view class="style-item"><view class="style-demo-text prism-color-blue">Aa</view><view class="style-info"><text class="style-name">文字颜色 (color)</text><text class="style-desc">设置文字颜色</text><text class="style-class">.prism-color-{颜色}</text></view></view><view class="style-item"><view class="style-demo-box prism-bg-blue"></view><view class="style-info"><text class="style-name">背景颜色 (bg)</text><text class="style-desc">设置背景颜色</text><text class="style-class">.prism-bg-{颜色}</text></view></view><view class="style-item"><view class="style-demo-box prism-bg-blue-light"></view><view class="style-info"><text class="style-name">浅色背景 (bg-light)</text><text class="style-desc">设置浅色背景</text><text class="style-class">.prism-bg-{颜色}-light</text></view></view><view class="style-item"><view class="style-demo-box style-demo-border prism-border-blue"></view><view class="style-info"><text class="style-name">边框颜色 (border)</text><text class="style-desc">设置边框颜色</text><text class="style-class">.prism-border-{颜色}</text></view></view></view></view></view><view class="prism-section" id="color-icon-usage"><view class="prism-card"><view class="card-title">图标容器用法</view><view class="style-list"><view class="style-item"><view class="prism-icon purple"><text class="fa fa-palette"></text></view><view class="style-info"><text class="style-name">自适应 (adaptive)</text><text class="style-desc">自动适配深色/浅色模式</text><text class="style-class">.prism-icon .{颜色}</text></view></view><view class="style-item"><view class="prism-icon purple solid"><text class="fa fa-palette"></text></view><view class="style-info"><text class="style-name">实心 (solid)</text><text class="style-desc">纯色背景，白色内容</text><text class="style-class">.prism-icon .{颜色} .solid</text></view></view><view class="style-item"><view class="prism-icon purple gradient"><text class="fa fa-palette"></text></view><view class="style-info"><text class="style-name">渐变 (gradient)</text><text class="style-desc">双色渐变，带阴影</text><text class="style-class">.prism-icon .{颜色} .gradient</text></view></view><view class="style-item"><view class="prism-icon purple glass"><text class="fa fa-palette"></text></view><view class="style-info"><text class="style-name">玻璃 (glass)</text><text class="style-desc">半透明毛玻璃效果</text><text class="style-class">.prism-icon .{颜色} .glass</text></view></view><view class="style-item"><view class="prism-icon purple outline"><text class="fa fa-palette"></text></view><view class="style-info"><text class="style-name">轮廓 (outline)</text><text class="style-desc">透明背景，彩色边框</text><text class="style-class">.prism-icon .{颜色} .outline</text></view></view></view></view></view><view class="prism-section"><view class="prism-card"><view class="card-title">按钮用法</view><view class="style-list"><view class="style-item"><view class="prism-btn green style-demo-btn">按钮</view><view class="style-info"><text class="style-name">自适应 (adaptive)</text><text class="style-desc">自动适配深色/浅色模式</text><text class="style-class">.prism-btn .{颜色}</text></view></view><view class="style-item"><view class="prism-btn green solid style-demo-btn">按钮</view><view class="style-info"><text class="style-name">实心 (solid)</text><text class="style-desc">纯色背景，白色内容</text><text class="style-class">.prism-btn .{颜色} .solid</text></view></view><view class="style-item"><view class="prism-btn green gradient style-demo-btn">按钮</view><view class="style-info"><text class="style-name">渐变 (gradient)</text><text class="style-desc">双色渐变，带阴影</text><text class="style-class">.prism-btn .{颜色} .gradient</text></view></view><view class="style-item"><view class="prism-btn green glass style-demo-btn">按钮</view><view class="style-info"><text class="style-name">玻璃 (glass)</text><text class="style-desc">半透明毛玻璃效果</text><text class="style-class">.prism-btn .{颜色} .glass</text></view></view><view class="style-item"><view class="prism-btn green outline style-demo-btn">按钮</view><view class="style-info"><text class="style-name">轮廓 (outline)</text><text class="style-desc">透明背景，彩色边框</text><text class="style-class">.prism-btn .{颜色} .outline</text></view></view></view></view></view><view class="prism-section"><view class="prism-card"><view class="card-title">卡片用法</view><view class="card-demos"><view class="card-demo-item prism-card orange"><text class="card-demo-title">自适应</text><text class="card-demo-class">.prism-card .{颜色}</text></view><view class="card-demo-item prism-card orange solid"><text class="card-demo-title">实心</text><text class="card-demo-class">.prism-card .{颜色} .solid</text></view><view class="card-demo-item prism-card orange gradient"><text class="card-demo-title">渐变</text><text class="card-demo-class">.prism-card .{颜色} .gradient</text></view><view class="card-demo-item prism-card orange glass"><text class="card-demo-title">玻璃</text><text class="card-demo-class">.prism-card .{颜色} .glass</text></view><view class="card-demo-item prism-card orange outline"><text class="card-demo-title">轮廓</text><text class="card-demo-class">.prism-card .{颜色} .outline</text></view></view></view></view><view class="prism-section"><view class="prism-card"><view class="card-title">原子化修饰类（推荐）</view><view class="section-desc" style="margin-bottom:24rpx;color:var(--prism-text-secondary);font-size:24rpx"> 组件 + 颜色 + 尺寸 + 形态，灵活组合 </view><view class="style-list"><view class="style-item"><view class="prism-icon-btn blue md"><text class="fa fa-star"></text></view><view class="style-info"><text class="style-name">图标按钮</text><text class="style-desc">prism-icon-btn + {颜色} + {尺寸}</text><text class="style-class">.prism-icon-btn .blue .md</text></view></view><view class="style-item"><view class="prism-icon-btn green md solid"><text class="fa fa-check"></text></view><view class="style-info"><text class="style-name">实心形态</text><text class="style-desc">添加 solid 修饰</text><text class="style-class">.prism-icon-btn .green .md .solid</text></view></view><view class="style-item"><view class="prism-icon-btn ai md gradient"><text class="fa fa-magic"></text></view><view class="style-info"><text class="style-name">渐变形态</text><text class="style-desc">添加 gradient 修饰</text><text class="style-class">.prism-icon-btn .ai .md .gradient</text></view></view><view class="style-item"><view class="prism-text-btn primary sm solid"><text class="fa fa-plus"></text><text>新增</text></view><view class="style-info"><text class="style-name">图标文字按钮</text><text class="style-desc">prism-text-btn + 颜色 + 尺寸 + 形态</text><text class="style-class">.prism-text-btn .primary .sm .solid</text></view></view></view></view></view><view wx:for="{{c}}" wx:for-item="color" wx:key="R" class="prism-section"><view id="{{color.Q}}" class="prism-card color-section"><view class="color-header"><view class="color-swatch" style="{{'background:' + color.a}}"></view><view class="color-title-info"><text class="color-name">{{color.b}}</text><view class="color-var-line"><text class="color-var" style="{{'color:' + color.d}}">${{color.c}}</text><text class="color-hex">{{color.e}}</text></view></view></view><view class="color-vars"><view class="var-tile"><view class="var-tile-preview" style="{{'background:' + color.g}}"><text class="var-tile-label">深色模式</text><text class="var-tile-value">${{color.f}}</text></view></view><view class="var-tile"><view class="var-tile-preview" style="{{'background:' + color.i}}"><text class="var-tile-label">更亮色</text><text class="var-tile-value">${{color.h}}</text></view></view><view class="var-tile"><view class="var-tile-preview var-tile-preview--gradient" style="{{'background:' + color.k}}"><text class="var-tile-label">渐变</text><text class="var-tile-value">${{color.j}}</text></view></view></view><view class="component-section"><text class="component-title">图标容器 (icon)</text><view class="component-demos"><view class="demo-item"><view class="{{['demo-box', 'prism-icon', color.m]}}"><text class="{{['fa', color.l]}}"></text></view><text class="demo-label">自适应</text></view><view class="demo-item"><view class="{{['demo-box', 'prism-icon', 'solid', color.o]}}"><text class="{{['fa', color.n]}}"></text></view><text class="demo-label">实心</text></view><view class="demo-item"><view class="{{['demo-box', 'prism-icon', 'gradient', color.q]}}"><text class="{{['fa', color.p]}}"></text></view><text class="demo-label">渐变</text></view><view class="demo-item"><view class="{{['demo-box', 'prism-icon', 'glass', color.s]}}"><text class="{{['fa', color.r]}}"></text></view><text class="demo-label">玻璃</text></view><view class="demo-item"><view class="{{['demo-box', 'prism-icon', 'outline', color.v]}}"><text class="{{['fa', color.t]}}"></text></view><text class="demo-label">轮廓</text></view></view></view><view class="component-section"><text class="component-title">按钮 (btn)</text><view class="btn-demos"><view class="btn-demo-row"><view class="{{['prism-btn', color.w]}}"><text>自适应</text></view><text class="btn-class">.prism-btn .{{color.x}}</text></view><view class="btn-demo-row"><view class="{{['prism-btn', 'solid', color.y]}}"><text>实心</text></view><text class="btn-class">.prism-btn .{{color.z}} .solid</text></view><view class="btn-demo-row"><view class="{{['prism-btn', 'gradient', color.A]}}"><text>渐变</text></view><text class="btn-class">.prism-btn .{{color.B}} .gradient</text></view><view class="btn-demo-row"><view class="{{['prism-btn', 'glass', color.C]}}"><text>玻璃</text></view><text class="btn-class">.prism-btn .{{color.D}} .glass</text></view><view class="btn-demo-row"><view class="{{['prism-btn', 'outline', color.E]}}"><text>轮廓</text></view><text class="btn-class">.prism-btn .{{color.F}} .outline</text></view></view></view><view class="component-section"><text class="component-title">卡片 (card)</text><view class="card-demos"><view class="{{['card-demo-item', 'prism-card', color.H]}}"><text class="card-demo-title">自适应</text><text class="card-demo-class">.prism-card .{{color.G}}</text></view><view class="{{['card-demo-item', 'prism-card', 'solid', color.J]}}"><text class="card-demo-title">实心</text><text class="card-demo-class">.prism-card .{{color.I}} .solid</text></view><view class="{{['card-demo-item', 'prism-card', 'gradient', color.L]}}"><text class="card-demo-title">渐变</text><text class="card-demo-class">.prism-card .{{color.K}} .gradient</text></view><view class="{{['card-demo-item', 'prism-card', 'glass', color.N]}}"><text class="card-demo-title">玻璃</text><text class="card-demo-class">.prism-card .{{color.M}} .glass</text></view><view class="{{['card-demo-item', 'prism-card', 'outline', color.P]}}"><text class="card-demo-title">轮廓</text><text class="card-demo-class">.prism-card .{{color.O}} .outline</text></view></view></view></view></view><view class="prism-section"><view class="prism-card"><view class="card-title">背景色变量</view><view class="subsection"><view class="subsection-title">页面背景色（最深）</view><view class="color-demo-box" style="background:var(--prism-bg-color-page)"><text class="color-demo-text">var(--prism-bg-color-page)</text><text class="color-demo-desc">用于 page、.prism-page、scroll-view（深色#121212）</text></view></view><view class="subsection"><view class="subsection-title">内容背景色</view><view class="color-demo-box" style="background:var(--prism-bg-color)"><text class="color-demo-text">var(--prism-bg-color)</text><text class="color-demo-desc">用于区块、分割区域（深色#1A1A1A，比 page 稍亮）</text></view></view><view class="subsection"><view class="subsection-title">卡片背景色（最亮）</view><view class="color-demo-box" style="background:var(--prism-bg-color-card)"><text class="color-demo-text">var(--prism-bg-color-card)</text><text class="color-demo-desc">用于卡片、弹窗、菜单（深色#242424）</text></view></view><view class="subsection"><view class="subsection-title">输入框背景</view><view class="color-demo-box" style="background:var(--prism-input-bg)"><text class="color-demo-text">var(--prism-input-bg)</text><text class="color-demo-desc">用于输入框、选择器</text></view></view></view></view><view class="prism-section"><view class="prism-card"><view class="card-title">文字色变量</view><view class="subsection"><view class="subsection-title">主要文字</view><view class="color-demo-box" style="background:var(--prism-bg-color-card)"><text class="color-demo-text" style="color:var(--prism-text-primary)">var(--prism-text-primary)</text><text class="color-demo-desc">用于标题、重要信息</text></view></view><view class="subsection"><view class="subsection-title">次要文字</view><view class="color-demo-box" style="background:var(--prism-bg-color-card)"><text class="color-demo-text" style="color:var(--prism-text-secondary)">var(--prism-text-secondary)</text><text class="color-demo-desc">用于描述、辅助信息</text></view></view><view class="subsection"><view class="subsection-title">占位符文字</view><view class="color-demo-box" style="background:var(--prism-bg-color-card)"><text class="color-demo-text" style="color:var(--prism-text-placeholder)">var(--prism-text-placeholder)</text><text class="color-demo-desc">用于输入框占位符</text></view></view></view></view><view class="prism-section"><view class="prism-card"><view class="card-title">边框色变量</view><view class="subsection"><view class="subsection-title">浅色边框</view><view class="color-demo-box" style="background:var(--prism-bg-color-card);border:2rpx solid var(--prism-border-color-light)"><text class="color-demo-text">var(--prism-border-color-light)</text><text class="color-demo-desc">用于分割线、边框</text></view></view></view></view><view class="prism-section"><view class="prism-card"><view class="card-title">主题色变量</view><view class="subsection"><view class="subsection-title">主题色</view><view class="color-demo-box" style="background:var(--prism-primary-color)"><text class="color-demo-text" style="color:#fff">var(--prism-primary-color)</text><text class="color-demo-desc" style="color:rgba(255,255,255,0.8)">用于主要按钮、链接</text></view></view><view class="subsection"><view class="subsection-title">成功色</view><view class="color-demo-box" style="background:var(--prism-success-color)"><text class="color-demo-text" style="color:#fff">var(--prism-success-color)</text><text class="color-demo-desc" style="color:rgba(255,255,255,0.8)">用于成功提示</text></view></view><view class="subsection"><view class="subsection-title">警告色</view><view class="color-demo-box" style="background:var(--prism-warning-color)"><text class="color-demo-text" style="color:#fff">var(--prism-warning-color)</text><text class="color-demo-desc" style="color:rgba(255,255,255,0.8)">用于警告提示</text></view></view><view class="subsection"><view class="subsection-title">危险色</view><view class="color-demo-box" style="background:var(--prism-danger-color)"><text class="color-demo-text" style="color:#fff">var(--prism-danger-color)</text><text class="color-demo-desc" style="color:rgba(255,255,255,0.8)">用于错误提示</text></view></view></view></view><view class="prism-section"><view class="prism-card"><view class="card-title">语义化别名</view><view class="alias-list"><view class="alias-item"><text class="alias-name">primary</text><text class="alias-arrow">→</text><text class="alias-color">blue</text></view><view class="alias-item"><text class="alias-name">success</text><text class="alias-arrow">→</text><text class="alias-color">green</text></view><view class="alias-item"><text class="alias-name">warning</text><text class="alias-arrow">→</text><text class="alias-color">orange</text></view><view class="alias-item"><text class="alias-name">danger</text><text class="alias-arrow">→</text><text class="alias-color">red</text></view><view class="alias-item"><text class="alias-name">info</text><text class="alias-arrow">→</text><text class="alias-color">cyan</text></view></view><view class="alias-example"><text class="example-text">.prism-btn .primary .gradient = .prism-btn .blue .gradient</text></view></view></view><view class="prism-safe-area-bottom"></view></scroll-view></view><prism-index-bar wx:if="{{i}}" bindchange="{{g}}" u-i="b6228f62-1" bind:__l="__l" bindupdateModelValue="{{h}}" u-p="{{i}}"/></view>