sunmao-ui/packages/runtime/example/delete-button/index.html
2021-08-31 14:50:32 +08:00

103 lines
3.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>meta-ui runtime example: delete button</title>
</head>
<body>
<div id="root"></div>
<script type="module">
import renderApp from '../../src/main.tsx';
renderApp({
version: 'example/v1',
metadata: {
name: 'delete-button',
description: 'delete button example',
},
spec: {
components: [
{
id: 'del_btn',
type: 'plain/v1/button',
properties: {
text: {
raw: `{{ del_btn.count > 0 ? 'CLICK TO CONFIRM' : '**DELETE** Button' }}`,
format: 'md',
},
},
traits: [
{
type: 'core/v1/state',
properties: {
key: 'count',
initialValue: 0,
},
},
{
type: 'core/v1/event',
properties: {
events: [
{
event: 'click',
componentId: '$utils',
method: {
name: 'alert',
parameters: "{{ 'deleted!' }}",
},
wait: {},
disabled: '{{ del_btn.count === 0 }}',
},
{
event: 'click',
componentId: 'del_btn',
method: {
name: 'setValue',
parameters: {
key: 'count',
value:
'{{ del_btn.count > 0 ? 0 : del_btn.count + 1 }}',
},
},
wait: {},
disabled: false,
},
{
event: 'click',
componentId: 'del_btn',
method: {
name: 'setValue',
parameters: {
key: 'count',
value: '0',
},
},
wait: {
type: 'delay',
time: 2000,
},
disabled: '{{ del_btn.count === 0 }}',
},
],
},
},
],
},
{
id: 'debug_text',
type: 'core/v1/text',
properties: {
value: {
raw: `{{ del_btn.value + '---' + del_btn.count }}`,
format: 'md',
},
},
traits: [],
},
],
},
});
</script>
</body>
</html>