MatBlazor/src/MatBlazor.Demo/Demo/DemoDialog.razor at 059947ab0f1b8a0d1a97ce2c9353885c8fd84a97 · SamProf/MatBlazor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<DocMatDialog></DocMatDialog>
<DocMatDialogTitle Secondary="true"></DocMatDialogTitle>
<DocMatDialogContent Secondary="true"></DocMatDialogContent>
<DocMatDialogActions Secondary="true"></DocMatDialogActions>

<h5 class="mat-h5">Example</h5>

<style>
    .demo-mat-dialog-container li { padding: 5px; }
</style>

<DemoContainer Class="demo-mat-dialog-container">
    <Content>
        <ol>
            <li>
                <MatTextField Label="What's your name?" @bind-Value="@name"></MatTextField>
            </li>
            <li>
                <MatButton OnClick="@OpenDialog" Raised="true">Pick one</MatButton>
            </li>
            @if (animal != null)
            {
                <li>You chose: @animal</li>
            }
        </ol>
        <MatDialog @bind-IsOpen="@dialogIsOpen">
            <MatDialogTitle>Hi @name</MatDialogTitle>
            <MatDialogContent>
                <p>What's your favorite animal?</p>
                <MatSelect TValue="string" Label="Title">
                    <MatOptionString ></MatOptionString>
                    <MatOptionString Value="dr">Dr.</MatOptionString>
                    <MatOptionString Value="prof">Prof.</MatOptionString>
                </MatSelect>
                <MatTextField @bind-Value="@dialogAnimal"></MatTextField>


            </MatDialogContent>
            <MatDialogActions>
                <MatButton OnClick="@(e => { dialogIsOpen = false; })">No Thanks</MatButton>
                <MatButton OnClick="@OkClick">OK</MatButton>
            </MatDialogActions>
        </MatDialog>

        @code
        {
            bool dialogIsOpen = false;
            string name = null;
            string animal = null;
            string dialogAnimal = null;

            void OpenDialog()
            {
                dialogAnimal = null;
                dialogIsOpen = true;
            }

            void OkClick()
            {
                animal = dialogAnimal;
                dialogIsOpen = false;
            }

        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <ol>
            <li>
                <MatTextField Label=""What's your name?"" @bind-Value=""@name""></MatTextField>
            </li>
            <li>
                <MatButton OnClick=""@OpenDialog"" Raised=""true"">Pick one</MatButton>
            </li>
            @if (animal != null)
            {
                <li>You chose: @animal</li>
            }
        </ol>
        <MatDialog @bind-IsOpen=""@dialogIsOpen"">
            <MatDialogTitle>Hi @name</MatDialogTitle>
            <MatDialogContent>
                <p>What's your favorite animal?</p>
                <MatSelect TValue=""string"" Label=""Title"">
                    <MatOptionString ></MatOptionString>
                    <MatOptionString Value=""dr"">Dr.</MatOptionString>
                    <MatOptionString Value=""prof"">Prof.</MatOptionString>
                </MatSelect>
                <MatTextField @bind-Value=""@dialogAnimal""></MatTextField>


            </MatDialogContent>
            <MatDialogActions>
                <MatButton OnClick=""@(e => { dialogIsOpen = false; })"">No Thanks</MatButton>
                <MatButton OnClick=""@OkClick"">OK</MatButton>
            </MatDialogActions>
        </MatDialog>

        @code
        {
            bool dialogIsOpen = false;
            string name = null;
            string animal = null;
            string dialogAnimal = null;

            void OpenDialog()
            {
                dialogAnimal = null;
                dialogIsOpen = true;
            }

            void OkClick()
            {
                animal = dialogAnimal;
                dialogIsOpen = false;
            }

        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>