Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitdba1398

Browse files
add notification toast
1 parent97a6e1a commitdba1398

File tree

6 files changed

+154
-1
lines changed

6 files changed

+154
-1
lines changed
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import{shallow}from'vue-test-utils';
2+
importCaNotificationToastfrom'./CaNotificationToast.vue';
3+
4+
describe('CaNotificationToast',()=>{
5+
test('is a Vue instance',()=>{
6+
constwrapper=shallow(CaNotificationToast);
7+
expect(wrapper.isVueInstance()).toBeTruthy();
8+
});
9+
})
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<divdata-notificationclass="bx--toast-notification":class="dynamicClass"role="alert">
3+
<divclass="bx--toast-notification__details">
4+
<h3class="bx--toast-notification__title">{{title}}</h3>
5+
<pclass="bx--toast-notification__subtitle">{{subtitle}}</p>
6+
<pclass="bx--toast-notification__caption">{{caption}}</p>
7+
</div>
8+
<buttondata-notification-btnclass="bx--toast-notification__close-button"type="button">
9+
<svgclass="bx--toast-notification__icon"aria-label="close"width="10"height="10"viewBox="0 0 10 10"fill-rule="evenodd">
10+
<pathd="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
11+
</svg>
12+
</button>
13+
</div>
14+
15+
</template>
16+
17+
<script>
18+
exportdefault {
19+
name:'ca-notification-toast',
20+
props: {
21+
error: {
22+
type:Boolean,
23+
default:false
24+
},
25+
info: {
26+
type:Boolean,
27+
default:false
28+
},
29+
success: {
30+
type:Boolean,
31+
default:false
32+
},
33+
warning: {
34+
type:Boolean,
35+
default:false
36+
},
37+
title: {
38+
type:String,
39+
default:''
40+
},
41+
subtitle: {
42+
type:String,
43+
default:''
44+
},
45+
caption: {
46+
type:String,
47+
default:''
48+
}
49+
},
50+
computed: {
51+
dynamicClass () {
52+
return {
53+
'bx--toast-notification--error':this.error,
54+
'bx--toast-notification--info':this.info,
55+
'bx--toast-notification--success':this.success,
56+
'bx--toast-notification--warning':this.warning,
57+
}
58+
}
59+
}
60+
};
61+
</script>
62+
63+
<style></style>
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
importCaNotificationToastfrom'./CaNotificationToast.vue';
2+
3+
CaNotificationToast.install=(Vue)=>{
4+
Vue.component(CaNotificationToast.name,CaNotificationToast);
5+
};
6+
7+
exportdefaultCaNotificationToast;

‎components/components.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export { default as CaList } from './CaList';
1515
export{defaultasCaLoading}from'./CaLoading';
1616
export{defaultasCaModal}from'./CaModal';
1717
export{defaultasCaNotificationInline}from'./CaNotificationInline';
18+
export{defaultasCaNotificationToast}from'./CaNotificationToast';
1819
export{defaultasCaNumberInput}from'./CaNumberInput';
1920
export{defaultasCaOverflowMenu}from'./CaOverflowMenu';
2021
export{defaultasCaPagination}from'./CaPagination';
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import{storiesOf}from'@storybook/vue';
2+
3+
storiesOf('Notification/toast',module)
4+
.add('info',()=>({
5+
template:`
6+
<ca-notification-toast
7+
title="this is title"
8+
subtitle="this is subtitle"
9+
caption="this is caption"
10+
info
11+
>
12+
</ca-notification-toast>
13+
`,
14+
})).add('error',()=>({
15+
template:`
16+
<ca-notification-toast
17+
title="this is title"
18+
subtitle="this is subtitle"
19+
caption="this is caption"
20+
error
21+
>
22+
</ca-notification-toast>
23+
`,
24+
})).add('success',()=>({
25+
template:`
26+
<ca-notification-toast
27+
title="this is title"
28+
subtitle="this is subtitle"
29+
caption="this is caption"
30+
success
31+
>
32+
</ca-notification-toast>
33+
`,
34+
}))
35+
.add('warning',()=>({
36+
template:`
37+
<ca-notification-toast
38+
title="this is title"
39+
subtitle="this is subtitle"
40+
caption="this is caption"
41+
warning
42+
>
43+
</ca-notification-toast>
44+
`,
45+
}));
Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import{storiesOf}from'@storybook/vue';
22

33
storiesOf('Notification/inline',module)
4-
.add('Default',()=>({
4+
.add('info',()=>({
55
template:`
66
<ca-notification-inline
77
title="this is title"
@@ -10,4 +10,32 @@ storiesOf('Notification/inline', module)
1010
>
1111
</ca-notification-inline>
1212
`,
13+
})).add('error',()=>({
14+
template:`
15+
<ca-notification-inline
16+
title="this is title"
17+
subtitle="this is subtitle"
18+
error
19+
>
20+
</ca-notification-inline>
21+
`,
22+
})).add('success',()=>({
23+
template:`
24+
<ca-notification-inline
25+
title="this is title"
26+
subtitle="this is subtitle"
27+
success
28+
>
29+
</ca-notification-inline>
30+
`,
31+
}))
32+
.add('warning',()=>({
33+
template:`
34+
<ca-notification-inline
35+
title="this is title"
36+
subtitle="this is subtitle"
37+
warning
38+
>
39+
</ca-notification-inline>
40+
`,
1341
}));

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp