toast & snackbar

example/Chip.san

@@ -0,0 +1,56 @@
+<template>
+    <div class="chip-demo">
+        <san-chip disabled>default chip</san-chip>
+        <san-chip showDelete on-chipClick="handleClick" on-delete="handleDelete($event)">delete chip</san-chip>
+        <san-chip>
+            <san-avatar size="32" src="http://boscdn.bpc.baidu.com/movie/assets/avatar1.jpeg"></san-avatar>
+            avatar chip
+        </san-chip>
+        <san-chip>
+            <san-avatar size="32" icon="mood"></san-avatar>
+            icon avatar chip
+        </san-chip>
+        <san-chip color="#f93" backgroundColor="green">
+            <san-avatar size="32" color="#f93" backgroundColor="#2c9eff">mb</san-avatar>
+            custom chip
+        </san-chip>
+
+    </div>
+
+</template>
+
+<script>
+    import Avatar from '../src/Avatar';
+    import Chip from '../src/Chip';
+
+    import '../src/Avatar/Avatar.styl';
+    import '../src/Chip/Chip.styl';
+
+    export default {
+        components: {
+            'san-avatar': Avatar,
+            'san-chip': Chip,
+        },
+
+        handleDelete(e) {
+            e.stopPropagation();
+            console.log('你点击了删除按钮')
+        },
+        handleClick() {
+            console.log('点击了chip')
+        }
+    };
+
+</script>
+
+<style>
+    .chip-demo {
+        display: flex;
+        flex-flow: row wrap;
+    }
+
+    .sm-chip {
+        margin: 5px;
+    }
+
+</style>

example/Toast.san

@@ -0,0 +1,112 @@
+<template>
+    <div>
+        <h3>
+            Toast
+        </h3>
+        <section class="demo-toast-row">
+            <label>位置</label>：
+            <select value="{=toastPosition=}">
+                <option value="leftTop">leftTop</option>
+                <option value="rightTop">rightTop</option>
+                <option value="leftBottom">leftBottom</option>
+                <option value="rightBottom">rightBottom</option>
+            </select>
+        </section>
+
+        <section class="demo-toast-row">
+            <san-button
+                variants="raised info"
+                on-click="showToast">
+                open Toast
+            </san-button>
+        </section>
+
+        <san-toast
+            message="稳住，我们能赢！"
+            position="{{toastPosition}}"
+            duration="{{duration}}"
+            open="{{toast}}"></san-toast>
+
+        <h3>
+            Snackbar
+        </h3>
+        <section class="demo-toast-row">
+            <label>位置</label>：
+            <select value="{=snackbarPosition=}">
+                <option value="leftTop">leftTop</option>
+                <option value="rightTop">rightTop</option>
+                <option value="leftBottom">leftBottom</option>
+                <option value="rightBottom">rightBottom</option>
+            </select>
+        </section>
+
+        <section class="demo-toast-row">
+            <san-button
+                variants="raised info"
+                on-click="showSnackbar">
+                open snackbar
+            </san-button>
+        </section>
+
+        <san-toast
+            message="稳住，我们赢不了"
+            position="{{snackbarPosition}}"
+            open="{{snackbar}}">
+            <san-button variants="primary" on-click="handleActionClick($event)">
+                {{action}}
+            </san-button>
+        </san-toast>
+
+    </div>
+</template>
+
+<script>
+
+    import Button from '../src/Button';
+    import Toast from '../src/Toast';
+    import '../src/Button/Button.styl';
+    import '../src/Toast/Toast.styl';
+
+    export default {
+
+        components: {
+            'san-button': Button,
+            'san-toast': Toast
+        },
+
+        initData() {
+            return {
+                toastPosition: 'rightBottom',
+                snackbarPosition: 'rightTop',
+                duration: 1000,
+                action: '投降'
+            };
+        },
+
+        showToast() {
+            this.data.set('toast', true);
+
+        },
+
+        showSnackbar() {
+            this.data.set('snackbar', true);
+        },
+
+        handleActionClick(){
+            console.log('action is clicked');
+            this.data.set('snackbar', false);
+        }
+
+    }
+
+</script>
+
+<style>
+    .demo-toast-row {
+        padding: 1rem 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+    }
+</style>

example/routes.js

@@ -25,6 +25,8 @@ import Switch from './Switch.san';
 import SubHeader from './SubHeader.san';
 import Radio from './Radio.san';
 import ExpansionPanel from './ExpansionPanel.san';
+import Toast from './Toast.san';
+import Chip from './Chip.san';
 
 let routes = {
     '/': Main,
@@ -48,7 +50,10 @@ let routes = {
     '/Radio': Radio,
     '/Switch': Switch,
     '/subHeader': SubHeader,
-    '/ExpansionPanel': ExpansionPanel
+    '/ExpansionPanel': ExpansionPanel,
+    '/Snackbar & Toast': Toast,
+    '/Chip': Chip
+
 };
 
 export default routes;

src/Chip/Chip.js

@@ -0,0 +1,68 @@
+/**
+ * @file Chip
+ * @author zhangsiyuan(zhangsiyuan@baidu.com)
+ */
+
+import {create} from '../common/util/cx';
+import css from '../common/util/css';
+import san from 'san';
+import Icon from '../Icon';
+import '../Icon/Icon.styl';
+
+const cx = create('chip');
+
+export default san.defineComponent({
+    components: {
+        'san-icon': Icon
+    },
+    template: `
+        <div 
+            class="{{computedClassName}}" 
+            style="{{wrapperStyle}}"
+            on-click="handleClick($event)">
+
+            <slot></slot>
+
+            <san-icon 
+                on-click="handleDelete($event)" 
+                san-if=" showDelete && !this.data.get('disabled')" 
+                class="${cx.getPartClassName('delete-icon')}" 
+                size="20">
+                close
+            </san-icon>
+        </div>
+     `,
+
+    initData() {
+        return {
+            showDelete: false,
+            disabled: false
+        };
+    },
+    handleClick(e) {
+        this.fire('chipClick', e);
+    },
+    handleDelete(e) {
+        this.fire('delete', e);
+    },
+    computed: {
+        computedClassName() {
+            const disabled = this.data.get('disabled');
+            return cx(this)
+                .addStates({
+                    disabled,
+                    normal: !disabled
+                })
+                .build();
+        },
+        wrapperStyle() {
+            const color = this.data.get('color') ? this.data.get('color') : null;
+            const backgroundColor = this.data.get('backgroundColor') ? this.data.get('backgroundColor') : null;
+            return css({
+                color,
+                backgroundColor
+            });
+        }
+    }
+});
+

src/Chip/Chip.styl

@@ -0,0 +1,45 @@
+/**
+ * @file Chip 样式
+ * @author zhangsiyuan (zhangsiyuan@baidu.com)
+ */
+
+@require '../css/variable.styl'
+@require '../css/func.styl'
+
+textColor = #000
+alternateTextColor = invert(textColor)
+
+.{$san-class-prefix}-chip
+    border-radius 16px
+    line-height 32px
+    white-space nowrap
+    display: inline-flex
+    align-items center
+    padding 0 12px
+    padding
+    cursor default
+    color: rgba(textColor, 87%)
+    background-color: darken(alternateTextColor, 12%)
+
+    .sm-avatar:first-child
+        margin-left -12px
+        margin-right: 6px
+
+    .state-normal&:active
+        box-shadow: 0 1px 6px rgba(#000, 12%), 0 1px 4px rgba(#000, 12%)
+
+    .state-normal&:hover
+        background-color rgb(206, 206, 206, 24%)
+        cursor: pointer
+
+        .{$san-class-prefix}-chip-delete-icon
+            color: rgba(rgba(alternateTextColor, 54%), 40%)
+
+    &-delete-icon
+        color: rgba(alternateTextColor, 54%)
+        border-radius 10px
+        margin-right: -6px
+        margin-left 6px
+        background-color: darken(alternateTextColor, 36%)
+
+

src/Chip/index.js

@@ -0,0 +1,6 @@
+/**
+ * @file Chip
+ * @author zhangsiyuan(zhangsiyuan@baidu.com)
+ */
+
+export default from './Chip';