代码节选自：yis-demo/src/pages/components/button/index.js

export default class ButtonDemo extends PageCore {
    render = () => (
        <Page>
            <Button icon='&#xe331;' label='Inbox' primary ripple />
        </Page>
    )
}

样式变量

    --button-border-radius: calc(0.2 * var(--unit));
    --button-large-height: calc(4.4 * var(--unit));
    --button-small-height: calc(3.2 * var(--unit));
    --button-large-width: 94vw;
    --button-large-font-size: var(--font-size-title);
    --button-small-font-size: var(--font-size-body);
    --button-inverse-active-color: rgba(0,0,0, .15);
    --button-toggle-font-size: calc(2 * var(--unit));

    --button-primary-color: var(--color-primary-main);
    --button-primary-color-active: var(--color-primary-deep);
    --button-primary-color-contrast: var(--color-primary-contrast);

    --button-accent-color: var(--color-accent-main);
    --button-accent-color-active: var(--color-accent-deep);
    --button-accent-color-contrast: var(--color-accent-contrast);

    --button-neutral-color: var( --palette-white);
    --button-neutral-color-active: color(var(--font-color-main-dark) a(20%));
    --button-neutral-color-contrast: var(--font-color-main-dark);

    --button-floating-font-size: var(--font-size-title);
    --button-floating-icon-size: calc(2 * var(--unit));
    --button-floating-height: calc(5.6 * var(--unit));
    --button-floating-mini-height: calc(4 * var(--unit));
    --button-floating-mini-font-size: calc(var(--button-floating-mini-height) / 2.25);

    --button-disabled-text-color: color(var( --palette-black) a(38%));
    --button-disabled-background-color: color(var( --palette-black) a(12%));
    --button-disabled-text-color-inverse: color(var( --palette-black) a(54%));
    --button-disabled-background-inverse: color(var( --palette-black) a(8%));

    // 方形按钮变量
    --button-squared-icon-margin: calc(0.6 * var(--unit));
    --button-squared-min-width: calc(9 * var(--unit));
    --button-squared-padding: 0 calc(1.2 * var(--unit));

参数

参数名	类型	必选	默认值	描述
label	string	√	无	显示的按钮名称
raised	boolean	×	false	是否凸出效果
ripple	boolean	×	false	水波纹效果
floating	boolean	×	false	圆形
primary	boolean	×	false	主色按钮
accent	boolean	×	false	强调色按钮
tag	string	×	button	渲染组件根元素标签
href	string	×	无	传入链接时使用 a 标签渲染元素
className	string	×	无	根节点附加类名
large	boolean	×	false	大按钮
small	boolean	×	false	小按钮
inverse	boolean	×	false	空心按钮
icon	string	×	无	iconfont 值
onTouchTap	function	×	function(){}	tap 事件处理函数
selfTargetOnly	boolean	×	true	只在当前元素为 target 时触发事件
stopPropagation	boolean	×	true	阻止事件冒泡
activeClassName	string	×	'yis-view-on'	点击的时候可以高亮类名

IconButton 组件

IconButton 组件是基于 Button 组件封装的用于展示 icon 图标的按钮，并且默认配置了 ripple 效果 。

参数

参数名	类型	必选	默认值	描述
label	string	√	无	显示的按钮名称
raised	boolean	×	false	是否凸出效果
primary	boolean	×	false	主色按钮
accent	boolean	×	false	强调色按钮
tag	string	×	button	渲染组件根元素标签
className	string	×	无	根节点附加类名
inverse	boolean	×	false	空心按钮
icon	string	×	无	iconfont 值
onTouchTap	function	×	function(){}	tap 事件处理函数
selfTargetOnly	boolean	×	true	只在当前元素为 target 时触发事件
stopPropagation	boolean	×	true	阻止事件冒泡
activeClassName	string	×	'yis-view-on'	点击的时候可以高亮类名