@bluecateng/ pelagos (英语)

UI组件.

安装

npm i -S @bluecateng/pelagos

开始

在应用程序条目中添加共享组件样式 .less 文档. 下面选择一个主题设置; 核心和旋转主题必须使用相同的 光或暗变相.

固定主题

对于总是使用一个主题的应用程序,导入固定核心和 旋转主题文件 :

@import '@bluecateng/pelagos/less/core';
@import '@bluecateng/pelagos/less/core-dark'; // or core-light
@import '@bluecateng/pelagos/less/inputs';
@import '@bluecateng/pelagos/less/scrollbar';
@import '@bluecateng/pelagos/less/spinner-dark'; // or spinner-light

用户选择的主题

对于运行时间主题选择, 导入主题和自旋器基础, 然后绑定 他们的混入到根属性。 这是示例使用的设置 应用.

@import '@bluecateng/pelagos/less/core';
@import '@bluecateng/pelagos/less/themes';
@import '@bluecateng/pelagos/less/inputs';
@import '@bluecateng/pelagos/less/scrollbar';
@import '@bluecateng/pelagos/less/spinner';

[data-theme='light'],
[data-theme='auto'] {
    .theme-light();
}

[data-theme='dark'] {
    .theme-dark();
}

[data-theme='auto'] {
    @media (prefers-color-scheme: dark) {
        .theme-dark();
    }
}

.CssSpinner {
    .css-spinner();

    [data-theme='light'] &,
    [data-theme='auto'] & {
        animation-name: spinner-light;
    }

    [data-theme='dark'] & {
        animation-name: spinner-dark;
    }

    [data-theme='auto'] & {
        @media (prefers-color-scheme: dark) {
            animation-name: spinner-dark;
        }
    }
}

将属性设置在根元素上( R)<html data-theme="auto">)和更新 document.documentElement.dataset.theme 在运行时切换。 这个 auto 上方绑定遵循操作系统偏好。 部件从CSS取出颜色 主题提供的自定义属性; 导入 core 没有两个主题 设置让它们无色或无外形.

版式

核心样式采用有意见的重置(内置) @layer pelagos: div, (中文(简体) ), form, (中文(简体) ), main, (中文(简体) ), header,以及 footer 默认为

display: flex;
flex-direction: column;
flex: none;

每个平地 div 因此,已经是一列弹性容器——列出 行为 flex-direction: row 而不是在 对抗默认. flex: none 也意味着儿童不会成长; 设置 flex: 1 明确内容应填入可用空间.

故事书

实例和文件请参见: 故事书网站

示例应用程序

种族实例 是一个 小型可运行应用程序,其示例按每个实例索引 演示——包括描述的主题切换和布局模式 见上文.

AI 编码代理的说明

一般事务人员(其他职等) 是一份非明显合同的紧凑清单—— 重置布局,主题线, 克隆孩子的组件, 标签规则——即代理人(和人类)否则从源头重新发现. 它与 npm 包,所以它是可用的在 node_modules 地点 使用点.