doyoe / yo Goto Github PK

在当前的 align() mixin 中，集成了对文本和图片的处理。当传入的 type 值是 text 时，将会对文本进行遇到边界换行处理；当传入的 type 值是 image 时，将会对图片进行最大宽度和高度的边界处理；当 type 缺省时，不对文本和图片进行处理。

这和 align() 的意图不太相符，所以将移除 type 参数。对于文本和图片的这些处理，需要另行定义

之前的css代码是按照这种来编写的

div {
    display: block; // 盒模型
    position: absolute; // 定位
    left: 0; // 定位相关
    width: 100%; // 盒子长宽
    text-align: center; // 文字相关↓
    line-height: 1.5;
    border: 1px solid #ccc; // border padding margin ↓
    padding: 10px; 
    margin: 0 auto;
    background-color: #fff; //颜色相关 ↓
    color: red;
    transition: all .2s; //动画
}

但是使用yo之后不知道该怎么排版写好的scss了，例如

div {
    @include flexbox(flex);
    @include justify-content(center);
    @include align-items(center);
    @include flex(1);
    @include yo-checked(
        $name: pay,
        $bgcolor: #fff,
        $on-bgcolor: #24aa42,
        $border-width: 1px,
        $border-color: #ccc,
        $on-border-color: #24aa42,
        $color: #fff,
        $radius: 50%
    );
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 1.5;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 0 auto;
    background-color: #fff;
    color: red;
    transition: all .2s;
}

这样排版感觉好乱，想请教一下贵司使用yo的时候是按照什么循序编写的

请问有没有yo+js使用的实例，方便新手入门使用，谢谢！

1. 能支持extraClass,方便使用者控制样式。目前dom建在body下，无法通过样式做差异化控制
2. content最好能支持 html标签

用dialog有点小题大作,还需要额外state控制

原因是某些低版本安卓机浏览器对等分时的元素宽度四舍五入不一样，造成边框显示不全，可以考虑加入一个参数以处理多边框情况

/**
 * @module 背景与边框
 * @description 为元素添加边框（包括1px边框）
 * @method border
 * @version 2.0.0
 * @param {String} $border-width 指定边框厚度（单位为px），默认值：1px，取值与`border-width`属性一致，不同方向代表边框位置 <2.0.0>
 * @param {String} $border-color 指定边框颜色 <2.0.0>
 * @param {String} $border-style 指定边框样式 <2.0.0>
 * @param {String} $radius 指定边框圆角半径，默认值：null <2.0.0>
 * @param {String} $width-percent 指定宽度百分比，默认值：100% (安卓低版本下多边框显示不全)
 */
@mixin border($border-width: 1px, $border-color: map-get($base, border-color), $border-style: solid, $radius: null, $width-percent: 100%) {
    // 为边框位置提供定位参考
    position: relative;
    @if $border-width == null {
        $border-width: 0;
    }
    border-radius: $radius;
    &::after {
        // 用以解决边框layer遮盖内容
        pointer-events: none;
        position: absolute;
        z-index: 999;
        top: 0;
        left: 0;
        overflow: hidden;
        content: "\0020";
        border-color: $border-color;
        border-style: $border-style;
        border-width: $border-width;
        // 适配dpr进行缩放
        @include responsive(retina1x) {
            width: $width-percent;
            height: 100%;
            @if $radius != null {
                border-radius: $radius;
            }
        }
        @include responsive(retina2x) {
            width: $width-percent * 2;
            height: 200%;
            @include transform(scale(0.5));
            @if $radius != null {
                border-radius: $radius * 2;
            }
        }
        @include responsive(retina3x) {
            width: $width-percent * 3;
            height: 300%;
            @include transform(scale(0.33333));
            @if $radius != null {
                border-radius: $radius * 3;
            }
        }
        @include transform-origin(0 0);
    }
}

自己在用yo框架的时候，经常出现1px不显示或者显示不完整的情况，有时候是因为margin元素影响，有时候是因为行内元素影响，自己不明白是因为什么问题导致的，想问一下使用1px边线时有什么需要规避的属性或者布局方式吗？ 谢谢了

如果你或你的公司正在使用 Yo，可以在后面回复，我会将你们公司的LOGO加到用户列表里

使用webkit的私有属性实现的会不会兼容性，不好。虽然caniuse上面写的支持度很好。但是我们项目经理还是不让用。他说有很多坑。让我们用字符串截取。不知道有没有很多坑？

之前有过基础的div+css+js/jquery+html5的开发过程，现在想跟你学习一下这个Yo框架，但是不知道何从下手

目前技术栈为react+typescript 不知yo是否有@types文件？
在我看来yo和antd很像都是基于react的组件库，只是antd是typescript写的..

希望yo也能抓紧推出@types文件

mac os 下安装失败
AaronYuan@yuanxujiadeMacBook-Pro:~/Documents/Working/Practice/Yo⚡
⇒ npm install
npm WARN package.json yo@ No license field.
npm WARN deprecated [email protected]: Empty partial bug copied to CSS folder fixed
npm ERR! Darwin 14.3.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.6
npm ERR! npm v2.12.1

npm ERR! shasum check failed for /var/folders/x4/1f8vm8p550d67vd4lhdnpd180000gn/T/npm-18438-b1550815/registry.npmjs.org/node-notifier/-/node-notifier-4.2.3.tgz
npm ERR! Expected: 18ce4e6117980e23699b7595b68233cd37483fbf
npm ERR! Actual: fb9cd807f7db221a16649f3f65dc028079fa538a
npm ERR! From: https://registry.npmjs.org/node-notifier/-/node-notifier-4.2.3.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! /Users/AaronYuan/Documents/Working/Practice/Yo/npm-debug.log

node,gulp,gem都是全局安装好的，所以直接在yo目录下执行npm install 结果报错了，求支援，谢谢

我看到border的参数并没有规定写那条边框，我要怎么实现使用border 只写div的上边框啊

`$ npm run dev

[email protected] dev D:\vue-demo
node build/dev-server.js

Starting dev server...
ERROR Failed to compile with 2 errors17:51:02

error in ./src/components/Login.vue

Module build failed:
@include flexbox();
^
No mixin named flexbox
`

目前 .yo-list > .item 的 background-position 值一般为 left <length> bottom，这种“方向+距离”的写法在 微信安卓 webview （qq 浏览器 x5 内核）中失效。建议改为 [ [ left | right ] | <length> ] [ [ top | bottom] | <length> ] 这种写法。

比如：

background-position: left map-get($list, item-border-space) bottom;

修正为：

background-position: map-get($list, item-border-space) bottom;

应该是sass没有处理'/'为除法
-webkit-transform: scale(1/3);
transform: scale(1/3);

yo太过依赖ykit，想使用yo 和webpack 结合 非常困难

  "yo": {
        "path": "./src/yo-config"
    },

yo-search元件同名方法中的 input-height 参数设置无效，当传入 input-height 参数时，只改变了 yo-search 的行高，但是输入框的高度并没有进行对应的变化

这里除了提供scss源码给开发者自己做，好像没其他的亮点啊，很多其它UI库也都有scss或less源码的

"@qnpm/ykit-config-hy": "0.1.0",
"@qnpm/ykit-config-qunar": "0.1.0",

初学yo，使用yo-tip时报下面的错误，没找到$zip变量，我也没发现在哪里，请教。
Message:
src\styles\lib\widget\yo-tip.scss
Error: Undefined variable: "$tip".
on line 9 of src/styles/lib/widget/yo-tip.scss

padding: map-get($tip, padding);

---------------------^

<template lang="pug">
    header.ao-header(:class="{'ao-fixed':fixed}")
        h2.title(v-text="title")
        span.regret
            slot(name="left")
        span.affirm
            slot(name="right")
</template>

<script>
export default {
  name: 'ay-header',

  props: {
    fixed: Boolean,
    title: String
  }
}
</script>

<style lang="scss">
@import "../../../../styles/usage/core/reset";
@import "../../../../styles/usage/fragment/yo-header";

.ao-header{
  @include yo-header(
    $bgcolor:#FF5523,
    $border-color:#FF5523
  )
}
</style>

.ao-header 这个样式根本不产出 请问我是哪里用错了呢

你好，很喜欢你做的这个css框架，正在尝试中，想问下配合的kami会不会开源呢。

renderItem的时候将会自动生成<li class="item"></li>的内容，那么在renderItem里如果用content进行包含，那么就无法适应Yo的基本样式处理了。比如：目标应该生成
<div class="item"><div class="mark">标题</div><div class="flex">具体描述</div></div>
那么在renderItem里应该设置什么样的结构呢？

在弹性盒模型中，设置多行省略失效。

1、windows上搭建的node环境，ykit init yo 然后ykit server 的示例。list和detail无法异步加载。
2、能不能把http://ued.qunar.com/hy2/yo/demo开源出来
thanks!