@23g/pacos 中文文档教程

Question

Pacos

Pacos 是一个前端框架，用于快速设置项目和更有效地重用代码。

Installation

npm i @23g/pacos

Table of contents

• Guidelines
• JS
  • Component library
  • JS utilities
• SCSS
  • Breakpoints
  • SCSS utilities
  • Component: consent bar
  • Mixins
  • Functions
• Linters
• Development

Guidelines

我们遵循 Airbnb 的 scss/css 指南。 阅读他们的文档以获取指南。

JS

Component library

Usage

import Pacos from '@23g/pacos';

Vue.use(Pacos, {
    /*
        inlineLabel: true,
        svgSpritePath: '/svg/sprite-symbol.svg',
        prefix: 'P',
        precision: 2,
        currency: 'EUR',
        currencyDisplayKey: 'symbol',
        currencySelectDisplayKey: 'label',
        currencies: [
            {
                entity: '€',
                label: 'EUR',
                symbol: '€',
                value: 'EUR',
            },
            {
                entity: 'US$',
                label: 'USD',
                symbol: 'US$',
                value: 'USD',
            },
        ],
    */
});

Available components

<p-form-input />

<p-form-textarea />

<p-form-input-number />

<p-form-input-money />

<p-form-select />

<p-form-switch />

<p-icon />

JS utilities

Usage

    import {
        getDeep,
        getIcon,
        loadImage,
        sleep,
    } from '@23g/pacos/utils';

    // or singular import
    import sleep from '@23g/pacos/utils/sleep';

sleep

只是一个更漂亮的函数，用于将超时与 async/await 一起使用。

const doStuff = async () => {
    console.log('Do something now...');
    await sleep(500);
    console.log('...and when 500ms passes');
};

getDeep

当属性未定义时防止类型错误。

const response = {
    name: {
        first: 'Youri',
        last: 'Hanssens',
    },
};

getDeep(response, 'name.first');
// e.g. 'Youri';

getDeep(response, 'name.does.not.exist');
// e.g. false

loadImage

当给定的 src 被浏览器加载时返回一个承诺的简单函数。

const doStuffAfterImageLoaded = async () => {
    const src = 'https://dummyimage.com/400x400';

    await loadImage(src);

    console.log(`${src} is loaded`);
};

Scss

Usage

// This is the way
@import '~@23g/pacos/scss/all';

// Global import for abstractions which can be used for globalVueStyle
@import '~@23g/pacos/scss/global';

Breakpoints

$breakpoints: (
    'zero': 0,
    'xs': 320px,
    'sm': 420px,
    'md': 800px,
    'lg': 1100px,
    'xl': 1300px,
) !default;

SCSS utilities

Helper	Usage
.clearfix	Clears floats.
.disabled	Disables element by adding pointer-events: none; and lowering its opacity.
.hidden	Hides element by adding display: none;
.lazyload-animate	Adds a fade in animation to lazyloaded elements.
.list	Resets default list styling.
.object-fit	Adds object-fit: cover; to image elements and initializes an IE fallback for lazysizes.
.truncate	Truncates texts.
.visually-hidden	Hides element visually but keeps it accessible.
.embed-container	Makes sure embedded html elements are fluid.
.hidden-from-{$breakpoint}	Hides elements from a specified breakpoint. <div class="hidden-from-large"></div> will hide the div from 1120px screen width.
.hidden-until-{$breakpoint}	Hides elements until a specified breakpoint. <div class="hidden-until-large"></div> will hide the div until 1120px screen width.
.flex-basis-auto	Adds flex-basis: auto; to the element

23G Consent

同意样式现在包含在 @import '~@23g/pacos/scss/all' 中。 样式可以在您自己的样式表中被覆盖。

使用您自己的样式创建这些 scss 变量以覆盖默认值。

$consent-background: #fff;
$consent-color: #222;
$consent-index: 10;
$consent-border-color: #eee;
$consent-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
$consent-logo-height: 30px;
$consent-logo-height-desktop: 40px;
$consent-logo-padding-right: 32px;
$consent-max-width: 1336px;

$consent-content-title-size: 18px;
$consent-content-text-size: 14px;
$consent-content-title-size-mobile: 12px;
$consent-content-text-size-mobile: 12px;

Bootstrap

Bootstrap 现在是使用 Pacos 时的依赖项。 默认情况下导入以下脚本：

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/grid';
@import '~bootstrap/scss/tables';
@import '~bootstrap/scss/forms';
@import '~bootstrap/scss/buttons';
@import '~bootstrap/scss/dropdown';
@import '~bootstrap/scss/button-group';
@import '~bootstrap/scss/input-group';
@import '~bootstrap/scss/custom-forms';
@import '~bootstrap/scss/nav';
@import '~bootstrap/scss/navbar';
@import '~bootstrap/scss/card';
@import '~bootstrap/scss/breadcrumb';
@import '~bootstrap/scss/pagination';
@import '~bootstrap/scss/badge';
@import '~bootstrap/scss/jumbotron';
@import '~bootstrap/scss/alert';
@import '~bootstrap/scss/list-group';
@import '~bootstrap/scss/spinners';
@import '~bootstrap/scss/utilities';

Mixins

包含以下混合宏。

Mixin	Usage
appearance	@include appearance($arguments);
aspect-ratio	@include aspect-ratio($width, $height);
optional-at-root	@include optional-at-root($sel);
line-clamp	@include line-clamp($number-of-lines);
line-clamp-limit	@include line-clamp-limit($number-of-lines);
placeholder	@include placeholder;
respond-to	@include respond-to($breakpoint);
visually-hidden	@include visually-hidden;

Functions

包括以下功能。

Function	Usage
rem	rem($size-in-px);

Linters

我们使用 stylelint 和 eslint 并要求在每个项目中都使用它们。

Installation

1. Add .pacos-config to the .gitignore.
2. Copy all files from .pacos-config to the root of your project.

NPM scripts

作为提示，请考虑将以下 NPM 脚本添加到您的 package.json 文件中，以加快您的工作流程。 Laravel 安装已经包含了这个。

"scripts": {
    "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

Browser support

• Chrome latest
• Firefox latest
• Opera latest
• Safari latest
• IE latest Pacos works perfectly with almost all older versions of the browsers above, though IE certainly has large degradation prior to IE11.

Development

Creating a test build

npm pack

Copyright & License

代码版权2018 23G。 代码根据 MIT 许可发布。