\r\n #\r\n 归属\r\n
\nThis Code of Conduct is adapted from the Contributor Covenant, version 1.4, available at https://contributor-covenant.org/version/1/4
\n" +} \ No newline at end of file From bb46b5aec1652236eaf17adc26604f2a1f01352d Mon Sep 17 00:00:00 2001 From: masastack-opensource <82495610+masastack-opensource@users.noreply.github.com> Date: Wed, 8 Dec 2021 12:35:57 +0800 Subject: [PATCH 032/191] New translations meet-the-team.zh-CN.json (English) --- en/en/meet-the-team.zh-CN.json | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 en/en/meet-the-team.zh-CN.json diff --git a/en/en/meet-the-team.zh-CN.json b/en/en/meet-the-team.zh-CN.json new file mode 100644 index 0000000000..c81bf59aab --- /dev/null +++ b/en/en/meet-the-team.zh-CN.json @@ -0,0 +1,5 @@ +{ + "Order": 0, + "Title": "认识开发团队", + "Html": "\r\n\r\n #\r\n 认识开发团队\r\n
\nMASA Blazor 不是 一个个人秀。 我们有一个非常活跃和投入的团队，不断努力为开发人员带来更好的体验。 请记住，下面并不是所有有助于使 MASA Blazor 变得更强的所有人的详尽列表。 感谢您 的支持，感谢您使用 MASA Blazor ！
\n\r\n\r\n #\r\n 公司\r\n
\nMASA Blazor（公司）是一家全职开源企业。 您可以通过在 GitHub 上赞助 MASA Blazor 来支持他们。
\n\n\n
\n\r\n \n\t\t\n
\n\t\t\n
\n\n
\n\t\t\n \n
\n \n
\n \n
\n \n \n \n \n
\n \n \n \n \n
\n CEO @ Vuetify
\n Fort Worth, TX, USA
\n \n
\n \n English\n
\n \n \n\t\t\n
\n
\n \n \n
\n \n
\n \n
\n \n \n \n \n
\n \n \n \n \n
\n COO @ Vuetify
\n Fort Worth, TX, USA
\n \n
\n \n English\n
\n \n \r\n #\r\n 核心团队\r\n
\n核心开发团队是开放源码开发人员，帮助引导 MASA Blazor 及其生态系统的方向。
\n\n\n
\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n \n \n
\n \n
\n \n
\n \n \n \n \n
\n \n \n \n \n \n
\n Melbourne, Australia
\n \n
\n \n English\n
\n \n \n \n
\n
\n \n \n
\n \n
\n \n
\n \n \n \n \n
\n \n \n \n \n \n
\n Malmö, Sweden
\n \n
\n \n Swedish\n
• \n \n English\n
\n \n \n \n
\n
\n \n \n
\n \n
\n \n
\n \n \n \n \n
\n \n \n \n \n \n
\n Warsaw, Poland
\n \n
\n \n Polish\n
• \n \n English\n
\n \n \n \n
\n
\n \n \n
\n \n
\n \n
\n \n \n \n \n
\n \n \n \n \n \n
\n Rochester, NY, USA
\n \n
\n \n English\n
\n \n \n \n
\n
\n \n \n
\n \n
\n \n
\n \n \n \n \n
\n \n \n \n \n \n
\n Wisconsin, USA
\n \n
\n \n English\n
\n \n \n \n
\n
\n
\n
\n
\n \n \n \n \n
\n \n \n \n \n \n \r\n \r\n @for (var i = 0; i < 3; i++)\r\n {\r\n \r\n \r\n One of three columns\r\n \r\n \r\n }\r\n \r\n \r\n",
+ "Type": "Demos.Components.Grid.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 1,
+ "Name": "align",
+ "Title": "垂直对齐",
+ "Description": "\r\n @for (int i = 1; i <= 2; i++)\r\n {\r\n var n = i + 1;\r\n \r\n @for (int j = 0; j < n + 1; j++)\r\n {\r\n var k = j + 1;\r\n \r\n \r\n @($\"{ k } of { n + 1 }\")\r\n \r\n \r\n }\r\n \r\n }\r\n ",
+ "Type": "Demos.Components.Grid.props.BreakpointSizing",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "justify",
+ "Title": "水平对齐",
+ "Description": "\r\n @foreach (var j in _justify)\r\n {\r\n \r\n @for (int i = 0; i < 2; i++)\r\n {\r\n \r\n \r\n One of two columns\r\n \r\n \r\n }\r\n \r\n }\r\n \r\n\r\n@code{\r\n private string[] _justify = new string[]\r\n {\r\n \"start\",\r\n \"center\",\r\n \"end\",\r\n \"space-around\",\r\n \"space-between\"\r\n };\r\n}",
+ "Type": "Demos.Components.Grid.props.Justify",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "noGutters",
+ "Title": "无间隔",
+ "Description": "\r\n \r\n \r\n \r\n .col-12 .col-sm-6 .col-md-8\r\n \r\n \r\n \r\n \r\n .col-6 .col-md-4\r\n \r\n \r\n \r\n ",
+ "Type": "Demos.Components.Grid.props.NoGutters",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "offset",
+ "Title": "偏移",
+ "Description": "\r\n \r\n @for (int index = 0; index < 2; index++)\r\n {\r\n \r\n \r\n col-6\r\n \r\n \r\n }\r\n \r\n \r\n @for (int index = 0; index < 3; index++)\r\n {\r\n \r\n \r\n col\r\n \r\n \r\n }\r\n \r\n ",
+ "Type": "Demos.Components.Grid.misc.RowAndColumnBreakpoints",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 5,
+ "Name": "spacers",
+ "Title": "空白",
+ "Description": "\r\n \r\n \r\n \r\n .col\r\n \r\n \r\n \r\n \r\n .col\r\n \r\n \r\n \r\n \r\n \r\n \r\n .col-auto\r\n \r\n \r\n \r\n \r\n .col\r\n \r\n \r\n \r\n \r\n .col-md-5\r\n \r\n \r\n \r\n ",
+ "Type": "Demos.Components.Grid.misc.Spacers",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 5,
+ "Name": "uniqueLayouts",
+ "Title": "独特的布局",
+ "Description": "\r\n \r\n \r\n \r\n .col-12 .col-md-8\r\n \r\n \r\n \r\n \r\n .col-6 .col-md-4\r\n \r\n \r\n \r\n\r\n \r\n @for (int index = 0; index < 3; index++)\r\n {\r\n \r\n \r\n .col-6 .col-md-4\r\n \r\n \r\n }\r\n \r\n\r\n \r\n @for (int index = 0; index < 2; index++)\r\n {\r\n \r\n \r\n .col-6\r\n \r\n \r\n }\r\n \r\n ",
+ "Type": "Demos.Components.Grid.misc.UniqueLayouts",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 5,
+ "Name": "variableContentWidth",
+ "Title": "可变内容宽度",
+ "Description": "\r\n \r\n \r\n \r\n 1 of 3\r\n \r\n \r\n \r\n \r\n Variable width content\r\n \r\n \r\n \r\n \r\n 3 of 3\r\n \r\n \r\n \r\n \r\n \r\n \r\n 1 of 3\r\n \r\n \r\n \r\n \r\n Variable width content\r\n \r\n \r\n \r\n \r\n 3 of 3\r\n \r\n \r\n \r\n ",
+ "Type": "Demos.Components.Grid.misc.VariableContentWidth",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cover": "https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg",
+ "Cols": 1,
+ "Related": [
+ "/styles/flex",
+ "/features/breakpoints",
+ "/styles/display"
+ ],
+ "Subtitle": "网格",
+ "Title": "Grid system",
+ "Type": "网格"
+ },
+ {
+ "Desc": "\r\n \r\n \r\n \r\n mdi-format-align-left \r\n \r\n \r\n mdi-format-align-center \r\n \r\n \r\n mdi-format-align-right \r\n \r\n \r\n mdi-format-align-justify \r\n \r\n \r\n \r\n \r\n \r\n \r\n mdi-format-bold \r\n \r\n \r\n mdi-format-italic \r\n \r\n \r\n mdi-format-underline \r\n \r\n \r\n mdi-format-color-fill \r\n \r\n \r\n \r\n \r\n \r\n \r\n mdi-format-align-left \r\n \r\n \r\n mdi-format-align-center \r\n \r\n \r\n mdi-format-align-right \r\n \r\n \r\n mdi-format-align-justify \r\n \r\n \r\n \r\n \r\n \r\n \r\n mdi-format-align-left \r\n \r\n \r\n mdi-format-align-center \r\n \r\n \r\n mdi-format-align-right \r\n \r\n \r\n mdi-format-align-justify \r\n \r\n \r\n \r\n \r\n \r\n \r\n Left\r\n \r\n \r\n Center\r\n \r\n \r\n Right\r\n \r\n \r\n Justify\r\n \r\n \r\n \r\n \r\n \r\n \r\n Left\r\n \r\n mdi-format-align-left\r\n \r\n \r\n \r\n Center\r\n \r\n mdi-format-align-center\r\n \r\n \r\n \r\n Right\r\n \r\n mdi-format-align-right\r\n \r\n \r\n \r\n Justify\r\n \r\n mdi-format-align-justify\r\n \r\n \r\n \r\n \r\n \r\n\r\n@code {\r\n StringNumber text = \"center\";\r\n StringNumber icon = \"justify\";\r\n StringNumber toggleNone;\r\n StringNumber toggleOne = 0;\r\n StringNumber toggleExclusive = 2;\r\n List toggleMultiple = new() { 0, 1, 2 };\r\n}\r\n",
+ "Type": "Demos.Components.Groups.children.ButtonGroup.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 1,
+ "Name": "mandatory",
+ "Title": "必填项",
+ "Description": "\r\n \r\n \r\n \r\n \r\n \r\n \r\n mdi-format-align-left \r\n \r\n \r\n mdi-format-align-center \r\n \r\n \r\n mdi-format-align-right \r\n \r\n \r\n mdi-format-align-justify \r\n \r\n \r\n \r\n \r\n \r\n\r\n@code {\r\n StringNumber value;\r\n}",
+ "Type": "Demos.Components.Groups.children.ButtonGroup.props.Mandatory",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 2,
+ "Name": "multiple",
+ "Title": "多选",
+ "Description": "\r\n \r\n \r\n \r\n \r\n \r\n \r\n mdi-format-align-left \r\n \r\n \r\n mdi-format-align-center \r\n \r\n \r\n mdi-format-align-right \r\n \r\n \r\n mdi-format-align-justify \r\n \r\n \r\n \r\n Values: [@(string.Join(',', values))]\r\n \r\n \r\n \r\n \r\n\r\n@code {\r\n List values = new();\r\n}",
+ "Type": "Demos.Components.Groups.children.ButtonGroup.props.Multiple",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 3,
+ "Name": "rounded",
+ "Title": "圆角",
+ "Description": "\r\n \r\n \r\n \r\n \r\n \r\n \r\n mdi-format-align-left \r\n \r\n \r\n mdi-format-align-center \r\n \r\n \r\n mdi-format-align-right \r\n \r\n \r\n mdi-format-align-justify \r\n \r\n \r\n \r\n \r\n \r\n\r\n@code {\r\n StringNumber value = \"left\";\r\n}",
+ "Type": "Demos.Components.Groups.children.ButtonGroup.props.Rounded",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 4,
+ "Name": "toolbar",
+ "Title": "工具栏(TODO:OverflowButton)",
+ "Description": "\r\n @* TODO: v-overflow-btn *@\r\n @* \r\n \r\n mdi-format-bold \r\n \r\n\r\n \r\n mdi-format-italic \r\n \r\n\r\n \r\n mdi-format-underline \r\n \r\n\r\n \r\n mdi-format-color-fill \r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n mdi-format-align-left \r\n \r\n\r\n \r\n mdi-format-align-center \r\n \r\n\r\n \r\n mdi-format-align-right \r\n \r\n\r\n \r\n mdi-format-align-justify \r\n \r\n \r\n \r\n\r\n@code {\r\n\r\n List dropdownFont = new() {\"Arial\", \"Calibri\", \"Courier\", \"Verdana\"};\r\n List dropdownEdit = new() {\"100%\", \"75%\", \"50%\", \"0%\"};\r\n StringNumber toggleExclusive = 2;\r\n List toggleMultiple = new() {1, 2, 3};\r\n\r\n}",
+ "Type": "Demos.Components.Groups.children.ButtonGroup.misc.Toolbar",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 5,
+ "Name": "wysiwyg",
+ "Title": "WYSIWYG/所见即所得",
+ "Description": "\r\n \r\n \r\n\r\n \r\n \r\n \r\n mdi-format-italic \r\n \r\n\r\n \r\n mdi-format-bold \r\n \r\n\r\n \r\n mdi-format-underline \r\n \r\n\r\n \r\n \r\n \r\n mdi-format-color-text\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n mdi-format-align-center \r\n \r\n\r\n \r\n mdi-format-align-left \r\n \r\n\r\n \r\n mdi-format-align-right \r\n \r\n \r\n \r\n\r\n \r\n \r\n @foreach (var n in numbers)\r\n {\r\n @n \r\n }\r\n\r\n \r\n\r\n \r\n @foreach (var l in letters)\r\n {\r\n @l \r\n }\r\n \r\n \r\n\r\n\r\n\r\n@code {\r\n\r\n StringNumber alignment = 1;\r\n List formatting = new();\r\n List numbers = new() {1, 2, 3, 4, 5, 6, 7, 8, 9, 0};\r\n List letters = \"q w e r t y u i o p\".Split(\" \").ToList();\r\n string value = \"Toggle button requirements.\\r\\rHave at least three toggle buttons in a group\\rLabel buttons with text, an icon, or\";\r\n\r\n}",
+ "Type": "Demos.Components.Groups.children.ButtonGroup.misc.WYSIWYG",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cover": "https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/ButtonGroup.svg",
+ "Cols": 1,
+ "Related": [
+ "/components/buttons",
+ "/components/icons",
+ "/components/selection-controls"
+ ],
+ "Subtitle": "按钮组",
+ "Title": "Button groups",
+ "Type": "按钮组"
+ },
+ {
+ "Desc": "\r\n \r\n \r\n \r\n \r\n mdi-content-save-cog-outline \r\n \r\n\r\n \r\n mdi-check-bold \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n@code{\r\n private string[] _tags = new string[]\r\n {\r\n \"Work\",\r\n \"Home Improvement\",\r\n \"Vacation\",\r\n \"Food\",\r\n \"Drawers\",\r\n \"Shopping\",\r\n \"Art\",\r\n \"Tech\",\r\n \"Creative Writing\"\r\n };\r\n}",
+ "Type": "Demos.Components.Groups.children.ChipGroup.props.Column",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "filterResults",
+ "Title": "过滤结果",
+ "Description": "\r\n \r\n \r\n mdi-close \r\n \r\n Filter results \r\n \r\n\r\n \r\n \r\n \r\n Elevator\r\n \r\n \r\n Washer / Dryer\r\n \r\n \r\n Fireplace\r\n \r\n \r\n Wheelchair access\r\n \r\n \r\n Dogs ok\r\n \r\n \r\n Cats ok\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Snowy Rock Place\r\n \r\n \r\n Honeylane Circle\r\n \r\n \r\n Donna Drive\r\n \r\n \r\n Elaine Street\r\n \r\n \r\n Court Street\r\n \r\n \r\n Kennedy Park\r\n \r\n \r\n \r\n\r\n\r\n@code {\r\n\r\n List amenities = new() {1, 4};\r\n List neighborhoods = new() {1};\r\n\r\n}",
+ "Type": "Demos.Components.Groups.children.ChipGroup.props.FilterResults",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "mandatory",
+ "Title": "必填项",
+ "Description": "\r\n \r\n \r\n \r\n @foreach (var tag in _tags)\r\n {\r\n \r\n @tag\r\n \r\n }\r\n \r\n \r\n \r\n \r\n\r\n@code{\r\n private string[] _tags = new string[]\r\n {\r\n \"Work\",\r\n \"Home Improvement\",\r\n \"Vacation\",\r\n \"Food\",\r\n \"Drawers\",\r\n \"Shopping\",\r\n \"Art\",\r\n \"Tech\",\r\n \"Creative Writing\"\r\n };\r\n}",
+ "Type": "Demos.Components.Groups.children.ChipGroup.props.Mandatory",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "multiple",
+ "Title": "多选",
+ "Description": "\r\n \r\n \r\n \r\n @foreach (var tag in _tags)\r\n {\r\n \r\n @tag\r\n \r\n }\r\n \r\n \r\n \r\n \r\n\r\n@code{\r\n private string[] _tags = new string[]\r\n {\r\n \"Work\",\r\n \"Home Improvement\",\r\n \"Vacation\",\r\n \"Food\",\r\n \"Drawers\",\r\n \"Shopping\",\r\n \"Art\",\r\n \"Tech\",\r\n \"Creative Writing\"\r\n };\r\n}",
+ "Type": "Demos.Components.Groups.children.ChipGroup.props.Multiple",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "productCard",
+ "Title": "产品卡",
+ "Description": "\r\n \r\n \r\n\r\n \r\n Our blouses are available in 8 colors. You can custom order a built-in arch support for any of the models.\r\n \r\n\r\n \r\n Select size\r\n\r\n \r\n @foreach (var size in sizes)\r\n {\r\n \r\n @size\r\n \r\n }\r\n \r\n \r\n\r\n \r\n \r\n Add to Cart\r\n \r\n \r\n\r\n\r\n@code {\r\n\r\n StringNumber selection = \"08\";\r\n\r\n List sizes = new() {\"04\", \"06\", \"08\", \"10\", \"12\", \"14\"};\r\n\r\n}",
+ "Type": "Demos.Components.Groups.children.ChipGroup.misc.ProductCard",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 1,
+ "Name": "toothbrushCard",
+ "Title": "牙刷卡",
+ "Description": "\r\n \r\n \r\n\r\n \r\n Our company takes pride in making handmade brushes.\r\n Our toothbrushes are available in 4 different bristel types, from extra soft to hard.\r\n \r\n\r\n \r\n Select type\r\n\r\n \r\n Extra Soft \r\n Soft \r\n Medium \r\n Hard \r\n \r\n \r\n\r\n \r\n \r\n Add to Cart\r\n \r\n \r\n\r\n\r\n@code {\r\n\r\n StringNumber selection = 2;\r\n\r\n}",
+ "Type": "Demos.Components.Groups.children.ChipGroup.misc.ToothbrushCard",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cover": "https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Chip.svg",
+ "Cols": 1,
+ "Related": [
+ "/components/chips",
+ "/components/slide-groups",
+ "/components/item-groups"
+ ],
+ "Subtitle": "纸片组",
+ "Title": "Chip groups",
+ "Type": "纸片组"
+ },
+ {
+ "Desc": "\r\n \r\n \r\n @foreach (var i in Enumerable.Range(0, 3))\r\n {\r\n \r\n \r\n @{\r\n \r\n \r\n \r\n Active\r\n \r\n \r\n \r\n }\r\n \r\n \r\n }\r\n \r\n \r\n ",
+ "Type": "Demos.Components.Groups.children.ItemGroup.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 0,
+ "Name": "activeClass",
+ "Title": "激活类",
+ "Description": "\r\n \r\n \r\n @foreach (var n in Enumerable.Range(0, 3))\r\n {\r\n \r\n \r\n \r\n \r\n \r\n Active\r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n \r\n ",
+ "Type": "Demos.Components.Groups.children.ItemGroup.props.ActiveClass",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "mandatory",
+ "Title": "必填项",
+ "Description": "\r\n \r\n \r\n @foreach (var i in Enumerable.Range(0, 3))\r\n {\r\n \r\n \r\n \r\n \r\n \r\n Active\r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n \r\n ",
+ "Type": "Demos.Components.Groups.children.ItemGroup.props.Mandatory",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 2,
+ "Name": "multiple",
+ "Title": "多选",
+ "Description": "\r\n \r\n \r\n @foreach (var i in Enumerable.Range(0, 3))\r\n {\r\n \r\n \r\n \r\n \r\n \r\n Active\r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n \r\n ",
+ "Type": "Demos.Components.Groups.children.ItemGroup.props.Multiple",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 3,
+ "Name": "chips",
+ "Title": "Chips（纸片）",
+ "Description": "\r\n \r\n Submit a post \r\n \r\n\r\n \r\n \r\n Tags \r\n\r\n @foreach (var i in Enumerable.Range(1, 8))\r\n {\r\n \r\n \r\n @($\"Tag {i}\")\r\n \r\n \r\n }\r\n \r\n\r\n \r\n Post \r\n \r\n \r\n \r\n\r\n@code {\r\n string title = \"My new post\";\r\n string text = \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\";\r\n}",
+ "Type": "Demos.Components.Groups.children.ItemGroup.misc.Chips",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 4,
+ "Name": "selection",
+ "Title": "选择",
+ "Description": "\r\n \r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n \r\n \r\n @(context.Active ? \"mdi-heart\" : \"mdi-heart-outline\") \r\n \r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n \r\n\r\n@code {\r\n\r\n List items = new()\r\n {\r\n \"backgrounds/bg.jpg\",\r\n \"backgrounds/md.jpg\",\r\n \"backgrounds/bg-2.jpg\",\r\n \"backgrounds/md2.jpg\",\r\n };\r\n\r\n List selected = new();\r\n\r\n}",
+ "Type": "Demos.Components.Groups.children.ItemGroup.misc.Selection",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cover": "https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/ItemGroup.svg",
+ "Cols": 1,
+ "Related": [
+ "/components/button-groups",
+ "/components/carousels",
+ "/components/tabs"
+ ],
+ "Subtitle": "项目组",
+ "Title": "Item groups",
+ "Type": "项目组"
+ },
+ {
+ "Desc": "\r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n @item.Icon \r\n \r\n \r\n @item.Text \r\n \r\n \r\n }\r\n \r\n \r\n \r\n\r\n@code {\r\n\r\n static readonly Item[] items =\r\n {\r\n new()\r\n {\r\n Icon = \"mdi-inbox\",\r\n Text = \"Inbox\"\r\n },\r\n new()\r\n {\r\n Icon = \"mdi-star\",\r\n Text = \"Star\"\r\n },\r\n new()\r\n {\r\n Icon = \"mdi-send\",\r\n Text = \"Send\"\r\n },\r\n new()\r\n {\r\n Icon = \"mdi-email-open\",\r\n Text = \"Drafts\"\r\n }\r\n };\r\n\r\n StringNumber selected = 1;\r\n\r\n public class Item\r\n {\r\n public string Icon { get; set; }\r\n public string Text { get; set; }\r\n }\r\n\r\n}",
+ "Type": "Demos.Components.Groups.children.ListItemGroup.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 1,
+ "Name": "activeClass",
+ "Title": "激活类",
+ "Description": "\r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n @item.icon \r\n \r\n\r\n \r\n @item.text \r\n \r\n \r\n }\r\n \r\n \r\n\r\n\r\n\r\n\r\n@code {\r\n\r\n List<(string icon, string text)> items = new()\r\n {\r\n (\"mdi-wifi\", \"Wifi\"),\r\n (\"mdi-bluetooth\", \"Bluetooth\"),\r\n (\"mdi-chart-donut\", \"Data Usage\"),\r\n };\r\n\r\n StringNumber model = 1;\r\n\r\n}",
+ "Type": "Demos.Components.Groups.children.ListItemGroup.props.ActiveClass",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "mandatory",
+ "Title": "必填项",
+ "Description": "\r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n @item.icon \r\n \r\n\r\n \r\n @item.text \r\n \r\n \r\n }\r\n \r\n \r\n\r\n\r\n@code {\r\n\r\n List<(string icon, string text)> items = new()\r\n {\r\n (\"mdi-wifi\", \"Wifi\"),\r\n (\"mdi-bluetooth\", \"Bluetooth\"),\r\n (\"mdi-chart-donut\", \"Data Usage\"),\r\n };\r\n\r\n StringNumber model = 1;\r\n\r\n}",
+ "Type": "Demos.Components.Groups.children.ListItemGroup.props.Mandatory",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "multiple",
+ "Title": "多选",
+ "Description": "\r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n @item.icon \r\n \r\n\r\n \r\n @item.text \r\n \r\n \r\n }\r\n \r\n \r\n\r\n\r\n@code {\r\n\r\n List<(string icon, string text)> items = new()\r\n {\r\n (\"mdi-wifi\", \"Wifi\"),\r\n (\"mdi-bluetooth\", \"Bluetooth\"),\r\n (\"mdi-chart-donut\", \"Data Usage\"),\r\n };\r\n\r\n List model = new() {1};\r\n\r\n}",
+ "Type": "Demos.Components.Groups.children.ListItemGroup.props.Multiple",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "flatList",
+ "Title": "扁平列表",
+ "Description": "\r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n @item.icon \r\n \r\n\r\n \r\n @item.text \r\n \r\n \r\n }\r\n \r\n \r\n\r\n\r\n@code {\r\n\r\n List<(string icon, string text)> items = new()\r\n {\r\n (\"mdi-wifi\", \"Wifi\"),\r\n (\"mdi-bluetooth\", \"Bluetooth\"),\r\n (\"mdi-chart-donut\", \"Data Usage\"),\r\n };\r\n\r\n StringNumber model = 1;\r\n\r\n}",
+ "Type": "Demos.Components.Groups.children.ListItemGroup.misc.FlatList",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 1,
+ "Name": "selectionControls",
+ "Title": "选择控件",
+ "Description": "\r\n \r\n \r\n @foreach (var (item,i) in items.Select((v, i) => (v,i)))\r\n {\r\n if (item == \"\")\r\n {\r\n \r\n \r\n \r\n @item \r\n \r\n \r\n \r\n \r\n \r\n }\r\n }\r\n \r\n \r\n\r\n\r\n@code {\r\n\r\n List items = new()\r\n {\r\n \"Dog Photos\",\r\n \"Cat Photos\",\r\n \"\",\r\n \"Potatoes\",\r\n \"Carrots\",\r\n };\r\n\r\n List model = new() {\"Carrots\"};\r\n\r\n}",
+ "Type": "Demos.Components.Groups.children.ListItemGroup.misc.SelectionControls",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cols": 1,
+ "Related": [
+ "/components/lists",
+ "/components/item-groups",
+ "/components/cards"
+ ],
+ "Subtitle": "列表项目组",
+ "Title": "List item groups",
+ "Type": "列表项目组"
+ },
+ {
+ "Desc": "\r\n \r\n @foreach (var item in Enumerable.Range(1, 25))\r\n {\r\n \r\n \r\n Options @item\r\n \r\n \r\n }\r\n \r\n ",
+ "Type": "Demos.Components.Groups.children.SlideGroup.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 1,
+ "Name": "activeClass",
+ "Title": "激活类",
+ "Description": "\r\n \r\n @foreach (var item in Enumerable.Range(1, 15))\r\n {\r\n \r\n \r\n \r\n \r\n \r\n mdi-close-circle-outline \r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n ",
+ "Type": "Demos.Components.Groups.children.SlideGroup.props.ActiveClass",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "centerActive",
+ "Title": "激活项居中",
+ "Description": "\r\n \r\n @foreach (var item in Enumerable.Range(1, 15))\r\n {\r\n \r\n \r\n \r\n \r\n \r\n mdi-close-circle-outline \r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n \r\n\r\n@code {\r\n StringNumber model;\r\n}",
+ "Type": "Demos.Components.Groups.children.SlideGroup.props.CenterActive",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 2,
+ "Name": "customIcons",
+ "Title": "自定义图标",
+ "Description": "\r\n \r\n @foreach (var item in Enumerable.Range(1, 15))\r\n {\r\n \r\n \r\n \r\n \r\n \r\n mdi-close-circle-outline \r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n \r\n\r\n@code {\r\n StringNumber model;\r\n}",
+ "Type": "Demos.Components.Groups.children.SlideGroup.props.CustomIcons",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 3,
+ "Name": "mandatory",
+ "Title": "必填项",
+ "Description": "\r\n \r\n @foreach (var item in Enumerable.Range(1, 15))\r\n {\r\n \r\n \r\n \r\n \r\n \r\n mdi-close-circle-outline \r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n \r\n\r\n@code {\r\n StringNumber model;\r\n}",
+ "Type": "Demos.Components.Groups.children.SlideGroup.props.Mandatory",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 4,
+ "Name": "multiple",
+ "Title": "多选",
+ "Description": "\r\n \r\n @foreach (var item in Enumerable.Range(1, 15))\r\n {\r\n \r\n \r\n \r\n \r\n \r\n mdi-close-circle-outline \r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n \r\n\r\n@code {\r\n\r\n List model = new();\r\n\r\n}",
+ "Type": "Demos.Components.Groups.children.SlideGroup.props.Multiple",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 5,
+ "Name": "pseudoCarousel",
+ "Title": "伪轮播",
+ "Description": "\r\n \r\n @foreach (var item in Enumerable.Range(1, 15))\r\n {\r\n \r\n \r\n \r\n \r\n \r\n mdi-close-circle-outline \r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n\r\n @if (model != null)\r\n {\r\n \r\n \r\n \r\n \r\n }\r\n \r\n\r\n@code {\r\n\r\n StringNumber model;\r\n\r\n}",
+ "Type": "Demos.Components.Groups.children.SlideGroup.misc.PseudoCarousel",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cols": 1,
+ "Related": [
+ "/components/icons",
+ "/components/carousels",
+ "/components/tabs"
+ ],
+ "Subtitle": "幻灯片组",
+ "Title": "Slide groups",
+ "Type": "幻灯片组"
+ },
+ {
+ "Desc": "\r\n \r\n @foreach (var item in Enumerable.Range(1, length))\r\n {\r\n \r\n \r\n }\r\n \r\n\r\n \r\n \r\n @foreach (var item in Enumerable.Range(1, length))\r\n {\r\n \r\n \r\n \r\n \r\n \r\n mdi-account \r\n \r\n \r\n\r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n\r\n@code {\r\n\r\n StringNumber window;\r\n\r\n int length = 3;\r\n}",
+ "Type": "Demos.Components.Groups.children.Windows.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 3,
+ "Name": "customizedArrows",
+ "Title": "自定义箭头按钮",
+ "Description": "\r\n \r\n Previous slide \r\n \r\n \r\n Next slide \r\n \r\n \r\n @foreach (var item in Enumerable.Range(1, 5))\r\n {\r\n \r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n ",
+ "Type": "Demos.Components.Groups.children.Windows.props.CustomizedArrows",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "reverse",
+ "Title": "反转",
+ "Description": "\r\n \r\n @foreach (var item in Enumerable.Range(0, length))\r\n {\r\n \r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n\r\n \r\n \r\n mdi-chevron-left \r\n \r\n \r\n @foreach (var item in Enumerable.Range(0, length))\r\n {\r\n \r\n \r\n mdi-record \r\n \r\n \r\n }\r\n \r\n \r\n mdi-chevron-right \r\n \r\n \r\n \r\n\r\n@code {\r\n\r\n int _onboarding = 0;\r\n\r\n StringNumber Onboarding\r\n {\r\n get => _onboarding;\r\n set => _onboarding = value.AsT1;\r\n }\r\n\r\n int length = 3;\r\n\r\n private void HandleNext()\r\n {\r\n _onboarding = _onboarding + 1 == length ? 0 : _onboarding + 1;\r\n }\r\n\r\n private void HandlePrev()\r\n {\r\n _onboarding = _onboarding - 1 < 0 ? length - 1 : _onboarding - 1;\r\n }\r\n\r\n}",
+ "Type": "Demos.Components.Groups.children.Windows.props.Reverse",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 2,
+ "Name": "vertical",
+ "Title": "垂直",
+ "Description": "\r\n \r\n @foreach (var item in Enumerable.Range(0, length))\r\n {\r\n \r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n\r\n \r\n \r\n mdi-chevron-left \r\n \r\n \r\n @foreach (var item in Enumerable.Range(0, length))\r\n {\r\n \r\n \r\n mdi-record \r\n \r\n \r\n }\r\n \r\n \r\n mdi-chevron-right \r\n \r\n \r\n \r\n\r\n@code {\r\n\r\n int _onboarding = 0;\r\n\r\n StringNumber Onboarding\r\n {\r\n get => _onboarding;\r\n set => _onboarding = value.AsT1;\r\n }\r\n\r\n int length = 3;\r\n\r\n private void HandleNext()\r\n {\r\n _onboarding = _onboarding + 1 == length ? 0 : _onboarding + 1;\r\n }\r\n\r\n private void HandlePrev()\r\n {\r\n _onboarding = _onboarding - 1 < 0 ? length - 1 : _onboarding - 1;\r\n }\r\n\r\n}",
+ "Type": "Demos.Components.Groups.children.Windows.props.Vertical",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 4,
+ "Name": "accountCreation",
+ "Title": "创建账户",
+ "Description": "\r\n \r\n @currentTitle\r\n @step \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Please enter a password for your account\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n step--\">\r\n Back\r\n \r\n step++\">\r\n Next\r\n \r\n \r\n \r\n\r\n@code {\r\n\r\n string email = \"john@vuetifyjs.com\";\r\n int step = 1;\r\n\r\n StringNumber Step\r\n {\r\n get => step;\r\n set => step = value.ToInt32();\r\n }\r\n\r\n public string currentTitle\r\n {\r\n get => step switch\r\n {\r\n 1 => \"Sign-Up\",\r\n 2 => \"Create a password\",\r\n _ => \"Account Created\"\r\n };\r\n }\r\n\r\n}",
+ "Type": "Demos.Components.Groups.children.Windows.misc.AccountCreation",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 5,
+ "Name": "onboarding",
+ "Title": "新手教学",
+ "Description": "\r\n \r\n @foreach (var item in Enumerable.Range(0, length))\r\n {\r\n \r\n \r\n \r\n \r\n Transparent themed, for background-imaged slides. Background color black added for demonstration purposes.\r\n \r\n \r\n \r\n \r\n }\r\n \r\n\r\n \r\n \r\n mdi-chevron-left \r\n \r\n \r\n @foreach (var item in Enumerable.Range(0, length))\r\n {\r\n \r\n \r\n mdi-record \r\n \r\n \r\n }\r\n \r\n \r\n mdi-chevron-right \r\n \r\n \r\n \r\n\r\n@code {\r\n\r\n \r\n int onboarding = 0;\r\n\r\n StringNumber OnBoarding\r\n {\r\n get => onboarding;\r\n set => onboarding = value.AsT1;\r\n }\r\n\r\n int length = 3;\r\n\r\n private void Next()\r\n {\r\n onboarding = onboarding + 1 == length ? 0 : onboarding + 1;\r\n }\r\n\r\n private void Prev()\r\n {\r\n onboarding = onboarding - 1 < 0 ? length - 1 : onboarding - 1;\r\n }\r\n\r\n}",
+ "Type": "Demos.Components.Groups.children.Windows.misc.Onboarding",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cols": 1,
+ "Related": [
+ "/components/carousels",
+ "/components/steppers",
+ "/components/tabs"
+ ],
+ "Subtitle": "窗口",
+ "Title": "Windows",
+ "Type": "窗口"
+ },
+ {
+ "Desc": "\r\n \r\n \r\n \r\n Hover over me! \r\n \r\n \r\n \r\n ",
+ "Type": "Demos.Components.Hover.props.Disabled",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "open",
+ "Title": "打开和关闭延迟",
+ "Description": "\r\n \r\n \r\n \r\n \r\n Open Delay (Mouse enter)\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n Close Delay (Mouse leave)\r\n \r\n \r\n \r\n \r\n \r\n\r\n",
+ "Type": "Demos.Components.Hover.props.Open",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "list",
+ "Title": "悬停列表",
+ "Description": "\r\n \r\n @foreach (var item in _items)\r\n {\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n \r\n\r\n@code\r\n{\r\n private string[] _icons = new string[3] { \"mdi-rewind\", \"mdi-play\", \"mdi-fast-forward\" };\r\n private string _transparent = \"rgba(255, 255, 255, 0)\";\r\n\r\n private class ItemDemo\r\n {\r\n public string Title { get; set; }\r\n public string Text { get; set; }\r\n public string SubText { get; set; }\r\n public string Img { get; set; }\r\n }\r\n\r\n private List _items = new List\r\n {\r\n new ItemDemo\r\n {\r\n Title = \"New Releases\",\r\n Text = \"It's New Release Friday\",\r\n SubText = \"Newly released songs. Updated daily.\",\r\n Img = \"https://images.unsplash.com/photo-1429514513361-8fa32282fd5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3264&q=80\"\r\n },\r\n new ItemDemo\r\n {\r\n Title = \"Rock\",\r\n Text = \"Greatest Rock Hits\",\r\n SubText = \"Lose yourself in rock tunes.\",\r\n Img = \"https://images.unsplash.com/photo-1498038432885-c6f3f1b912ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80\"\r\n },\r\n new ItemDemo\r\n {\r\n Title = \"Mellow Moods\",\r\n Text = \"Ambient Bass\",\r\n SubText = \"Chill beats to mellow you out.\",\r\n Img = \"https://images.unsplash.com/photo-1542320868-f4d80389e1c4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3750&q=80\"\r\n }\r\n };\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Hover.misc.List",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 2,
+ "Name": "transition",
+ "Title": "过渡",
+ "Description": "\r\n \r\n \r\n \r\n \r\n $14.99\r\n \r\n \r\n \r\n \r\n \r\n mdi-cart \r\n \r\n \r\n \r\n \r\n\r\n",
+ "Type": "Demos.Components.Hover.misc.Transition",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cols": 1,
+ "Related": [
+ "/components/cards",
+ "/components/images",
+ "/components/tooltips"
+ ],
+ "Subtitle": "悬停",
+ "Title": "Hover",
+ "Type": "悬停"
+ },
+ {
+ "Desc": "\r\n \r\n mdi-domain\r\n \r\n\r\n \r\n mdi-message-text\r\n \r\n\r\n \r\n mdi-dialpad\r\n \r\n\r\n \r\n mdi-email\r\n \r\n\r\n \r\n mdi-call-split\r\n \r\n\r\n \r\n mdi-arrow-up-bold-box-outline\r\n \r\n \r\n",
+ "Type": "Demos.Components.Icon.props.Color",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "click",
+ "Title": "单击",
+ "Description": "\r\n \r\n \r\n Upcoming Changes\r\n \r\n \r\n \r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\r\n \r\n\r\n \r\n \r\n mdi-chevron-right\r\n \r\n \r\n \r\n\r\n\r\n You clicked next!\r\n \r\n\r\n@code {\r\n\r\n bool show;\r\n\r\n void Next()\r\n {\r\n show = true;\r\n }\r\n\r\n}",
+ "Type": "Demos.Components.Icon.events.Click",
+ "Style": "",
+ "Debug": false,
+ "Group": 1
+ },
+ {
+ "Order": 0,
+ "Name": "button",
+ "Title": "按钮",
+ "Description": "\r\n fas fa-lock \r\n\r\n fas fa-search \r\n\r\n fas fa-list \r\n\r\n fas fa-edit \r\n\r\n fas fa-tachometer-alt \r\n\r\n fas fa-circle-notch fa-spin \r\n",
+ "Type": "Demos.Components.Icon.misc.FontAwesome",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 0,
+ "Name": "materialDesign",
+ "Title": "Material Design",
+ "Description": "\r\n \r\n \r\n home \r\n event \r\n info \r\n \r\n\r\n \r\n \r\n folder_open\r\n \r\n \r\n widgets\r\n \r\n \r\n gavel\r\n \r\n \r\n \r\n\r\n \r\n \r\n home \r\n event \r\n info \r\n \r\n\r\n \r\n folder_open \r\n widgets \r\n gavel \r\n \r\n \r\n\r\n \r\n \r\n home \r\n event \r\n info \r\n \r\n\r\n \r\n \r\n folder_open\r\n \r\n \r\n widgets\r\n \r\n \r\n gavel\r\n \r\n \r\n \r\n\r\n \r\n \r\n home \r\n event \r\n info \r\n \r\n\r\n \r\n \r\n folder_open\r\n \r\n \r\n widgets\r\n \r\n \r\n gavel\r\n \r\n \r\n \r\n \r\n\r\n",
+ "Type": "Demos.Components.Icon.misc.MaterialDesign",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 0,
+ "Name": "svg",
+ "Title": "SVG",
+ "Description": "\r\n @mdiAccount \r\n \r\n @mdiPencil \r\n \r\n @mdiShareVariant \r\n \r\n \r\n \r\n @mdiDelete\r\n \r\n Delete\r\n \r\n\r\n\r\n@code {\r\n string mdiAccount = \"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z\";\r\n string mdiPencil = \"M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z\";\r\n string mdiShareVariant = \"M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z\";\r\n string mdiDelete = \"M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z\";\r\n}",
+ "Type": "Demos.Components.Icon.misc.Svg",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cover": "https://gw.alipayobjects.com/zos/alicdn/rrwbSt3FQ/Icon.svg",
+ "Cols": 1,
+ "Related": [
+ "/features/icon-fonts",
+ "/components/buttons",
+ "/components/cards"
+ ],
+ "Subtitle": "图标",
+ "Title": "Icons",
+ "Type": "图标"
+ },
+ {
+ "Desc": "\r\n \r\n \r\n \r\n\r\n@code {\r\n private string _src = \"https://picsum.photos/id/11/500/300\";\r\n}",
+ "Type": "Demos.Components.Image.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 1,
+ "Name": "aspectRatio",
+ "Title": "宽高比",
+ "Description": "\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ",
+ "Type": "Demos.Components.Image.props.Contain",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "gradients",
+ "Title": "渐变",
+ "Description": "\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n",
+ "Type": "Demos.Components.Image.props.Gradients",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "height",
+ "Title": "高度",
+ "Description": "\r\n \r\n \r\n \r\n \r\n height\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n height with contain\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n max-height\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n max-height with contain\r\n \r\n \r\n \r\n \r\n ",
+ "Type": "Demos.Components.Image.props.Height",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 2,
+ "Name": "placeholder",
+ "Title": "占位符",
+ "Description": "\r\n \r\n \r\n \r\n \r\n \r\n \r\n ",
+ "Type": "Demos.Components.Image.contents.Placeholder",
+ "Style": "",
+ "Debug": false,
+ "Group": 2
+ },
+ {
+ "Order": 3,
+ "Name": "grid",
+ "Title": "栅格",
+ "Description": "\r\n \r\n \r\n Single-line item \r\n \r\n \r\n\r\n \r\n \r\n Two-line item \r\n Secondary text \r\n \r\n \r\n\r\n \r\n \r\n Three-line item \r\n \r\n Secondary line text Lorem ipsum dolor sit amet,\r\n \r\n \r\n consectetur adipiscing elit.\r\n \r\n \r\n \r\n \r\n",
+ "Type": "Demos.Components.List.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 1,
+ "Name": "dense",
+ "Title": "密集",
+ "Description": "\r\n \r\n REPORTS \r\n \r\n @foreach (var item in _items)\r\n {\r\n \r\n \r\n \r\n @item.Icon\r\n \r\n \r\n \r\n @item.Text \r\n \r\n \r\n }\r\n \r\n \r\n \r\n\r\n@code{\r\n private StringNumber _selectedItem = 1;\r\n private Item[] _items = new Item[]\r\n {\r\n new Item { Text= \"Real-Time\", Icon= \"mdi-clock\" },\r\n new Item { Text= \"Audience\", Icon= \"mdi-account\" },\r\n new Item { Text= \"Conversions\", Icon= \"mdi-flag\" }\r\n };\r\n\r\n class Item\r\n {\r\n public string Text { get; set; }\r\n public string Icon { get; set; }\r\n }\r\n}",
+ "Type": "Demos.Components.List.props.Dense",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 2,
+ "Name": "disabled",
+ "Title": "禁用",
+ "Description": "\r\n \r\n REPORTS \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n \r\n @item.Icon\r\n \r\n \r\n \r\n @item.Text \r\n \r\n \r\n }\r\n \r\n \r\n \r\n\r\n@code{\r\n StringNumber selectedItem = 1;\r\n Item[] items = new Item[]\r\n {\r\n new Item { Text= \"Real-Time\", Icon= \"mdi-clock\" },\r\n new Item { Text= \"Audience\", Icon= \"mdi-account\" },\r\n new Item { Text= \"Conversions\", Icon= \"mdi-flag\" }\r\n };\r\n\r\n class Item\r\n {\r\n public string Text { get; set; }\r\n public string Icon { get; set; }\r\n }\r\n}",
+ "Type": "Demos.Components.List.props.Disabled",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 3,
+ "Name": "flat",
+ "Title": "扁平",
+ "Description": "\r\n \r\n REPORTS \r\n \r\n @foreach (var item in _items)\r\n {\r\n \r\n \r\n \r\n @item.Icon\r\n \r\n \r\n \r\n @item.Text \r\n \r\n \r\n }\r\n \r\n \r\n \r\n\r\n@code{\r\n private StringNumber _selectedItem = 1;\r\n private Item[] _items = new Item[]\r\n {\r\n new Item { Text= \"Real-Time\", Icon= \"mdi-clock\" },\r\n new Item { Text= \"Audience\", Icon= \"mdi-account\" },\r\n new Item { Text= \"Conversions\", Icon= \"mdi-flag\" }\r\n };\r\n\r\n class Item\r\n {\r\n public string Text { get; set; }\r\n public string Icon { get; set; }\r\n }\r\n}",
+ "Type": "Demos.Components.List.props.Flat",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 4,
+ "Name": "nav",
+ "Title": "导航列表",
+ "Description": "\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n John Leider\r\n \r\n john@vuetifyjs.com \r\n \r\n\r\n \r\n mdi-menu-down \r\n \r\n \r\n \r\n \r\n \r\n @foreach (var item in _items)\r\n {\r\n \r\n \r\n @item.Icon \r\n \r\n\r\n \r\n @item.Text \r\n \r\n \r\n }\r\n \r\n \r\n \r\n \r\n\r\n@code{\r\n private StringNumber _selectedItem = 0;\r\n private Item[] _items = new Item[]\r\n {\r\n new Item { Text= \"My Files\", Icon= \"mdi-folder\" },\r\n new Item { Text= \"Shared with me\", Icon= \"mdi-account-multiple\" },\r\n new Item { Text= \"Starred\", Icon= \"mdi-star\" },\r\n new Item { Text= \"Recent\", Icon= \"mdi-history\" },\r\n new Item { Text= \"Offline\", Icon= \"mdi-check-circle\" },\r\n new Item { Text= \"Uploads\", Icon= \"mdi-upload\" },\r\n new Item { Text= \"Backups\", Icon= \"mdi-cloud-upload\" }\r\n\r\n };\r\n\r\n class Item\r\n {\r\n public string Text { get; set; }\r\n public string Icon { get; set; }\r\n }\r\n}",
+ "Type": "Demos.Components.List.props.Nav",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 5,
+ "Name": "rounded",
+ "Title": "圆角",
+ "Description": "\r\n \r\n REPORTS \r\n \r\n @foreach (var item in _items)\r\n {\r\n \r\n \r\n \r\n @item.Icon\r\n \r\n \r\n \r\n @item.Text \r\n \r\n \r\n }\r\n \r\n \r\n \r\n\r\n@code{\r\n private StringNumber _selectedItem = 1;\r\n private Item[] _items = new Item[]\r\n {\r\n new Item { Text= \"Real-Time\", Icon= \"mdi-clock\" },\r\n new Item { Text= \"Audience\", Icon= \"mdi-account\" },\r\n new Item { Text= \"Conversions\", Icon= \"mdi-flag\" }\r\n };\r\n\r\n class Item\r\n {\r\n public string Text { get; set; }\r\n public string Icon { get; set; }\r\n }\r\n}",
+ "Type": "Demos.Components.List.props.Rounded",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 6,
+ "Name": "shapedLists",
+ "Title": "形状列表",
+ "Description": "\r\n \r\n REPORTS \r\n \r\n @foreach (var item in _items)\r\n {\r\n \r\n \r\n \r\n @item.Icon\r\n \r\n \r\n \r\n @item.Text \r\n \r\n \r\n }\r\n \r\n \r\n \r\n\r\n@code{\r\n private StringNumber _selectedItem = 1;\r\n private Item[] _items = new Item[]\r\n {\r\n new Item { Text= \"Real-Time\", Icon= \"mdi-clock\" },\r\n new Item { Text= \"Audience\", Icon= \"mdi-account\" },\r\n new Item { Text= \"Conversions\", Icon= \"mdi-flag\" }\r\n };\r\n\r\n class Item\r\n {\r\n public string Text { get; set; }\r\n public string Icon { get; set; }\r\n }\r\n}",
+ "Type": "Demos.Components.List.props.ShapedLists",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 7,
+ "Name": "subGroup",
+ "Title": "嵌套列表",
+ "Description": "\r\n \r\n \r\n \r\n mdi-home \r\n \r\n\r\n Home \r\n \r\n\r\n \r\n \r\n Users \r\n \r\n \r\n \r\n \r\n \r\n Admin \r\n \r\n \r\n \r\n @foreach (var item in _admins)\r\n {\r\n \r\n @item.Text \r\n\r\n \r\n @item.Icon \r\n \r\n \r\n }\r\n \r\n \r\n\r\n \r\n \r\n \r\n Actions \r\n \r\n \r\n \r\n @foreach (var item in _cruds)\r\n {\r\n \r\n @item.Text \r\n\r\n \r\n @item.Icon \r\n \r\n \r\n }\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n@code{\r\n readonly Item[] _admins = new Item[]\r\n {\r\n new Item { Text= \"Management\", Icon= \"mdi-account-multiple-outline\" },\r\n new Item { Text= \"Settings\", Icon= \"mdi-cog-outline\" }\r\n };\r\n\r\n readonly Item[] _cruds = new Item[]\r\n {\r\n new Item { Text= \"Create\", Icon= \"mdi-plus-outline\" },\r\n new Item { Text= \"Read\", Icon= \"mdi-file-outline\" },\r\n new Item { Text= \"Update\", Icon= \"mdi-update\" },\r\n new Item { Text= \"Delete\", Icon= \"mdi-delete\" }\r\n };\r\n\r\n bool userExpanded = true;\r\n bool adminExpanded = true;\r\n\r\n class Item\r\n {\r\n public string Text { get; set; }\r\n public string Icon { get; set; }\r\n }\r\n}",
+ "Type": "Demos.Components.List.props.SubGroup",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 8,
+ "Name": "threeLine",
+ "Title": "三行",
+ "Description": "\r\n \r\n Inbox \r\n\r\n \r\n mdi-magnify \r\n \r\n \r\n\r\n \r\n @foreach (var item in _items)\r\n {\r\n @if (item.Header != null)\r\n {\r\n @item.Header \r\n }\r\n else if (item.Divider)\r\n {\r\n \r\n \r\n \r\n\r\n \r\n @((MarkupString)item.Title) \r\n @((MarkupString)item.SubTitle) \r\n \r\n \r\n }\r\n }\r\n \r\n \r\n\r\n@code{\r\n private Item[] _items = new Item[]\r\n {\r\n new Item { Header=\"Today\" },\r\n new Item\r\n {\r\n Avatar=\"https://cdn.vuetifyjs.com/images/lists/1.jpg\",\r\n Title=\"Brunch this weekend?\",\r\n SubTitle=\"Ali Connors — I'll be in your neighborhood doing errands this weekend. Do you want to hang out?\"\r\n },\r\n new Item\r\n {\r\n Divider=true,\r\n Inset=true\r\n },\r\n new Item\r\n {\r\n Avatar=\"https://cdn.vuetifyjs.com/images/lists/2.jpg\",\r\n Title=\"Summer BBQ 4\",\r\n SubTitle=\"to Alex, Scott, Jennifer — Wish I could come, but I'm out of town this weekend.\"\r\n },\r\n new Item\r\n {\r\n Divider=true,\r\n Inset=true\r\n },\r\n new Item\r\n {\r\n Avatar=\"https://cdn.vuetifyjs.com/images/lists/3.jpg\",\r\n Title=\"Oui oui\",\r\n SubTitle=\"Sandra Adams — Do you have Paris recommendations? Have you ever been?\"\r\n },\r\n new Item\r\n {\r\n Divider=true,\r\n Inset=true\r\n },\r\n new Item\r\n {\r\n Avatar=\"https://cdn.vuetifyjs.com/images/lists/4.jpg\",\r\n Title=\"Birthday gift\",\r\n SubTitle=\"Trevor Hansen — Have any ideas about what we should get Heidi for her birthday?\"\r\n },\r\n new Item\r\n {\r\n Divider=true,\r\n Inset=true\r\n },\r\n new Item\r\n {\r\n Avatar=\"https://cdn.vuetifyjs.com/images/lists/5.jpg\",\r\n Title=\"Recipe to try\",\r\n SubTitle=\"Britta Holt — We should eat this: Grate, Squash, Corn, and tomatillo Tacos.\"\r\n }\r\n };\r\n\r\n class Item\r\n {\r\n public string Header { get; set; }\r\n public string Avatar { get; set; }\r\n public string Title { get; set; }\r\n public string SubTitle { get; set; }\r\n public bool Divider { get; set; }\r\n public bool Inset { get; set; }\r\n }\r\n}",
+ "Type": "Demos.Components.List.props.ThreeLine",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 9,
+ "Name": "twoLinesAndSubheader",
+ "Title": "两行和副标题",
+ "Description": "\r\n \r\n My files \r\n\r\n \r\n mdi-magnify \r\n \r\n\r\n \r\n mdi-view-module \r\n \r\n \r\n\r\n \r\n Folders \r\n\r\n @foreach (var item in _folders)\r\n {\r\n \r\n \r\n \r\n mdi-folder\r\n \r\n \r\n\r\n \r\n @item.Title \r\n\r\n @item.SubTitle \r\n \r\n\r\n \r\n \r\n mdi-information \r\n \r\n \r\n \r\n\r\n }\r\n\r\n\r\n Files \r\n\r\n @foreach (var item in _files)\r\n {\r\n \r\n \r\n @item.Icon \r\n \r\n\r\n \r\n @item.Title \r\n\r\n @item.SubTitle \r\n \r\n\r\n \r\n \r\n mdi-information \r\n \r\n \r\n \r\n }\r\n \r\n \r\n\r\n@code{\r\n private Item[] _files = new Item[]\r\n {\r\n new Item \r\n {\r\n Color= \"blue\",\r\n Icon= \"mdi-clipboard-text\",\r\n SubTitle= \"Jan 20, 2014\",\r\n Title= \"Vacation itinerary\",\r\n },\r\n new Item \r\n {\r\n Color= \"amber\",\r\n Icon= \"mdi-gesture-tap-button\",\r\n SubTitle= \"Jan 10, 2014\",\r\n Title= \"Kitchen remodel\",\r\n }\r\n };\r\n\r\n private Item[] _folders = new Item[]\r\n {\r\n new Item \r\n {\r\n SubTitle= \"Jan 9, 2014\",\r\n Title= \"Photos\",\r\n },\r\n new Item \r\n {\r\n SubTitle= \"Jan 17, 2014\",\r\n Title= \"Recipes\",\r\n },\r\n new Item\r\n {\r\n SubTitle= \"Jan 28, 2014\",\r\n Title= \"Work\",\r\n },\r\n };\r\n\r\n class Item\r\n {\r\n public string Color { get; set; }\r\n public string Icon { get; set; }\r\n public string Title { get; set; }\r\n public string SubTitle { get; set; }\r\n }\r\n}",
+ "Type": "Demos.Components.List.props.TwoLinesAndSubheader",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 10,
+ "Name": "expansionLists",
+ "Title": "可展开的列表",
+ "Description": "\r\n \r\n Topics \r\n\r\n \r\n mdi-dots-vertical \r\n \r\n \r\n\r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n \r\n @item.Title \r\n \r\n \r\n\r\n \r\n @foreach (var subItem in item.Items)\r\n {\r\n \r\n \r\n @item.Title \r\n \r\n \r\n }\r\n \r\n \r\n }\r\n \r\n \r\n\r\n@code {\r\n\r\n List- items = new List
- ()\r\n {\r\n new Item()\r\n {\r\n Action = \"mdi-ticket\",\r\n Items = new List
- () {new Item(\"List Item\")},\r\n Title = \"Attractions\"\r\n },\r\n new Item()\r\n {\r\n Action = \"mdi-silverware-fork-knife\",\r\n Active = true,\r\n Items = new List
- () {new Item(\"Breakfast & brunch\"), new Item(\"New American\"), new Item(\"Sushi\")},\r\n Title = \"Dining\"\r\n },\r\n new Item()\r\n {\r\n Action = \"mdi-school\",\r\n Items = new List
- () {new Item(\"List Item\")},\r\n Title = \"Education\"\r\n },\r\n new Item()\r\n {\r\n Action = \"mdi-run\",\r\n Items = new List
- () {new Item(\"List Item\")},\r\n Title = \"Family\"\r\n },\r\n new Item()\r\n {\r\n Action = \"mdi-bottle-tonic-plus\",\r\n Items = new List
- () {new Item(\"List Item\")},\r\n Title = \"Health\"\r\n },\r\n new Item()\r\n {\r\n Action = \"mdi-content-cut\",\r\n Items = new List
- () {new Item(\"List Item\")},\r\n Title = \"Attractions\"\r\n },\r\n new Item()\r\n {\r\n Action = \"mdi-tag\",\r\n Items = new List
- () {new Item(\"List Item\")},\r\n Title = \"Attractions\"\r\n },\r\n };\r\n\r\n class Item\r\n {\r\n public string Title { get; set; }\r\n\r\n public string Action { get; set; }\r\n\r\n public bool Active { get; set; }\r\n\r\n public List
- Items { get; set; } = new List
- ();\r\n\r\n public Item()\r\n {\r\n }\r\n\r\n public Item(string title)\r\n {\r\n Title = title;\r\n }\r\n }\r\n\r\n}",
+ "Type": "Demos.Components.List.contents.ExpansionLists",
+ "Style": "",
+ "Debug": false,
+ "Group": 2
+ },
+ {
+ "Order": 11,
+ "Name": "actionsAndItemGroups",
+ "Title": "操作和项目组",
+ "Description": "
\r\n \r\n Settings \r\n\r\n \r\n mdi-magnify \r\n \r\n \r\n\r\n \r\n User Controls \r\n\r\n \r\n \r\n Content filtering \r\n Set the content filtering level to restrict appts that can be downloaded \r\n \r\n \r\n\r\n \r\n \r\n Password \r\n Require password for purchase or use password to restrict purchase \r\n \r\n \r\n \r\n\r\n \r\n General \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n Notifications \r\n Notify me about updates to apps or games that I downloaded \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n Sound \r\n Auto-update apps at any time. Data charges may apply \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n Auto-add widgets \r\n Automatically add home screen widgets when downloads complete \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n@code {\r\n\r\n List settings = new();\r\n\r\n}",
+ "Type": "Demos.Components.List.misc.ActionsAndItemGroups",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 12,
+ "Name": "actionStack",
+ "Title": "操作栈",
+ "Description": "\r\n \r\n Inbox \r\n\r\n \r\n mdi-magnify \r\n \r\n\r\n \r\n mdi-checkbox-marked-circle \r\n \r\n \r\n\r\n \r\n \r\n @foreach (var (item, index) in items.Select((item, index) => (item, index)))\r\n {\r\n \r\n \r\n \r\n @item.title \r\n @item.headline \r\n @item.subtitle \r\n \r\n\r\n \r\n @item.action \r\n\r\n @if (!context.Active)\r\n {\r\n \r\n mdi-star-outline\r\n \r\n }\r\n else\r\n {\r\n \r\n mdi-star\r\n \r\n }\r\n \r\n \r\n \r\n\r\n @if (index < items.Count - 1)\r\n {\r\n \r\n\r\n\r\n@code {\r\n\r\n List selected = new();\r\n\r\n List<(string action, string headline, string subtitle, string title)> items = new List<(string action, string headline, string subtitle, string title)>()\r\n {\r\n (\"15 min\", \"Brunch this weekend?\",\"I'll be in your neighborhood doing errands this weekend. Do you want to hang out?\", \"Ali Connors\"),\r\n (\"hr\",\"Summer BBQ\",\"Wish I could come, but I'm out of town this weekend.\", \"me, Scrott, Jennifer\"),\r\n (\"6 hr\", \"Oui oui\",\"Do you have Paris recommendations? Have you ever been?\", \"Sandra Adams\"),\r\n (\"12 hr\", \"Birthday gift\",\"Have any ideas about what we should get Heidi for her birthday?\", \"Trevor Hansen\"),\r\n (\"18hr\",\"Recipe to try\",\"We should eat this: Grate, Squash, Corn, and tomatillo Tacos.\", \"Britta Holt\"),\r\n };\r\n\r\n}",
+ "Type": "Demos.Components.List.misc.ActionStack",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 13,
+ "Name": "cardList",
+ "Title": "卡片列表",
+ "Description": "\r\n \r\n \r\n \r\n \r\n mdi-chevron-left \r\n \r\n\r\n \r\n mdi-pencil \r\n \r\n\r\n \r\n mdi-dots-vertical \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n mdi-phone\r\n \r\n \r\n\r\n \r\n (650) 555-1234 \r\n Mobile \r\n \r\n\r\n \r\n mdi-message-text \r\n \r\n \r\n\r\n \r\n \r\n (323) 555-6789 \r\n Work \r\n \r\n\r\n \r\n mdi-message-text \r\n \r\n \r\n\r\n \r\n \r\n \r\n mdi-email\r\n \r\n \r\n\r\n \r\n aliconnors@example.com \r\n Personal \r\n \r\n \r\n\r\n \r\n \r\n ali_connors@example.com \r\n Work \r\n \r\n \r\n\r\n \r\n \r\n \r\n mdi-map-marker\r\n \r\n \r\n\r\n \r\n 1400 Main Street \r\n Orlando, FL 79938 \r\n \r\n \r\n \r\n ",
+ "Type": "Demos.Components.List.misc.CardList",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 14,
+ "Name": "simpleAvatarList",
+ "Title": "简单头像列表",
+ "Description": "\r\n \r\n Inbox \r\n\r\n \r\n mdi-magnify \r\n \r\n\r\n \r\n mdi-dots-vertical \r\n \r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n @if (item.icon)\r\n {\r\n \r\n mdi-star\r\n \r\n }\r\n \r\n\r\n \r\n @item.title \r\n \r\n\r\n \r\n \r\n \r\n }\r\n \r\n\r\n\r\n@code {\r\n\r\n List<(bool icon, string title, string avatar)> items = new List<(bool icon, string title, string avatar)>()\r\n {\r\n new(true, \"Jason Oner\", \"https://cdn.vuetifyjs.com/images/lists/1.jpg\"),\r\n new(false, \"Travis Howard\", \"https://cdn.vuetifyjs.com/images/lists/2.jpg\"),\r\n new(false, \"Ali Connors\", \"https://cdn.vuetifyjs.com/images/lists/3.jpg\"),\r\n new(false, \"Cindy Baker\", \"https://cdn.vuetifyjs.com/images/lists/4.jpg\"),\r\n };\r\n\r\n}",
+ "Type": "Demos.Components.List.misc.SimpleAvatarList",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 15,
+ "Name": "singleLineList",
+ "Title": "单行列表",
+ "Description": "\r\n \r\n New Chat \r\n\r\n \r\n mdi-magnify \r\n \r\n \r\n\r\n \r\n Recent chat \r\n\r\n @foreach (var chat in recent)\r\n {\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n @chat.title \r\n \r\n\r\n \r\n \r\n mdi-message-outline\r\n \r\n \r\n \r\n }\r\n \r\n\r\n \r\n Previous chats \r\n\r\n @foreach (var chat in previous)\r\n {\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n @chat.title \r\n \r\n \r\n }\r\n \r\n\r\n\r\n@code {\r\n\r\n List<(bool active, string avatar, string title)> recent = new List<(bool active, string avatar, string title)>()\r\n {\r\n new(true, \"https://cdn.vuetifyjs.com/images/lists/1.jpg\", \"Jason Oner\"),\r\n new(true, \"https://cdn.vuetifyjs.com/images/lists/2.jpg\", \"Mike Carlson\"),\r\n new(false, \"https://cdn.vuetifyjs.com/images/lists/3.jpg\", \"Cindy Baker\"),\r\n new(false, \"https://cdn.vuetifyjs.com/images/lists/4.jpg\", \"Ali Connors\"),\r\n };\r\n\r\n List<(string title, string avatar)> previous = new List<(string title, string avatar)>()\r\n {\r\n new(\"Travis Howard\", \"https://cdn.vuetifyjs.com/images/lists/5.jpg\")\r\n };\r\n\r\n}",
+ "Type": "Demos.Components.List.misc.SingleLineList",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 16,
+ "Name": "subheadingsAndDividers",
+ "Title": "列表组标题和分割线",
+ "Description": "\r\n \r\n Settings \r\n \r\n\r\n \r\n General \r\n\r\n \r\n \r\n Profile photo \r\n Change your Google+ profile photo \r\n \r\n \r\n\r\n \r\n \r\n Show your status \r\n Your status is visible to everyone \r\n \r\n \r\n \r\n\r\n \r\n Hangout notifications \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n Notifications \r\n Allow notifications \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n Sound \r\n Hangouts message \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n Video sounds \r\n Hangouts video call \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n Invites \r\n Notify when receiving invites \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n@code {\r\n\r\n List settings = new();\r\n\r\n}",
+ "Type": "Demos.Components.List.misc.SubheadingsAndDividers",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cover": "https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/List.svg",
+ "Cols": 1,
+ "Related": [
+ "/components/item-groups",
+ "/components/list-item-groups",
+ "/components/subheaders"
+ ],
+ "Subtitle": "列表",
+ "Title": "Lists",
+ "Type": "列表"
+ },
+ {
+ "Desc": "\r\n \r\n \r\n { }\" @attributes=\"@context.Attrs\">\r\n \r\n \r\n\r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n \r\n @item\r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n \r\n\r\n@code {\r\n\r\n string[] items =\r\n {\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me 2\"\r\n };\r\n\r\n}",
+ "Type": "Demos.Components.Menu.props.Absolute",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "absoluteWithoutActivator",
+ "Title": "没有激活器的绝对定位",
+ "Description": "\r\n @foreach (var item in _btns)\r\n {\r\n var index = Array.IndexOf(_btns, item);\r\n \r\n \r\n \r\n @item.text Radius\r\n \r\n \r\n \r\n \r\n @for (int i = 0; i < 4; i++)\r\n {\r\n \r\n @($\"Item {i}\") \r\n \r\n }\r\n \r\n \r\n \r\n }\r\n \r\n\r\n@code {\r\n\r\n (string text, string rounded)[] _btns =\r\n {\r\n (\"Removed\", \"0\"),\r\n (\"Large\", \"lg\"),\r\n (\"Custom\", \"b-xl\"),\r\n };\r\n\r\n string[] _colors =\r\n {\r\n \"deep-purple accent-4\", \"error\", \"teal darken-1\"\r\n };\r\n\r\n}",
+ "Type": "Demos.Components.Menu.props.Rounded",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 10,
+ "Name": "activatorAndTooltip",
+ "Title": "同时使用激活器和提示",
+ "Description": "\r\n \r\n \r\n \r\n Scale Transition\r\n \r\n \r\n\r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n \r\n @item\r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Slide X Transition\r\n \r\n \r\n\r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n \r\n @item\r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Slide Y Transition\r\n \r\n \r\n\r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n \r\n @item\r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n \r\n\r\n@code {\r\n\r\n string[] items =\r\n {\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me 2\"\r\n };\r\n\r\n}",
+ "Type": "Demos.Components.Menu.misc.CustomTransitions",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 12,
+ "Name": "popoverMenu",
+ "Title": "弹出菜单",
+ "Description": "\r\n \r\n \r\n \r\n Menu\r\n\r\n \r\n \r\n \r\n mdi-dots-vertical \r\n \r\n \r\n\r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n \r\n @item\r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n \r\n\r\n Lorem Ipsum \r\n \r\n \r\n \r\n\r\n@code {\r\n\r\n string[] items =\r\n {\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me 2\"\r\n };\r\n\r\n}",
+ "Type": "Demos.Components.Menu.misc.UseInComponents",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cols": 1,
+ "Related": [
+ "/components/dialogs",
+ "/components/tooltips",
+ "/styles/transitions"
+ ],
+ "Subtitle": "菜单",
+ "Title": "Menus",
+ "Type": "菜单"
+ },
+ {
+ "Desc": "\r\n \r\n \r\n \r\n \r\n Application\r\n \r\n \r\n subtext\r\n \r\n \r\n \r\n\r\n \r\n @foreach (var item in _items)\r\n {\r\n \r\n \r\n @item.Icon \r\n \r\n\r\n \r\n @item.Title \r\n \r\n \r\n }\r\n \r\n \r\n \r\n\r\n@code{\r\n class Item\r\n {\r\n public string Title { get; set; }\r\n public string Icon { get; set; }\r\n }\r\n\r\n private Item[] _items = new Item[]\r\n {\r\n new Item{ Title= \"Dashboard\", Icon= \"mdi-view-dashboard\" },\r\n new Item { Title= \"Photos\", Icon= \"mdi-image\" },\r\n new Item { Title= \"About\", Icon= \"mdi-help-box\" }\r\n };\r\n}\r\n\r\n\r\n\r\n",
+ "Type": "Demos.Components.NavigationDrawer.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 1,
+ "Name": "bottom",
+ "Title": "底部抽屉",
+ "Description": "\r\n \r\n _drawer = !_drawer\"> \r\n\r\n My files \r\n\r\n \r\n mdi-magnify \r\n \r\n\r\n \r\n mdi-filter \r\n \r\n\r\n \r\n mdi-dots-vertical \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n Foo \r\n \r\n\r\n \r\n Bar \r\n \r\n\r\n \r\n Fizz \r\n \r\n\r\n \r\n Buzz \r\n \r\n \r\n \r\n \r\n\r\n \r\n The navigation drawer will appear from the bottom on smaller size screens.\r\n \r\n \r\n\r\n@code\r\n{\r\n private bool _drawer = false;\r\n private StringNumber _value = default;\r\n\r\n void ValueChanged(StringNumber value)\r\n {\r\n _value = value;\r\n _drawer = false;\r\n }\r\n}",
+ "Type": "Demos.Components.NavigationDrawer.props.Bottom",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "expandOnHover",
+ "Title": "悬停时扩展",
+ "Description": "\r\n \r\n \r\n \r\n @foreach (var item in _items)\r\n {\r\n \r\n \r\n @item.Icon \r\n \r\n\r\n \r\n @item.Title \r\n \r\n \r\n }\r\n \r\n \r\n \r\n \r\n\r\n@code\r\n{\r\n private class ItemDemo\r\n {\r\n public string Title { get; set; }\r\n public string Icon { get; set; }\r\n }\r\n private List _items = new()\r\n {\r\n new ItemDemo { Title = \"Home\", Icon = \"mdi-view-dashboard\" },\r\n new ItemDemo { Title = \"About\", Icon = \"mdi-forum\" }\r\n };\r\n}",
+ "Type": "Demos.Components.NavigationDrawer.props.Floating",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "image",
+ "Title": "图像",
+ "Description": "\r\n \r\n \r\n @foreach (var item in _items)\r\n {\r\n \r\n \r\n @item[0] \r\n \r\n\r\n \r\n @item[1] \r\n \r\n \r\n }\r\n \r\n \r\n \r\n \r\n\r\n@code\r\n{\r\n private string[][] _items = new string[3][]\r\n {\r\n new string[2] {\"mdi-email\", \"Inbox\"},\r\n new string[2]{\"mdi-account-supervisor-circle\", \"Supervisors\" },\r\n new string[2]{ \"mdi-clock-start\", \"Clock-in\" }\r\n };\r\n}",
+ "Type": "Demos.Components.NavigationDrawer.props.Image",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "mini",
+ "Title": "迷你模式",
+ "Description": "\r\n \r\n \r\n \r\n \r\n\r\n John Leider \r\n\r\n _mini = !_mini\">\r\n mdi-chevron-left \r\n \r\n \r\n\r\n \r\n @foreach (var item in _items)\r\n {\r\n \r\n \r\n @item.Icon \r\n \r\n\r\n \r\n @item.Title \r\n \r\n \r\n }\r\n \r\n \r\n \r\n\r\n@code\r\n{\r\n private bool _drawer = true;\r\n private bool _mini = true;\r\n private class ItemDemo\r\n {\r\n public string Title { get; set; }\r\n public string Icon { get; set; }\r\n }\r\n private List _items = new()\r\n {\r\n new ItemDemo { Title = \"Home\", Icon = \"mdi-home-city\" },\r\n new ItemDemo { Title = \"My Account\", Icon = \"mdi-account\" },\r\n new ItemDemo { Title = \"Users\", Icon = \"mdi-account-group-outline\" }\r\n };\r\n}",
+ "Type": "Demos.Components.NavigationDrawer.props.Mini",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 2,
+ "Name": "right",
+ "Title": "右侧",
+ "Description": "\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n Jane Smith \r\n Logged In \r\n \r\n \r\n \r\n\r\n \r\n \r\n @foreach (var item in _items)\r\n {\r\n \r\n \r\n @item.Icon \r\n \r\n\r\n \r\n @item.Title \r\n \r\n \r\n }\r\n \r\n \r\n \r\n \r\n\r\n@code\r\n{\r\n private class ItemDemo\r\n {\r\n public string Title { get; set; }\r\n public string Icon { get; set; }\r\n }\r\n private List _items = new()\r\n {\r\n new ItemDemo { Title = \"Home\", Icon = \"mdi-home-city\" },\r\n new ItemDemo { Title = \"My Account\", Icon = \"mdi-account\" },\r\n new ItemDemo { Title = \"Users\", Icon = \"mdi-account-group-outline\" }\r\n };\r\n}",
+ "Type": "Demos.Components.NavigationDrawer.props.Right",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 2,
+ "Name": "temporary",
+ "Title": "临时的",
+ "Description": "\r\n \r\n \r\n _drawer = !_drawer\">\r\n Toggle\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n John Leider \r\n \r\n \r\n\r\n \r\n @foreach (var item in _items)\r\n {\r\n \r\n \r\n @item.Icon \r\n \r\n\r\n \r\n @item.Title \r\n \r\n \r\n }\r\n \r\n \r\n \r\n\r\n@code{\r\n private bool _drawer;\r\n private class ItemDemo\r\n {\r\n public string Title { get; set; }\r\n public string Icon { get; set; }\r\n }\r\n private List _items = new()\r\n {\r\n new ItemDemo { Title = \"Home\", Icon = \"mdi-view-dashboard\" },\r\n new ItemDemo { Title = \"About\", Icon = \"mdi-forum\" }\r\n };\r\n}",
+ "Type": "Demos.Components.NavigationDrawer.props.Temporary",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "color",
+ "Title": "彩色的抽屉",
+ "Description": "\r\n \r\n \r\n \r\n @foreach (var item in _items)\r\n {\r\n \r\n \r\n @item.Icon \r\n \r\n\r\n \r\n @item.Title \r\n \r\n \r\n }\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n@code{\r\n private class ItemDemo\r\n {\r\n public string Title { get; set; }\r\n public string Icon { get; set; }\r\n }\r\n private List _items = new()\r\n {\r\n new ItemDemo { Title = \"Dashboard\", Icon = \"mdi-view-dashboard\" },\r\n new ItemDemo { Title = \"Account\", Icon = \"mdi-account-box\" },\r\n new ItemDemo { Title = \"Admin\", Icon = \"mdi-gavel\" }\r\n };\r\n}",
+ "Type": "Demos.Components.NavigationDrawer.misc.Color",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 1,
+ "Name": "constitute",
+ "Title": "组合抽屉",
+ "Description": "\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n @foreach (var item in _items)\r\n {\r\n \r\n \r\n @item.Icon \r\n \r\n\r\n \r\n @item.Title \r\n \r\n \r\n }\r\n \r\n \r\n\r\n \r\n @foreach (var link in _links)\r\n {\r\n \r\n @link \r\n \r\n }\r\n \r\n \r\n \r\n \r\n\r\n@code\r\n{\r\n private string[] _links = new string[3] { \"Home\", \"Contacts\", \"Settings\" };\r\n private class ItemDemo\r\n {\r\n public string Title { get; set; }\r\n public string Icon { get; set; }\r\n }\r\n private List _items = new()\r\n {\r\n new ItemDemo { Title = \"Home\", Icon = \"mdi-view-dashboard\" },\r\n new ItemDemo { Title = \"About\", Icon = \"mdi-forum\" }\r\n };\r\n}",
+ "Type": "Demos.Components.NavigationDrawer.misc.Constitute",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cover": "https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/NavigationDrawer.svg",
+ "Cols": 1,
+ "Related": [
+ "/components/lists",
+ "/components/icons",
+ "/getting-started/wireframes"
+ ],
+ "Subtitle": "导航抽屉",
+ "Title": "Navigation drawers",
+ "Type": "导航抽屉"
+ },
+ {
+ "Desc": "\r\n \r\n \r\n \r\n Show Overlay\r\n \r\n\r\n \r\n \r\n Hide Overlay\r\n \r\n \r\n \r\n \r\n \r\n\r\n@code {\r\n bool overlay = false;\r\n\r\n void Toggle(MouseEventArgs args)\r\n {\r\n overlay = !overlay;\r\n }\r\n\r\n void Hide(MouseEventArgs args)\r\n {\r\n overlay = false;\r\n }\r\n}",
+ "Type": "Demos.Components.Overlay.props.Absolute",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 2,
+ "Name": "opacity",
+ "Title": "透明度",
+ "Description": "\r\n \r\n \r\n \r\n Show Overlay\r\n \r\n\r\n \r\n \r\n Hide Overlay\r\n \r\n \r\n \r\n \r\n \r\n@code {\r\n bool overlay = false;\r\n\r\n void Toggle(MouseEventArgs args)\r\n {\r\n overlay = !overlay;\r\n }\r\n\r\n void Hide(MouseEventArgs args)\r\n {\r\n overlay = false;\r\n }\r\n}",
+ "Type": "Demos.Components.Overlay.props.Opacity",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 3,
+ "Name": "zIndex",
+ "Title": "Z-index",
+ "Description": "\r\n _overlay = !_overlay\">\r\n Show Overlay\r\n \r\n\r\n \r\n _overlay = false\">\r\n Hide Overlay\r\n \r\n \r\n \r\n\r\n@code {\r\n private bool _overlay = false;\r\n private int _zIndex = 0;\r\n}",
+ "Type": "Demos.Components.Overlay.props.ZIndex",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 4,
+ "Name": "Advanced",
+ "Title": "高级版",
+ "Description": "\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n See more info \r\n \r\n \r\n \r\n \r\n ",
+ "Type": "Demos.Components.Overlay.misc.Advanced",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 5,
+ "Name": "loader",
+ "Title": "加载器",
+ "Description": "\r\n \r\n",
+ "Type": "Demos.Components.Pickers.children.ColorPickers.props.Canvas",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 2,
+ "Name": "elevation",
+ "Title": "海拔(TODO)",
+ "Description": "\r\n \r\n",
+ "Type": "Demos.Components.Pickers.children.ColorPickers.props.Elevation",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 3,
+ "Name": "inputs",
+ "Title": "输入（TODO:正在完善）",
+ "Description": "\r\n \r\n r\"\r\n ItemText=\"r=>Enum.GetName(typeof(ColorTypes),r)\"\r\n Style=\"max-width: 300px\"> \r\n \r\n \r\n\r\n@code {\r\n private ColorTypes _mode = ColorTypes.HSLA;\r\n private List _modes = new List\r\n {\r\n ColorTypes.HSLA,\r\n ColorTypes.RGBA,\r\n ColorTypes.HEXA\r\n };\r\n}\r\n",
+ "Type": "Demos.Components.Pickers.children.ColorPickers.props.Inputs",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 4,
+ "Name": "model",
+ "Title": "模型(TODO)",
+ "Description": "\r\n \r\n\r\n@code {\r\n private DateOnly _picker = DateOnly.FromDateTime(DateTime.Now);\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.DatePickers.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 1,
+ "Name": "allowedDates",
+ "Title": "允许的日期",
+ "Description": "\r\n \r\n\r\n@code {\r\n private DateOnly _date = DateOnly.Parse(\"2018-03-02\");\r\n private DateOnly _min = DateOnly.Parse(\"2016-06-15\");\r\n private DateOnly _max = DateOnly.Parse(\"2018-03-20\");\r\n private Func _allowedDates = value => value.Day % 2 == 0;\r\n}",
+ "Type": "Demos.Components.Pickers.children.DatePickers.props.AllowedDates",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "colors",
+ "Title": "颜色",
+ "Description": "\r\n \r\n\r\n@code{\r\n private DateOnly _picker = DateOnly.FromDateTime(DateTime.Now);\r\n private DateOnly _picker2 = DateOnly.FromDateTime(DateTime.Now);\r\n}",
+ "Type": "Demos.Components.Pickers.children.DatePickers.props.Colors",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "elevation",
+ "Title": "高度(z轴)",
+ "Description": "\r\n \r\n\r\n@code{\r\n private DateOnly _picker = DateOnly.FromDateTime(DateTime.Now);\r\n}",
+ "Type": "Demos.Components.Pickers.children.DatePickers.props.Elevation",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "icons",
+ "Title": "图标",
+ "Description": "\r\n \r\n\r\n@code{\r\n private DateOnly _picker = DateOnly.FromDateTime(DateTime.Now);\r\n}",
+ "Type": "Demos.Components.Pickers.children.DatePickers.props.Icons",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "multiple",
+ "Title": "多选",
+ "Description": "\r\n \r\n \r\n \r\n TODO...\r\n \r\n \r\n\r\n@code {\r\n private IList _dates = new List\r\n {\r\n new DateOnly(2018,9,15),\r\n new DateOnly(2018,9,20)\r\n };\r\n}",
+ "Type": "Demos.Components.Pickers.children.DatePickers.props.Multiple",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "pickerDate",
+ "Title": "选取的日期",
+ "Description": "\r\n \r\n \r\n \r\n \r\n \r\n\r\n@code {\r\n private DateOnly _date = DateOnly.FromDateTime(DateTime.Now);\r\n private DateOnly _pickerDate;\r\n private IEnumerable _notes = new List();\r\n private List _allNotes = new List\r\n {\r\n \"President met with prime minister\",\r\n \"New power plant opened\",\r\n \"Rocket launch announced\",\r\n \"Global warming discussion cancelled\",\r\n \"Company changed its location\",\r\n };\r\n\r\n public void HandleOnPickerDateUpdate(DateOnly date)\r\n {\r\n _pickerDate = date;\r\n _notes = new List\r\n {\r\n _allNotes[Random.Shared.Next(0,5)],\r\n _allNotes[Random.Shared.Next(0,5)],\r\n _allNotes[Random.Shared.Next(0,5)]\r\n }.Distinct();\r\n }\r\n}",
+ "Type": "Demos.Components.Pickers.children.DatePickers.props.PickerDate",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "range",
+ "Title": "范围",
+ "Description": "\r\n \r\n \r\n \r\n \r\n \r\n\r\n @code {\r\n private List _dates = new List\r\n {\r\n new DateOnly(2019,9,10),\r\n new DateOnly(2019,9,20)\r\n };\r\n\r\n public string DateRangeText => string.Join(\" ~ \", _dates.Select(date => date.ToString(\"yyyy-MM-dd\")));\r\n }",
+ "Type": "Demos.Components.Pickers.children.DatePickers.props.Range",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "readonly",
+ "Title": "只读",
+ "Description": "\r\n \r\n \r\n \r\n\r\n@code {\r\n private DateOnly _picker = DateOnly.FromDateTime(DateTime.Now);\r\n}",
+ "Type": "Demos.Components.Pickers.children.DatePickers.props.Readonly",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "showCurrent",
+ "Title": "显示当前月份",
+ "Description": "\r\n \r\n\r\n@code {\r\n private DateOnly _picker1 = DateOnly.FromDateTime(DateTime.Now);\r\n private DateOnly _picker2 = new DateOnly(2013, 7, 29);\r\n private DateOnly _current = new DateOnly(2013, 07, 13);\r\n}",
+ "Type": "Demos.Components.Pickers.children.DatePickers.props.ShowCurrent",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "showSiblingMonths",
+ "Title": "显示相邻月份",
+ "Description": "\r\n \r\n \r\n \r\n\r\n@code {\r\n private DateOnly _picker = DateOnly.FromDateTime(DateTime.Now);\r\n}",
+ "Type": "Demos.Components.Pickers.children.DatePickers.props.ShowSiblingMonths",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "width",
+ "Title": "宽度",
+ "Description": "\r\n \r\n\r\n@code{\r\n private DateOnly _picker = DateOnly.FromDateTime(DateTime.Now);\r\n}",
+ "Type": "Demos.Components.Pickers.children.DatePickers.props.Width",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "dateButtons",
+ "Title": "日期按钮(TODO)",
+ "Description": "",
+ "Code": "\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cancel\r\n \r\n \r\n OK\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cancel\r\n \r\n \r\n OK\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n _menu2=false\"> \r\n \r\n \r\n \r\n \r\n\r\n@code {\r\n private DateOnly _prevDate = DateOnly.FromDateTime(DateTime.Now);\r\n private DateOnly _date = DateOnly.FromDateTime(DateTime.Now);\r\n private bool _menu;\r\n private bool _modal;\r\n private bool _menu2;\r\n\r\n public void MenuCancel()\r\n {\r\n _date = _prevDate;\r\n _menu = false;\r\n }\r\n\r\n public void MenuOK()\r\n {\r\n _prevDate = _date;\r\n _menu = false;\r\n }\r\n\r\n public void ModalCancel()\r\n {\r\n _date = _prevDate;\r\n _modal = false;\r\n }\r\n\r\n public void ModalOK()\r\n {\r\n _prevDate = _date;\r\n _modal = false;\r\n }\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.DatePickers.misc.DialogAndMenu",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 0,
+ "Name": "formatting",
+ "Title": "自定义格式",
+ "Description": "\r\n \r\n \r\n \r\n \r\n \r\n \r\n _menu1=false\"\r\n NoTitle> \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n _menu2=false\"\r\n NoTitle> \r\n \r\n \r\n \r\n \r\n \r\n\r\n@code {\r\n private DateOnly _date = DateOnly.FromDateTime(DateTime.Now);\r\n private string _dateFormatted = FormateDate(DateOnly.FromDateTime(DateTime.Now));\r\n private bool _menu1;\r\n private bool _menu2;\r\n\r\n private DateOnly Date\r\n {\r\n get\r\n {\r\n return _date;\r\n }\r\n set\r\n {\r\n _date = value;\r\n _dateFormatted = FormateDate(_date);\r\n }\r\n }\r\n\r\n public string ComputedDateFormatted => FormateDate(_date);\r\n\r\n public static string FormateDate(DateOnly date)\r\n {\r\n return date.ToString(\"MM/dd/yyyy\");\r\n }\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.DatePickers.misc.Formatting",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 0,
+ "Name": "formattingWithExternalLibraries",
+ "Title": "使用外部库自定义格式(TODO)",
+ "Description": "\r\n \r\n\r\n @code {\r\n private DateOnly _picker = DateOnly.FromDateTime(DateTime.Now);\r\n }\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.DatePickers.misc.Internationalization",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 0,
+ "Name": "orientation",
+ "Title": "方向",
+ "Description": "\r\n \r\n\r\n @code {\r\n private DateOnly _picker = DateOnly.FromDateTime(DateTime.Now);\r\n private bool _landscape;\r\n }\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.DatePickers.misc.Orientation",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cover": "https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/DatePickers.svg",
+ "Cols": 1,
+ "Related": [
+ "/components/buttons",
+ "/components/text-fields",
+ "/components/time-pickers"
+ ],
+ "Subtitle": "日期选择器",
+ "Title": "Date pickers",
+ "Type": "日期选择器"
+ },
+ {
+ "Desc": "\r\n \r\n\r\n@code {\r\n private DateOnly _picker = DateOnly.FromDateTime(DateTime.Now);\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.DatePickersMonth.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 1,
+ "Name": "allowedDates",
+ "Title": "允许的月份",
+ "Description": "\r\n \r\n\r\n@code {\r\n private DateOnly _date = DateOnly.Parse(\"2017-12\");\r\n private DateOnly _min = DateOnly.Parse(\"2017-06\");\r\n private DateOnly _max = DateOnly.Parse(\"2019-10\");\r\n private Func _allowedMonths = value => value.Month % 2 == 0;\r\n}",
+ "Type": "Demos.Components.Pickers.children.DatePickersMonth.props.AllowedDates",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "colors",
+ "Title": "颜色",
+ "Description": "\r\n \r\n\r\n@code {\r\n private DateOnly _picker = DateOnly.FromDateTime(DateTime.Now);\r\n private DateOnly _picker2 = DateOnly.FromDateTime(DateTime.Now);\r\n}",
+ "Type": "Demos.Components.Pickers.children.DatePickersMonth.props.Colors",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "icons",
+ "Title": "图标",
+ "Description": "\r\n \r\n\r\n@code {\r\n private DateOnly _picker = DateOnly.FromDateTime(DateTime.Now);\r\n}",
+ "Type": "Demos.Components.Pickers.children.DatePickersMonth.props.Icons",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "multiple",
+ "Title": "多选",
+ "Description": "\r\n \r\n\r\n@code {\r\n private IList _months = new List\r\n {\r\n new DateOnly(2018,9,1),\r\n new DateOnly(2018,10,1)\r\n };\r\n}",
+ "Type": "Demos.Components.Pickers.children.DatePickersMonth.props.Multiple",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "readonly",
+ "Title": "只读",
+ "Description": "\r\n \r\n \r\n \r\n\r\n@code {\r\n private DateOnly _picker = DateOnly.FromDateTime(DateTime.Now);\r\n}",
+ "Type": "Demos.Components.Pickers.children.DatePickersMonth.props.Readonly",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "showCurrent",
+ "Title": "显示当前月份",
+ "Description": "\r\n \r\n\r\n@code {\r\n private DateOnly _picker1 = DateOnly.FromDateTime(DateTime.Now);\r\n private DateOnly _picker2 = new DateOnly(2013, 9, 1);\r\n private DateOnly _current = new DateOnly(2013, 7, 1);\r\n}",
+ "Type": "Demos.Components.Pickers.children.DatePickersMonth.props.ShowCurrent",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "width",
+ "Title": "宽度",
+ "Description": "\r\n \r\n\r\n@code {\r\n private DateOnly _picker = DateOnly.FromDateTime(DateTime.Now);\r\n}",
+ "Type": "Demos.Components.Pickers.children.DatePickersMonth.props.Width",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "dialogAndMenu",
+ "Title": "对话框和菜单",
+ "Description": "\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cancel\r\n \r\n \r\n OK\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cancel\r\n \r\n \r\n OK\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n@code {\r\n private DateOnly _prevDate = DateOnly.FromDateTime(DateTime.Now);\r\n private DateOnly _date = DateOnly.FromDateTime(DateTime.Now);\r\n private bool _menu;\r\n private bool _modal;\r\n\r\n public void MenuCancel()\r\n {\r\n _date = _prevDate;\r\n _menu = false;\r\n }\r\n\r\n public void MenuOk()\r\n {\r\n _prevDate = _date;\r\n _menu = false;\r\n }\r\n\r\n public void ModalCancel()\r\n {\r\n _date = _prevDate;\r\n _modal = false;\r\n }\r\n\r\n public void ModalOk()\r\n {\r\n _prevDate = _date;\r\n _modal = false;\r\n }\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.DatePickersMonth.misc.DialogAndMenu",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 0,
+ "Name": "internationalization",
+ "Title": "国际化(TODO)",
+ "Description": "\r\n \r\n\r\n @code {\r\n private DateOnly _picker = DateOnly.FromDateTime(DateTime.Now);\r\n }\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.DatePickersMonth.misc.Internationalization",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 0,
+ "Name": "orientation",
+ "Title": "方向",
+ "Description": "\r\n \r\n\r\n @code {\r\n private DateOnly _picker = DateOnly.FromDateTime(DateTime.Now);\r\n private bool _landscape;\r\n }\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.DatePickersMonth.misc.Orientation",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cover": "https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/DatePickersMonth.svg",
+ "Cols": 1,
+ "Related": [
+ "/components/date-pickers",
+ "/components/menus",
+ "/components/time-pickers"
+ ],
+ "Subtitle": "月份选择器",
+ "Title": "Date pickers month",
+ "Type": "月份选择器"
+ },
+ {
+ "Desc": "\r\n \r\n\r\n@code {\r\n private TimeOnly? _picker = TimeOnly.FromDateTime(DateTime.Now);\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.TimePickers.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 0,
+ "Name": "allowedTimes",
+ "Title": "允许的时间",
+ "Description": "\r\n \r\n\r\n@code {\r\n private TimeOnly? _time = new TimeOnly(11, 15, 0);\r\n private TimeOnly? _timeStep = new TimeOnly(10, 10, 0);\r\n private Func _allowedHours = v => v % 2 != 0;\r\n private Func _allowedMinutes = v => v >= 10 && v <= 50;\r\n private Func _allowedStep = m => m % 10 == 0;\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.TimePickers.props.AllowedTimes",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "AMPMInTitle",
+ "Title": "标题中的AM/PM",
+ "Description": "\r\n \r\n\r\n@code {\r\n private TimeOnly? _picker;\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.TimePickers.props.AMPMInTitle",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "colors",
+ "Title": "颜色",
+ "Description": "\r\n \r\n\r\n@code {\r\n private TimeOnly? _e4;\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.TimePickers.props.Colors",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "disabled",
+ "Title": "禁用",
+ "Description": "\r\n \r\n\r\n@code {\r\n private TimeOnly? _picker;\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.TimePickers.props.Disabled",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "elevation",
+ "Title": "高度(z轴)",
+ "Description": "\r\n \r\n\r\n@code {\r\n private TimeOnly? _picker;\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.TimePickers.props.Elevation",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "format",
+ "Title": "格式化",
+ "Description": "\r\n \r\n \r\n \r\n\r\n@code {\r\n private TimeOnly? _e7;\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.TimePickers.props.Format",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "noTitle",
+ "Title": "无标题",
+ "Description": "\r\n \r\n\r\n@code {\r\n private TimeOnly? _picker;\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.TimePickers.props.NoTitle",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "range",
+ "Title": "范围",
+ "Description": "\r\n \r\n\r\n@code {\r\n private TimeOnly? _picker;\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.TimePickers.props.Readonly",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "scrollable",
+ "Title": "可滚动",
+ "Description": "\r\n \r\n\r\n@code {\r\n private TimeOnly? _picker;\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.TimePickers.props.Scrollable",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "useSeconds",
+ "Title": "使用秒",
+ "Description": "\r\n \r\n\r\n@code {\r\n private TimeOnly? _picker;\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.TimePickers.props.UseSeconds",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "width",
+ "Title": "宽度",
+ "Description": "\r\n \r\n \r\n \r\n\r\n@code {\r\n private TimeOnly? _time = new TimeOnly(11, 15, 1);\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.TimePickers.props.Width",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "dialogAndMenu",
+ "Title": "对话框和菜单",
+ "Description": "\r\n \r\n \r\n \r\n \r\n \r\n @if (_menu2)\r\n {\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n @if (_modal2)\r\n {\r\n \r\n \r\n Cancel\r\n \r\n \r\n OK\r\n \r\n \r\n }\r\n \r\n \r\n \r\n \r\n\r\n@code {\r\n private TimeOnly? _prevTime;\r\n private TimeOnly? _time;\r\n private bool _menu2;\r\n private bool _modal2;\r\n\r\n public void Cancel()\r\n {\r\n _time = _prevTime;\r\n _modal2 = false;\r\n }\r\n\r\n public void Ok()\r\n {\r\n _prevTime = _time;\r\n _modal2 = false;\r\n }\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.TimePickers.misc.DialogAndMenu",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cover": "https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/TimePickers.svg",
+ "Cols": 1,
+ "Related": [
+ "/components/buttons",
+ "/components/date-pickers",
+ "/components/text-fields"
+ ],
+ "Subtitle": "时间选择器",
+ "Title": "Time pickers",
+ "Type": "时间选择器"
+ },
+ {
+ "Order": 0,
+ "OtherDocs": {},
+ "LastWriteTime": "2021-11-17T17:23:13.6412417+08:00",
+ "DemoList": [
+ {
+ "Order": 20,
+ "Name": "Actions",
+ "Title": "操作",
+ "Description": "\r\n \r\n \r\n \r\n\r\n\r\n \r\n @if (context.Header.Value == \"actions\")\r\n {\r\n List items = new()\r\n {\r\n new Action()\r\n {\r\n Label = \"Edit\",\r\n Icon = \"mdi-pencil\",\r\n OnClick = EventCallback.Factory.Create(this, () => EditItem(context.Item))\r\n },\r\n new Action()\r\n {\r\n Label = \"Remove\",\r\n Icon = \"mdi-delete\",\r\n OnClick = EventCallback.Factory.Create(this, () => DeleteItem(context.Item))\r\n },\r\n new Action()\r\n {\r\n Label = \"Loading\",\r\n Icon = \"mdi-reload\",\r\n OnClick = EventCallback.Factory.Create(this, async () => await Task.Delay(1000))\r\n },\r\n };\r\n\r\n \r\n \r\n\r\n@code {\r\n private double width = 100;\r\n\r\n List actions = new()\r\n {\r\n new Action() { Label = \"alert\", Icon = \"mdi-alert-outline\" },\r\n new Action() { Label = \"heart\", Icon = \"mdi-heart\", Color = \"red\" },\r\n new Action() { Label = \"information\", Icon = \"mdi-information\", Disabled = true },\r\n new Action() { Label = \"check\", Icon = \"mdi-check\" },\r\n };\r\n\r\n List desserts = new()\r\n {\r\n new Dessert\r\n {\r\n Name = \"Frozen Yogurt\",\r\n Calories = 159,\r\n Fat = 6.0,\r\n Carbs = 24,\r\n Protein = 4.0\r\n },\r\n new Dessert\r\n {\r\n Name = \"Ice cream sandwich\",\r\n Calories = 237,\r\n Fat = 9.0,\r\n Carbs = 37,\r\n Protein = 4.3\r\n },\r\n new Dessert\r\n {\r\n Name = \"Eclair\",\r\n Calories = 262,\r\n Fat = 16.0,\r\n Carbs = 23,\r\n Protein = 6.0\r\n },\r\n new Dessert\r\n {\r\n Name = \"Jelly bean\",\r\n Calories = 375,\r\n Fat = 0.0,\r\n Carbs = 94,\r\n Protein = 0.0\r\n },\r\n new Dessert\r\n {\r\n Name = \"Lollipop\",\r\n Calories = 392,\r\n Fat = 0.2,\r\n Carbs = 98,\r\n Protein = 0\r\n },\r\n new Dessert\r\n {\r\n Name = \"KitKat\",\r\n Calories = 518,\r\n Fat = 26.0,\r\n Carbs = 65,\r\n Protein = 7\r\n }\r\n };\r\n\r\n List> headers = new()\r\n {\r\n new()\r\n {\r\n Text = \"Dessert (100g serving)\",\r\n Align = \"start\",\r\n Sortable = false,\r\n Value = nameof(Dessert.Name)\r\n },\r\n new() { Text = \"Calories\", Value = nameof(Dessert.Calories) },\r\n new() { Text = \"Actions\", Value = \"actions\", Sortable = false }\r\n };\r\n\r\n public void EditItem(Dessert item)\r\n {\r\n }\r\n\r\n public void DeleteItem(Dessert item)\r\n {\r\n }\r\n\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n }\r\n\r\n}",
+ "Type": "Demos.Components.Presets.props.Actions",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "confirm",
+ "Title": "确认框",
+ "Description": "\r\n 您确认该操作吗？\r\n \r\n\r\n@code {\r\n\r\n AlertTypes type = 0;\r\n bool visible;\r\n\r\n void Show(AlertTypes t = 0)\r\n {\r\n type = t;\r\n visible = true;\r\n }\r\n\r\n void Hide()\r\n {\r\n visible = false;\r\n }\r\n\r\n void Ok()\r\n {\r\n visible = false;\r\n }\r\n\r\n}",
+ "Type": "Demos.Components.Presets.props.Confirm",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 2,
+ "Name": "formModal",
+ "Title": "表单对话框",
+ "Description": " _favorites = new() { \"Basketball\", \"Football\", \"Ping-pong\", \"Badminton\" };\r\n \r\n DataModal _addModal = new();\r\n User _user;\r\n\r\n private void HandleOnCancel()\r\n {\r\n _addModal.Hide();\r\n }\r\n\r\n private async Task HandleOnClick()\r\n {\r\n _addModal.ShowLoading();\r\n\r\n if (_addModal.HasValue)\r\n {\r\n // Update\r\n }\r\n else\r\n {\r\n // Add\r\n }\r\n \r\n await Task.Delay(1000);\r\n\r\n _user = _addModal.Data;\r\n\r\n _addModal.HideLoading();\r\n\r\n _addModal.Hide();\r\n }\r\n\r\n public class User : IShallowCopy\r\n {\r\n [Required]\r\n public string UserName { get; set; }\r\n\r\n [Range(0, 1)]\r\n public int Gender { get; set; }\r\n\r\n [Required]\r\n public string City { get; set; }\r\n\r\n [Required]\r\n public List Favorites { get; set; } = new() { };\r\n\r\n public User ShallowCopy()\r\n {\r\n var user = (User)this.MemberwiseClone();\r\n user.Favorites = Favorites;\r\n return user;\r\n }\r\n }\r\n\r\n public class DataModal where T : class, new()\r\n {\r\n public bool Visible { get; set; }\r\n\r\n public T Data { get; private set; }\r\n\r\n public bool HasValue { get; private set; }\r\n\r\n public bool Loading { get; private set; }\r\n\r\n public DataModal()\r\n {\r\n Data = new T();\r\n }\r\n\r\n public void Show() => Visible = true;\r\n\r\n /// \r\n /// 显示弹窗\r\n /// \r\n /// \r\n /// 写入数据之前请确保此对象是拷贝过的 \r\n public void Show(T data)\r\n {\r\n Visible = true;\r\n HasValue = true;\r\n Data = data;\r\n }\r\n\r\n public virtual void Hide()\r\n {\r\n Visible = false;\r\n HasValue = false;\r\n Data = new T();\r\n }\r\n\r\n public bool ShowLoading() => Loading = true;\r\n\r\n public bool HideLoading() => Loading = false;\r\n }\r\n\r\n public interface IShallowCopy\r\n {\r\n public T ShallowCopy();\r\n }\r\n\r\n}",
+ "Type": "Demos.Components.Presets.props.FormModal",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "modal",
+ "Title": "对话框",
+ "Description": " _favorites = new() { \"Basketball\", \"Football\", \"Ping-pong\", \"Badminton\" };\r\n readonly List _friends = new() { \"Rachel Greene\", \"Monica Geller\", \"Joey Tribbiani\", \"Ross Geller\", \"Chandler Bing\", \"Phoebe Buffay\" };\r\n\r\n DataModal _addModal = new();\r\n User _user;\r\n\r\n private void HandleOnCancel()\r\n {\r\n _addModal.Hide();\r\n }\r\n\r\n private async Task HandleOnClick()\r\n {\r\n _addModal.ShowLoading();\r\n\r\n if (_addModal.HasValue)\r\n {\r\n // Update\r\n }\r\n else\r\n {\r\n // Add\r\n }\r\n\r\n await Task.Delay(1000);\r\n\r\n _user = _addModal.Data;\r\n\r\n _addModal.HideLoading();\r\n\r\n _addModal.Hide();\r\n }\r\n\r\n public class User : IShallowCopy\r\n {\r\n public string UserName { get; set; }\r\n public int Gender { get; set; }\r\n public string City { get; set; }\r\n public List Favorites { get; set; } = new() { };\r\n public List Friends { get; set; } = new() { };\r\n\r\n public User ShallowCopy()\r\n {\r\n var user = (User)this.MemberwiseClone();\r\n user.Friends = Friends;\r\n user.Favorites = Favorites;\r\n return user;\r\n }\r\n }\r\n\r\n public class DataModal where T : class, new()\r\n {\r\n public bool Visible { get; set; }\r\n\r\n public T Data { get; private set; }\r\n\r\n public bool HasValue { get; private set; }\r\n\r\n public bool Loading { get; private set; }\r\n\r\n public DataModal()\r\n {\r\n Data = new T();\r\n }\r\n\r\n public void Show() => Visible = true;\r\n\r\n /// \r\n /// 显示弹窗\r\n /// \r\n /// \r\n /// 写入数据之前请确保此对象是拷贝过的 \r\n public void Show(T data)\r\n {\r\n Visible = true;\r\n HasValue = true;\r\n Data = data;\r\n }\r\n\r\n public virtual void Hide()\r\n {\r\n Visible = false;\r\n HasValue = false;\r\n Data = new T();\r\n }\r\n\r\n public bool ShowLoading() => Loading = true;\r\n\r\n public bool HideLoading() => Loading = false;\r\n }\r\n\r\n public interface IShallowCopy\r\n {\r\n public T ShallowCopy();\r\n }\r\n\r\n}",
+ "Type": "Demos.Components.Presets.props.Modal",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "pageHeader",
+ "Title": "页头",
+ "Description": "\r\n \r\n mdi-plus Add Order \r\n\r\n \r\n \r\n mdi-refresh \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n i\"\r\n ItemText=\"i => i\"\r\n HideDetails=\"true\">\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n visible1 = false\">\r\n Cancel\r\n \r\n { start = date1.ToShortDateString(); visible1 = false; }\">\r\n OK\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n visible2 = false\">\r\n Cancel\r\n \r\n { end = date2.ToShortDateString(); visible2 = false; }\">\r\n OK\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n@code {\r\n readonly List users = new() { \"Rachel Greene\", \"Monica Geller\", \"Joey Tribbiani\", \"Ross Geller\", \"Chandler Bing\", \"Phoebe Buffay\" };\r\n\r\n DateOnly date1 = DateOnly.FromDateTime(DateTime.Now);\r\n DateOnly date2 = DateOnly.FromDateTime(DateTime.Now);\r\n\r\n bool visible1;\r\n bool visible2;\r\n\r\n string orderId;\r\n string user;\r\n string start;\r\n string end;\r\n\r\n void OnBack()\r\n {\r\n // navigate\r\n }\r\n\r\n Task OnSearch()\r\n {\r\n return Task.Delay(1000);\r\n }\r\n\r\n void OnClear()\r\n {\r\n orderId = null;\r\n user = null;\r\n start = null;\r\n end = null;\r\n }\r\n}",
+ "Type": "Demos.Components.Presets.props.PageHeader",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 30,
+ "Name": "sidebar",
+ "Title": "侧边栏",
+ "Description": " m.Label\"\r\n Icon=\"m => m.Icon\"\r\n Key=\"m => m.Value\"\r\n Children=\"m => m.SubMenus\"\r\n TItem=\"Menu\"\r\n OnClick=\"Click\">\r\n \r\n\r\n@code {\r\n\r\n static List\n"
+ },
+ "LastWriteTime": "2021-11-17T17:23:13.6512445+08:00",
+ "DemoList": [
+ {
+ "Order": 0,
+ "Name": "index",
+ "Title": "使用",
+ "Description": "\r\n\t \r\n\r\n",
+ "Type": "Demos.Components.Progress.children.ProgressLinear.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 1,
+ "Name": "BufferValue",
+ "Title": "缓冲值",
+ "Description": "\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n@code\r\n{\r\n private double _value = 10;\r\n private double _bufferValue = 20;\r\n protected Timer Timer { get; set; }\r\n protected override void OnInitialized()\r\n {\r\n if (Timer == null)\r\n {\r\n Timer = new Timer\r\n {\r\n Interval = 2000\r\n };\r\n Timer.Elapsed += Timer_Elapsed;\r\n Timer.Start();\r\n }\r\n }\r\n\r\n private async void Timer_Elapsed(object sender, ElapsedEventArgs e)\r\n {\r\n await InvokeAsync(() =>\r\n {\r\n if (_bufferValue >= 100)\r\n {\r\n Timer.Stop();\r\n _value = 0;\r\n _bufferValue = 10;\r\n Timer.Start();\r\n }\r\n else\r\n {\r\n _value += new Random().NextDouble() * (15 - 5) + 5;\r\n _bufferValue += new Random().NextDouble() * (15 - 5) + 6;\r\n }\r\n\r\n StateHasChanged();\r\n });\r\n }\r\n}",
+ "Type": "Demos.Components.Progress.children.ProgressLinear.props.BufferValue",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 2,
+ "Name": "color",
+ "Title": "颜色",
+ "Description": "\r\n \r\n\r\n \r\n\r\n \r\n\r\n",
+ "Type": "Demos.Components.Progress.children.ProgressLinear.props.Color",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 3,
+ "Name": "indeterminate",
+ "Title": "不定线条",
+ "Description": "\r\n\t \r\n\r\n\t \r\n\r\n\t \r\n\r\n\t \r\n\r\n",
+ "Type": "Demos.Components.Progress.children.ProgressLinear.props.Indeterminate",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 8,
+ "Name": "query",
+ "Title": "查询",
+ "Description": "\r\n \r\n\r\n@code {\r\n private bool _query;\r\n private bool _show = true;\r\n private double _value = 0;\r\n protected Timer Timer { get; set; }\r\n\r\n protected override void OnInitialized()\r\n {\r\n if (Timer == null)\r\n {\r\n Timer = new Timer\r\n {\r\n Interval = 1000\r\n };\r\n Timer.Elapsed += Timer_Elapsed;\r\n }\r\n QueryAndIndeterminate();\r\n }\r\n\r\n private async void Timer_Elapsed(object sender, ElapsedEventArgs e)\r\n {\r\n await InvokeAsync(() =>\r\n {\r\n if (_value == 100)\r\n {\r\n Timer.Stop();\r\n\r\n _show = false;\r\n StateHasChanged();\r\n Task.Run(async () =>\r\n {\r\n await Task.Delay(2000);\r\n QueryAndIndeterminate();\r\n });\r\n }\r\n else\r\n {\r\n _value += 25;\r\n\r\n StateHasChanged();\r\n }\r\n });\r\n }\r\n\r\n private void QueryAndIndeterminate()\r\n {\r\n _query = true;\r\n _show = true;\r\n _value = 0;\r\n\r\n InvokeAsync(StateHasChanged);\r\n\r\n Task.Run(async () =>\r\n {\r\n await Task.Delay(2500);\r\n\r\n _query = false;\r\n await InvokeAsync(StateHasChanged);\r\n Timer.Start();\r\n\r\n });\r\n }\r\n}\r\n\r\n\r\n",
+ "Type": "Demos.Components.Progress.children.ProgressLinear.props.Query",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 4,
+ "Name": "reversed",
+ "Title": "反转",
+ "Description": "\r\n \r\n\r\n \r\n\r\n \r\n
\r\nIn specific cases you may want progress to display in left-to-right mode regardless of the application direction (LTR or RTL): \r\n\r\n \r\n\r\n@code {\r\n private bool _rtl = false;\r\n}\r\n",
+ "Type": "Demos.Components.Progress.children.ProgressLinear.props.Reversed",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 5,
+ "Name": "rounded",
+ "Title": "Rounded（圆角）",
+ "Description": "\r\n\t \r\n\r\n\t \r\n\r\n\t \r\n\r\n\t \r\n\r\n",
+ "Type": "Demos.Components.Progress.children.ProgressLinear.props.Rounded",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 6,
+ "Name": "stream",
+ "Title": "流",
+ "Description": "\r\n\t \r\n\r\n\t \r\n\r\n\t \r\n\r\n\t \r\n\r\n",
+ "Type": "Demos.Components.Progress.children.ProgressLinear.props.Stream",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 7,
+ "Name": "striped",
+ "Title": "有条纹的",
+ "Description": "\r\n\t \r\n\r\n\t \r\n\r\n\t \r\n\r\n\t \r\n\r\n",
+ "Type": "Demos.Components.Progress.children.ProgressLinear.props.Striped",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 9,
+ "Name": "default",
+ "Title": "默认值",
+ "Description": "\r\n \r\n\r\n \r\n @($\"{context}%\")\r\n \r\n \r\n\r\n \r\n @($\"{context}%\")\r\n \r\n \r\n\r\n@code {\r\n private double _skill = 20;\r\n private double _knowledge = 33;\r\n private double _power = 78;\r\n\r\n private void SkillChanged(double value)\r\n {\r\n _skill = value;\r\n }\r\n\r\n private void KnowledgeChanged(double value)\r\n {\r\n _knowledge = value;\r\n }\r\n\r\n private void PowerChanged(double value)\r\n {\r\n _power = value;\r\n }\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Progress.children.ProgressLinear.contents.Default",
+ "Style": "",
+ "Debug": false,
+ "Group": 2
+ },
+ {
+ "Order": 10,
+ "Name": "determinate",
+ "Title": "定值线条",
+ "Description": "\r\n\t \r\n\r\n\t \r\n\r\n\t \r\n\r\n\t \r\n\r\n\r\n@code{\r\n\tprivate double _valueDeterminate = 50;\r\n\r\n\tprivate void HandleOnChange(double value)\r\n\t{\r\n\t\t_valueDeterminate = value;\r\n\t}\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Progress.children.ProgressLinear.misc.Determinate",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 11,
+ "Name": "fileLoader",
+ "Title": "文件加载器",
+ "Description": "\r\n \r\n \r\n\r\n My Files \r\n\r\n \r\n mdi-plus \r\n \r\n\r\n \r\n mdi-share-variant \r\n \r\n\r\n \r\n mdi-magnify \r\n \r\n\r\n \r\n mdi-dots-vertical \r\n \r\n \r\n\r\n \r\n \r\n \r\n Getting your files\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n",
+ "Type": "Demos.Components.Progress.children.ProgressLinear.misc.FileLoader",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 12,
+ "Name": "toolbarLoader",
+ "Title": "工具栏加载器",
+ "Description": "\r\n \r\n \r\n mdi-square \r\n mdi-circle \r\n mdi-triangle \r\n \r\n\r\n \r\n \r\n mdi-arrow-left \r\n \r\n\r\n My Recipes \r\n\r\n \r\n \r\n\r\n \r\n mdi-magnify \r\n \r\n\r\n \r\n mdi-dots-vertical \r\n \r\n \r\n\r\n \r\n \r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\tLoading(true)\">\r\n Start loading\r\n \r\n\t\t\t\t\t \r\n\t\t\t\t \r\n \r\n \r\n \r\n \r\n\r\n@code {\r\n private bool _loading = false;\r\n\r\n private void Loading(bool val)\r\n {\r\n if (!val) return;\r\n\r\n _loading = true;\r\n\r\n Task.Run(async () =>\r\n {\r\n await Task.Delay(3000);\r\n _loading = false;\r\n\r\n await InvokeAsync(StateHasChanged);\r\n });\r\n }\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Progress.children.ProgressLinear.misc.ToolbarLoader",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cols": 1,
+ "Related": [
+ "/components/cards",
+ "/components/progress-circular",
+ "/components/lists"
+ ],
+ "Subtitle": "进度条",
+ "Title": "Progress linear",
+ "Type": "进度条"
+ },
+ {
+ "Desc": "\r\n \r\n Rate Our Framework\r\n \r\n \r\n If you enjoy using Vuetify, please take a few seconds to rate your experience with the framework. It really helps!\r\n\r\n \r\n \r\n \r\n No Thanks\r\n \r\n \r\n Rate Now\r\n \r\n \r\n \r\n\r\n@code\r\n{\r\n private double _rating = 4.5;\r\n}",
+ "Type": "Demos.Components.Rating.props.Incremented",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 2,
+ "Name": "length",
+ "Title": "长度",
+ "Description": " _items = new List\r\n {\r\n new RatingItem { Index = 1, IsFilled = true, IsHovered = true, Value = 1, Click = x => _rating = 2},\r\n new RatingItem { Index = 2, IsFilled = true, IsHovered = true, Value = 2, Click = x => _rating = 3},\r\n new RatingItem { Index = 3, IsFilled = true, IsHovered = true, Value = 3, Click = x => _rating = 4},\r\n new RatingItem { Index = 4, IsFilled = true, IsHovered = true, Value = 4, Click = x => _rating = 5},\r\n new RatingItem { Index = 5, IsFilled = true, IsHovered = true, Value = 5, Click = x => _rating = 6}\r\n };\r\n\r\n private string GenColor(int index)\r\n {\r\n return _colors[index];\r\n }\r\n}",
+ "Type": "Demos.Components.Rating.contents.ItemContent",
+ "Style": "",
+ "Debug": false,
+ "Group": 2
+ },
+ {
+ "Order": 7,
+ "Name": "advanced",
+ "Title": "高级用法",
+ "Description": "\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n mdi-share-variant \r\n \r\n \r\n \r\n \r\n Share\r\n _dialog = false\">\r\n mdi-close-circle-outline \r\n \r\n \r\n \r\n \r\n \r\n mdi-facebook \r\n \r\n Facebook \r\n \r\n \r\n \r\n mdi-twitter \r\n \r\n Twitter \r\n \r\n \r\n \r\n mdi-email \r\n \r\n Email \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 16,544 reviews\r\n \r\n \r\n \r\n \r\n @($\"mdi-numeric-{props.Index}-box\")\r\n \r\n \r\n \r\n \r\n \r\n\r\n@code\r\n{\r\n [Inject]\r\n public Document Document { get; set; }\r\n\r\n private bool _copied = false;\r\n private bool _dialog = false;\r\n private double _rating = 10;\r\n private MTextField _ref;\r\n\r\n private List _items = new List\r\n {\r\n new RatingItem {Index = 1, IsFilled = true},\r\n new RatingItem {Index = 2, IsFilled = true},\r\n new RatingItem {Index = 3, IsFilled = true},\r\n new RatingItem {Index = 4, IsFilled = true},\r\n new RatingItem {Index = 5, IsFilled = true},\r\n new RatingItem {Index = 6, IsFilled = true},\r\n new RatingItem {Index = 7, IsFilled = true},\r\n new RatingItem {Index = 8, IsFilled = true},\r\n new RatingItem {Index = 9, IsFilled = true},\r\n new RatingItem {Index = 10, IsFilled = true}\r\n };\r\n\r\n private async Task Copy(FocusEventArgs args)\r\n {\r\n await Document.ExecCommandAsync(\"selectAll\", false, null);\r\n _copied = await Document.ExecCommandAsync(\"copy\", false, null);\r\n }\r\n}",
+ "Type": "Demos.Components.Rating.misc.Advanced",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 7,
+ "Name": "card",
+ "Title": "卡片评级",
+ "Description": "\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Rate this album\r\n \r\n \r\n\r\n@code\r\n{\r\n private double _rating = 4.3;\r\n}",
+ "Type": "Demos.Components.Rating.misc.Card",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cols": 1,
+ "Related": [
+ "/components/cards",
+ "/components/icons",
+ "/components/lists"
+ ],
+ "Subtitle": "评级",
+ "Title": "Ratings",
+ "Type": "评级"
+ },
+ {
+ "Desc": "\r\n \r\n \r\n \r\n \r\n #1: (3r x 2c)\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n #2: (1r x 1c)\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n #3: (1r x 1c)\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n #5: (2r x 2c)\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n #4: (2r x 1c)\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n #6: (2r x 1c)\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n",
+ "Type": "Demos.Components.Sheet.props.Color",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "elevation",
+ "Title": "高度(z轴)",
+ "Description": "\r\n \r\n @foreach (var elevation in _elevations)\r\n {\r\n \r\n \r\n \r\n \r\n }\r\n\r\n \r\n \r\n\r\n@code{\r\n private int[] _elevations = new int[]\r\n {\r\n 6,12,18\r\n };\r\n}\r\n\r\n\r\n",
+ "Type": "Demos.Components.Sheet.props.Elevation",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "rounded",
+ "Title": "圆角",
+ "Description": "\r\n \r\n @foreach (var rounded in _roundeds)\r\n {\r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n \r\n\r\n@code{\r\n private StringBoolean[] _roundeds = new StringBoolean[]\r\n {\r\n false,true,\"xl\"\r\n };\r\n}\r\n\r\n\r\n",
+ "Type": "Demos.Components.Sheet.props.Rounded",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cover": "https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Sheet.svg",
+ "Cols": 1,
+ "Related": [
+ "/components/cards",
+ "/components/grid-system",
+ "/styles/elevation"
+ ],
+ "Subtitle": "工作表",
+ "Title": "Sheets",
+ "Type": "工作表"
+ },
+ {
+ "Desc": "\r\n \r\n \r\n",
+ "Type": "Demos.Components.SkeletonLoader.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 0,
+ "Name": "BoilerplateComponent",
+ "Title": "样板组件",
+ "Description": "\r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n@code{\r\n Attrs _attrs = new Attrs\r\n {\r\n Class =\"mb-6\",\r\n Boilerplate=true,\r\n Elevation=2\r\n };\r\n\r\n class Attrs\r\n {\r\n public string Class { get; set; }\r\n\r\n public bool Boilerplate { get; set; } \r\n\r\n public StringNumber Elevation { get; set; } \r\n }\r\n}",
+ "Type": "Demos.Components.SkeletonLoader.misc.BoilerplateComponent",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cover": "https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/SkeletonLoader.svg",
+ "Cols": 1,
+ "Related": [
+ "/components/cards",
+ "/components/progress-circular",
+ "/components/buttons"
+ ],
+ "Subtitle": "骨架装载器",
+ "Title": "Skeleton loaders",
+ "Type": "骨架装载器"
+ },
+ {
+ "Desc": "\r\n \r\n Lorem ipsum dolor sit amet consectetur.\r\n \r\n\r\n \r\n Lorem ipsum dolor sit amet consectetur.\r\n \r\n\r\n \r\n Lorem ipsum dolor sit amet consectetur.\r\n \r\n\r\n \r\n Lorem ipsum dolor sit amet consectetur.\r\n \r\n\r\n \r\n Lorem ipsum dolor sit amet consectetur.\r\n \r\n \r\n\r\n",
+ "Type": "Demos.Components.Snackbar.props.Variants",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "vertical",
+ "Title": "垂直",
+ "Description": "\r\n \r\n 1\">\r\n Name of step 1\r\n \r\n 2\">\r\n Name of step 2\r\n \r\n \r\n Name of step 3\r\n \r\n \r\n\r\n \r\n \r\n _step=2\">Continue \r\n Cancel \r\n \r\n \r\n _step=3\">Continue \r\n Cancel \r\n \r\n \r\n _step=1\">Continue \r\n Cancel \r\n \r\n \r\n \r\n\r\n@code {\r\n private int _step = 1;\r\n}",
+ "Type": "Demos.Components.Stepper.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 1,
+ "Name": "alternateLabel",
+ "Title": "备用标签",
+ "Description": "\r\n 1\">\r\n Select an app\r\n Summarize if needed\r\n \r\n \r\n _step=2\">Continue \r\n Cancel \r\n \r\n 2\">\r\n Configure analytics for this app\r\n \r\n \r\n _step=3\">Continue \r\n Cancel \r\n \r\n 3\">\r\n Select an ad format and name ad unit\r\n \r\n \r\n _step=4\">Continue \r\n Cancel \r\n \r\n \r\n View setup instructions\r\n \r\n \r\n _step=1\">Continue \r\n Cancel \r\n \r\n \r\n\r\n@code {\r\n private int _step = 1;\r\n}",
+ "Type": "Demos.Components.Stepper.props.Vertical",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 4,
+ "Name": "alternativeLabelWithErrors",
+ "Title": "错误状态的备用标签",
+ "Description": "\r\n \r\n \r\n Ad type\r\n \r\n\r\n \r\n Ad style\r\n \r\n\r\n \r\n Custom channels\r\n Alert message\r\n \r\n\r\n \r\n Get code\r\n \r\n \r\n \r\n\r\n@code {\r\n List> rules = new() { Rule };\r\n \r\n private static bool Rule()\r\n {\r\n return false;\r\n }\r\n}\r\n",
+ "Type": "Demos.Components.Stepper.misc.AlternativeLabelWithErrors",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 5,
+ "Name": "dynamicSteps",
+ "Title": "动态步骤",
+ "Description": " _items = new List { 2, 3, 4, 5, 6 };\r\n private int _el = 1;\r\n private int _steps = 2;\r\n protected int Steps\r\n {\r\n get\r\n {\r\n return _steps;\r\n }\r\n set\r\n {\r\n if (_el > value)\r\n {\r\n _el = value;\r\n }\r\n _steps = value;\r\n }\r\n }\r\n\r\n private void NextStep(int step)\r\n {\r\n if (step == Steps)\r\n {\r\n _el = 1;\r\n }\r\n else\r\n {\r\n _el = step + 1;\r\n }\r\n }\r\n}",
+ "Type": "Demos.Components.Stepper.misc.DynamicSteps",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 6,
+ "Name": "editableSteps",
+ "Title": "可编辑步骤",
+ "Description": "\r\n \r\n \r\n Select campaign settings\r\n \r\n\r\n \r\n Create an ad group\r\n \r\n\r\n \r\n Create an ad\r\n \r\n \r\n \r\n",
+ "Type": "Demos.Components.Stepper.misc.EditableSteps",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 7,
+ "Name": "errors",
+ "Title": "错误状态",
+ "Description": "\r\n \r\n \r\n Ad unit details\r\n \r\n\r\n \r\n Ad templates\r\n Alert message\r\n \r\n\r\n \r\n Ad sizes\r\n \r\n \r\n \r\n\r\n@code {\r\n List> rules = new() { Rule };\r\n\r\n private static bool Rule()\r\n {\r\n return false;\r\n }\r\n}",
+ "Type": "Demos.Components.Stepper.misc.Errors",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 8,
+ "Name": "horizontalSteps",
+ "Title": "水平步骤线",
+ "Description": "\r\n \r\n \r\n Select campaign settings\r\n \r\n\r\n \r\n Create an ad group\r\n \r\n\r\n \r\n Create an ad\r\n \r\n \r\n \r\n",
+ "Type": "Demos.Components.Stepper.misc.HorizontalSteps",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 9,
+ "Name": "linearSteppers",
+ "Title": "线性步骤",
+ "Description": "\r\n \r\n \r\n Select campaign settings\r\n \r\n\r\n \r\n Create an ad group\r\n \r\n\r\n \r\n Create an ad\r\n \r\n \r\n \r\n",
+ "Type": "Demos.Components.Stepper.misc.NonEditableSteps",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 11,
+ "Name": "optionalSteps",
+ "Title": "可选步骤",
+ "Description": "\r\n \r\n Name of Step 1\r\n \r\n\r\n \r\n e13 = 2\">\r\n Continue\r\n \r\n \r\n Cancel\r\n \r\n \r\n\r\n \r\n Name of Step 2\r\n \r\n\r\n \r\n e13 = 3\">\r\n Continue\r\n \r\n \r\n Cancel\r\n \r\n \r\n\r\n \r\n Ad templates\r\n Alert message\r\n \r\n\r\n \r\n e13 = 4\">\r\n Continue\r\n \r\n \r\n Cancel\r\n \r\n \r\n\r\n \r\n View setup instructions\r\n \r\n\r\n \r\n e13 = 1\">\r\n Continue\r\n \r\n \r\n Cancel\r\n \r\n \r\n \r\n\r\n@code {\r\n private int e13 = 2;\r\n List> rules = new List>() { Rule };\r\n private static bool Rule()\r\n {\r\n return false;\r\n }\r\n}",
+ "Type": "Demos.Components.Stepper.misc.VerticalErrors",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cover": "https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Stepper.svg",
+ "Cols": 1,
+ "Related": [
+ "/components/tabs",
+ "/components/buttons",
+ "/components/windows"
+ ],
+ "Subtitle": "步骤条",
+ "Title": "Steppers",
+ "Type": "步骤条"
+ },
+ {
+ "Desc": "Subheader ",
+ "Type": "Demos.Components.Subheader.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 0,
+ "Name": "inset",
+ "Title": "嵌入",
+ "Description": "\r\n \r\n \r\n Subheader\r\n \r\n\r\n \r\n @foreach (var item in _items)\r\n {\r\n if (item.Action != null)\r\n {\r\n \r\n \r\n @item.Action \r\n \r\n\r\n \r\n @item.Title \r\n \r\n \r\n }\r\n else if (item.Divider)\r\n {\r\n \r\n \r\n \r\n\r\n@code{\r\n class Item\r\n {\r\n public string Action { get; set; }\r\n public string Title { get; set; }\r\n public bool Divider { get; set; }\r\n }\r\n\r\n private List- _items = new List
- \r\n {\r\n new Item \r\n {\r\n Action= \"mdi-label\",\r\n Title= \"List item 1\",\r\n },\r\n new Item \r\n {\r\n Divider= true,\r\n },\r\n new Item \r\n {\r\n Action= \"mdi-label\",\r\n Title= \"List item 2\",\r\n },\r\n new Item \r\n {\r\n Divider= true,\r\n },\r\n new Item\r\n {\r\n Action= \"mdi-label\",\r\n Title= \"List item 3\",\r\n }\r\n };\r\n}",
+ "Type": "Demos.Components.Subheader.props.Inset",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "grid",
+ "Title": "栅格",
+ "Description": "
\r\n \r\n \r\n \r\n \r\n mdi-arrow-left \r\n \r\n\r\n Albums \r\n\r\n \r\n mdi-magnify \r\n \r\n \r\n\r\n May \r\n \r\n \r\n @for (var i = 1; i <= 6; i++)\r\n {\r\n var index = i + 20;\r\n \r\n \r\n }\r\n \r\n \r\n\r\n June \r\n \r\n \r\n @for (var i = 1; i <= 6; i++)\r\n {\r\n var index = i + 5;\r\n \r\n \r\n }\r\n \r\n \r\n\r\n \r\n \r\n ",
+ "Type": "Demos.Components.Subheader.misc.Grid",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 1,
+ "Name": "menu",
+ "Title": "菜单",
+ "Description": "\r\n \r\n \r\n \r\n Manage \r\n\r\n \r\n mdi-dots-vertical \r\n \r\n \r\n\r\n \r\n @foreach (var item in _items)\r\n {\r\n if (!string.IsNullOrWhiteSpace(item.Action))\r\n {\r\n \r\n \r\n @item.Action \r\n \r\n\r\n \r\n @item.Title \r\n \r\n \r\n }\r\n else if (item.Divider)\r\n {\r\n @item.Header \r\n }\r\n }\r\n \r\n \r\n \r\n \r\n\r\n@code\r\n{\r\n private class DataDemo\r\n {\r\n public string Action { get; set; }\r\n public string Title { get; set; }\r\n public bool Divider { get; set; }\r\n public string Header { get; set; }\r\n }\r\n\r\n private List _items = new List()\r\n {\r\n new DataDemo { Action = \"mdi-inbox-arrow-down\", Title = \"Inbox\" },\r\n new DataDemo { Action = \"mdi-send\", Title = \"Sent\" },\r\n new DataDemo { Action = \"mdi-delete\", Title = \"Trash\" },\r\n new DataDemo { Action = \"mdi-alert-octagon\", Title = \"Spam\" },\r\n new DataDemo { Divider = true },\r\n new DataDemo { Header = \"Labels\" },\r\n new DataDemo { Action = \"mdi-label\", Title = \"Family\" },\r\n new DataDemo { Action = \"mdi-label\", Title = \"Friends\" },\r\n new DataDemo { Action = \"mdi-label\", Title = \"Work\" }\r\n };\r\n}",
+ "Type": "Demos.Components.Subheader.misc.Menu",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 2,
+ "Name": "socialMedia",
+ "Title": "社交媒体",
+ "Description": "\r\n \r\n Application \r\n\r\n \r\n mdi-magnify \r\n \r\n \r\n\r\n @foreach (var type in types)\r\n {\r\n \r\n @type \r\n\r\n \r\n \r\n \r\n \r\n @card\r\n \r\n\r\n \r\n @foreach (var social in socials)\r\n {\r\n \r\n @social.Icon \r\n \r\n }\r\n \r\n \r\n \r\n }\r\n \r\n \r\n }\r\n \r\n\r\n@code\r\n{\r\n string[] cards = new string[3] {\"Good\", \"Best\", \"Finest\"};\r\n \r\n List socials = new List\r\n {\r\n new Social {Icon = \"mdi-facebook\", Color = \"indigo\"},\r\n new Social {Icon = \"mdi-linkedin\", Color = \"cyan darken-1\"},\r\n new Social {Icon = \"mdi-instagram\", Color = \"red lighten-3\"}\r\n };\r\n \r\n string[] types = new string[2] {\"Places to Be\", \"Places to See\"};\r\n\r\n double GetImage()\r\n {\r\n var min = 550;\r\n var max = 560;\r\n var random = new Random();\r\n var num = random.Next(1, 100) * 0.01;\r\n\r\n return Math.Floor(num * (max - min + 1)) + min;\r\n }\r\n \r\n public class Social\r\n {\r\n public string Icon { get; set; }\r\n public string Color { get; set; }\r\n }\r\n}",
+ "Type": "Demos.Components.Subheader.misc.SocialMedia",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cols": 1,
+ "Related": [
+ "/components/cards",
+ "/components/grid-system",
+ "/components/lists"
+ ],
+ "Subtitle": "副标题",
+ "Title": "Subheaders",
+ "Type": "副标题"
+ },
+ {
+ "Desc": "\r\n r.Name\"\r\n ItemsPerPage=\"4\"\r\n SingleExpand=\"_singleExpand\"\r\n HideDefaultFooter>\r\n \r\n \r\n @foreach (var item in props.Items)\r\n {\r\n var expanded = props.IsExpanded(item);\r\n var expand = delegate (bool v) { props.Expand(item, v); };\r\n \r\n \r\n \r\n \r\n \r\n \r\n Calories: \r\n \r\n @item.Calories\r\n \r\n \r\n \r\n Fat: \r\n \r\n @item.Fat\r\n \r\n \r\n \r\n Carbs: \r\n \r\n @item.Carbs\r\n \r\n \r\n \r\n Protein: \r\n \r\n @item.Protein\r\n \r\n \r\n \r\n Sodium: \r\n \r\n @item.Sodium\r\n \r\n \r\n \r\n Calcium: \r\n \r\n @item.Calcium\r\n \r\n \r\n \r\n Iron: \r\n \r\n @item.Iron\r\n \r\n \r\n \r\n }\r\n \r\n \r\n }\r\n \r\n \r\n \r\n \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n\r\n public int Sodium { get; set; }\r\n\r\n public string Calcium { get; set; }\r\n\r\n public string Iron { get; set; }\r\n }\r\n\r\n private bool _singleExpand;\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Sodium= 87,\r\n Calcium= \"14%\",\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Sodium= 129,\r\n Calcium= \"8%\",\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Sodium= 337,\r\n Calcium= \"6%\",\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Sodium= 413,\r\n Calcium= \"3%\",\r\n Iron= \"8%\",\r\n },\r\n };\r\n }",
+ "Type": "Demos.Components.Tables.children.DataIterator.props.Default",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "headerAndFooter",
+ "Title": "页眉和页脚",
+ "Description": "\r\n \r\n \r\n \r\n This is a header \r\n \r\n \r\n \r\n \r\n @foreach (var item in _desserts)\r\n {\r\n \r\n \r\n \r\n @item.Name\r\n \r\n\r\n \r\n \r\n Calories: \r\n \r\n @item.Calories\r\n \r\n \r\n\r\n \r\n Fat: \r\n \r\n @item.Fat\r\n \r\n \r\n\r\n \r\n Carbs: \r\n \r\n @item.Carbs\r\n \r\n \r\n\r\n \r\n Protein: \r\n \r\n @item.Protein\r\n \r\n \r\n\r\n \r\n Sodium: \r\n \r\n @item.Sodium\r\n \r\n \r\n\r\n \r\n Calcium: \r\n \r\n @item.Calcium\r\n \r\n \r\n\r\n \r\n Iron: \r\n \r\n @item.Iron\r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n \r\n \r\n This is a footer\r\n \r\n \r\n \r\n \r\n \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n\r\n public int Sodium { get; set; }\r\n\r\n public string Calcium { get; set; }\r\n\r\n public string Iron { get; set; }\r\n }\r\n\r\n private int _itemsPerPage = 4;\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Sodium= 87,\r\n Calcium= \"14%\",\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Sodium= 129,\r\n Calcium= \"8%\",\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Sodium= 337,\r\n Calcium= \"6%\",\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Sodium= 413,\r\n Calcium= \"3%\",\r\n Iron= \"8%\",\r\n },\r\n };\r\n }",
+ "Type": "Demos.Components.Tables.children.DataIterator.props.HeaderAndFooter",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "filter",
+ "Title": "过滤器",
+ "Description": "\r\n \r\n \r\n \r\n r.Name\"\r\n ItemText=\"r=>r.Name\"\r\n PrependInnerIcon=\"mdi-magnify\"\r\n Label=\"Sort by\"> \r\n \r\n \r\n mdi-arrow-up \r\n \r\n \r\n mdi-arrow-down \r\n \r\n \r\n \r\n \r\n \r\n \r\n @foreach (var item in props.Items)\r\n {\r\n \r\n \r\n \r\n @item.Name\r\n \r\n\r\n \r\n @for (var i = 0; i < FilteredKeys.Count; i++)\r\n {\r\n var key = FilteredKeys[i];\r\n var blue = key == _sortBy;\r\n var value = key.Invoke(item);\r\n \r\n \r\n @key:\r\n \r\n \r\n @value\r\n \r\n \r\n }\r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n \r\n Items per page\r\n \r\n \r\n \r\n @_itemsPerPage\r\n mdi-chevron-down \r\n \r\n \r\n \r\n \r\n @for (var i = 0; i < _itemsPerPageArray.Count; i++)\r\n {\r\n var index = i;\r\n var number = _itemsPerPageArray[i];\r\n UpdateItemsPerPage(number)\">\r\n @number \r\n \r\n }\r\n \r\n \r\n \r\n\r\n \r\n mdi-chevron-left \r\n \r\n \r\n mdi-chevron-right \r\n \r\n \r\n \r\n \r\n \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n\r\n public int Sodium { get; set; }\r\n\r\n public string Calcium { get; set; }\r\n\r\n public string Iron { get; set; }\r\n }\r\n\r\n private List _itemsPerPageArray = new List\r\n {\r\n 4,8,12\r\n };\r\n private StringNumber _sortDescStr = \"false\";\r\n private string _sortBy;\r\n private List _sortDesc => new List\r\n {\r\n Convert.ToBoolean(_sortDescStr.Value)\r\n };\r\n private string _search;\r\n private int _itemsPerPage = 4;\r\n private int _page = 1;\r\n private List> _keys => new List>()\r\n {\r\n nameof(Dessert.Name),\r\n nameof(Dessert.Calories),\r\n nameof(Dessert.Fat),\r\n nameof(Dessert.Carbs),\r\n nameof(Dessert.Protein),\r\n nameof(Dessert.Sodium),\r\n nameof(Dessert.Calcium),\r\n nameof(Dessert.Iron)\r\n };\r\n private int _numberOfPages => Convert.ToInt32(Math.Ceiling(_desserts.Count / (_itemsPerPage * 1.0)));\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Sodium= 87,\r\n Calcium= \"14%\",\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Sodium= 129,\r\n Calcium= \"8%\",\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Sodium= 337,\r\n Calcium= \"6%\",\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Sodium= 413,\r\n Calcium= \"3%\",\r\n Iron= \"8%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n Fat= 16.0,\r\n Carbs= 49,\r\n Protein= 3.9,\r\n Sodium= 327,\r\n Calcium= \"7%\",\r\n Iron= \"16%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n Fat= 0.0,\r\n Carbs= 94,\r\n Protein= 0.0,\r\n Sodium= 50,\r\n Calcium= \"0%\",\r\n Iron= \"0%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n Fat= 0.2,\r\n Carbs= 98,\r\n Protein= 0,\r\n Sodium= 38,\r\n Calcium= \"0%\",\r\n Iron= \"2%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n Fat= 3.2,\r\n Carbs= 87,\r\n Protein= 6.5,\r\n Sodium= 562,\r\n Calcium= \"0%\",\r\n Iron= \"45%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n Fat= 25.0,\r\n Carbs= 51,\r\n Protein= 4.9,\r\n Sodium= 326,\r\n Calcium= \"2%\",\r\n Iron= \"22%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n Fat= 26.0,\r\n Carbs= 65,\r\n Protein= 7,\r\n Sodium= 54,\r\n Calcium= \"12%\",\r\n Iron= \"6%\",\r\n }\r\n\r\n };\r\n\r\n public List> FilteredKeys => _keys\r\n .Where(r => r != nameof(Dessert.Name))\r\n .ToList();\r\n\r\n public void UpdateItemsPerPage(int number)\r\n {\r\n _itemsPerPage = number;\r\n }\r\n\r\n public void NextPage()\r\n {\r\n if (_page + 1 <= _numberOfPages) _page += 1;\r\n }\r\n\r\n public void FormerPage()\r\n {\r\n if (_page - 1 >= 1) _page -= 1;\r\n }\r\n }",
+ "Type": "Demos.Components.Tables.children.DataIterator.misc.Filter",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cover": "https://gw.alipayobjects.com/zos/alicdn/rrwbSt3FQ/DataIterators.svg",
+ "Cols": 1,
+ "Related": [
+ "/components/data-tables",
+ "/components/simple-tables",
+ "/components/toolbars"
+ ],
+ "Subtitle": "数据迭代器",
+ "Title": "Data iterators",
+ "Type": "数据迭代器"
+ },
+ {
+ "Desc": "> _headers = new List>\r\n {\r\n new ()\r\n {\r\n Text= \"Dessert (100g serving)\",\r\n Align= \"start\",\r\n Sortable= false,\r\n Value= nameof(Dessert.Name)\r\n },\r\n new (){ Text= \"Calories\", Value= nameof(Dessert.Calories)},\r\n new (){ Text= \"Fat (g)\", Value= nameof(Dessert.Fat)},\r\n new (){ Text= \"Carbs (g)\", Value= nameof(Dessert.Carbs)},\r\n new (){ Text= \"Protein (g)\", Value= nameof(Dessert.Protein)},\r\n new (){ Text= \"Iron (%)\", Value= nameof(Dessert.Iron) }\r\n };\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Iron= \"8%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n Fat= 16.0,\r\n Carbs= 49,\r\n Protein= 3.9,\r\n Iron= \"16%\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n Fat= 0.0,\r\n Carbs= 94,\r\n Protein= 0.0,\r\n Iron= \"0%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n Fat= 0.2,\r\n Carbs= 98,\r\n Protein= 0,\r\n Iron= \"2%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n Fat= 3.2,\r\n Carbs= 87,\r\n Protein= 6.5,\r\n Iron= \"45%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n Fat= 25.0,\r\n Carbs= 51,\r\n Protein= 4.9,\r\n Iron= \"22%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n Fat= 26.0,\r\n Carbs= 65,\r\n Protein= 7,\r\n Iron= \"6%\",\r\n }\r\n };\r\n }",
+ "Type": "Demos.Components.Tables.children.DataTable.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 1,
+ "Name": "customFilter",
+ "Title": "自定义过滤器",
+ "Description": "> Headers => new List>\r\n {\r\n new ()\r\n {\r\n Text= \"Dessert (100g serving)\",\r\n Align= \"start\",\r\n Sortable= false,\r\n Value= nameof(Dessert.Name)\r\n },\r\n new ()\r\n {\r\n Text= \"Calories\",\r\n Value= nameof(Dessert.Calories),\r\n Filter = (value, search, item) =>\r\n {\r\n if (string.IsNullOrEmpty(_calories))\r\n {\r\n return true;\r\n }\r\n\r\n return item.Calories _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Iron= \"8%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n Fat= 16.0,\r\n Carbs= 49,\r\n Protein= 3.9,\r\n Iron= \"16%\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n Fat= 0.0,\r\n Carbs= 94,\r\n Protein= 0.0,\r\n Iron= \"0%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n Fat= 0.2,\r\n Carbs= 98,\r\n Protein= 0,\r\n Iron= \"2%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n Fat= 3.2,\r\n Carbs= 87,\r\n Protein= 6.5,\r\n Iron= \"45%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n Fat= 25.0,\r\n Carbs= 51,\r\n Protein= 4.9,\r\n Iron= \"22%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n Fat= 26.0,\r\n Carbs= 65,\r\n Protein= 7,\r\n Iron= \"6%\",\r\n }\r\n };\r\n\r\n public bool FilterOnlyCapsText(object value, string search, Dessert item)\r\n {\r\n return value != null && search != null && value is string\r\n && value.ToString().ToUpperInvariant().IndexOf(search) != -1;\r\n }\r\n }",
+ "Type": "Demos.Components.Tables.children.DataTable.props.CustomFilter",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "dense",
+ "Title": "紧凑",
+ "Description": "r.Name\"\r\n Class=\"elevation-1\"> \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n\r\n public int Sodium { get; set; }\r\n\r\n public string Calcium { get; set; }\r\n\r\n public string Iron { get; set; }\r\n }\r\n\r\n private List> _headers = new List>\r\n {\r\n new ()\r\n {\r\n Text= \"Dessert (100g serving)\",\r\n Align= \"start\",\r\n Sortable= false,\r\n Value= nameof(Dessert.Name)\r\n },\r\n new (){ Text= \"Calories\", Value= nameof(Dessert.Calories)},\r\n new (){ Text= \"Fat (g)\", Value= nameof(Dessert.Fat)},\r\n new (){ Text= \"Carbs (g)\", Value= nameof(Dessert.Carbs)},\r\n new (){ Text= \"Protein (g)\", Value= nameof(Dessert.Protein)},\r\n new (){ Text= \"Iron (%)\", Value= nameof(Dessert.Iron)}\r\n };\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Iron= \"8%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n Fat= 16.0,\r\n Carbs= 49,\r\n Protein= 3.9,\r\n Iron= \"16%\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n Fat= 0.0,\r\n Carbs= 94,\r\n Protein= 0.0,\r\n Iron= \"0%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n Fat= 0.2,\r\n Carbs= 98,\r\n Protein= 0,\r\n Iron= \"2%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n Fat= 3.2,\r\n Carbs= 87,\r\n Protein= 6.5,\r\n Iron= \"45%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n Fat= 25.0,\r\n Carbs= 51,\r\n Protein= 4.9,\r\n Iron= \"22%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n Fat= 26.0,\r\n Carbs= 65,\r\n Protein= 7,\r\n Iron= \"6%\",\r\n }\r\n };\r\n }",
+ "Type": "Demos.Components.Tables.children.DataTable.props.Dense",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "filterable",
+ "Title": "可过滤",
+ "Description": "\r\n \r\n \r\n \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n\r\n public int Sodium { get; set; }\r\n\r\n public string Calcium { get; set; }\r\n\r\n public string Iron { get; set; }\r\n }\r\n\r\n private string _search;\r\n\r\n private List> _headers = new List>\r\n {\r\n new ()\r\n {\r\n Text= \"Dessert (100g serving)\",\r\n Align= \"start\",\r\n Sortable= false,\r\n Filterable = false,\r\n Value= nameof(Dessert.Name)\r\n },\r\n new (){ Text= \"Calories\", Value= nameof(Dessert.Calories)},\r\n new (){ Text= \"Fat (g)\", Value= nameof(Dessert.Fat)},\r\n new (){ Text= \"Carbs (g)\", Value= nameof(Dessert.Carbs)},\r\n new (){ Text= \"Protein (g)\", Value= nameof(Dessert.Protein)},\r\n new (){ Text= \"Iron (%)\", Value= nameof(Dessert.Iron)}\r\n };\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Iron= \"8%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n Fat= 16.0,\r\n Carbs= 49,\r\n Protein= 3.9,\r\n Iron= \"16%\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n Fat= 0.0,\r\n Carbs= 94,\r\n Protein= 0.0,\r\n Iron= \"0%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n Fat= 0.2,\r\n Carbs= 98,\r\n Protein= 0,\r\n Iron= \"2%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n Fat= 3.2,\r\n Carbs= 87,\r\n Protein= 6.5,\r\n Iron= \"45%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n Fat= 25.0,\r\n Carbs= 51,\r\n Protein= 4.9,\r\n Iron= \"22%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n Fat= 26.0,\r\n Carbs= 65,\r\n Protein= 7,\r\n Iron= \"6%\",\r\n }\r\n };\r\n }",
+ "Type": "Demos.Components.Tables.children.DataTable.props.Filterable",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 4,
+ "Name": "fixed",
+ "Title": "固定列",
+ "Description": "r.Name\"\r\n Class=\"elevation-1\">\r\n \r\n @if (context.Header.Value == \"actions\")\r\n {\r\n EditItem(context.Item)\">mdi-pencil \r\n DeleteItem(context.Item)\">mdi-delete \r\n }\r\n else\r\n {\r\n @context.Value\r\n }\r\n \r\n \r\n\r\n \r\n \r\n @FormTitle\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n Cancel\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n \r\n\r\n \r\n Are you sure you want to delete this item? \r\n \r\n Cancel \r\n OK \r\n \r\n \r\n \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n\r\n public int Sodium { get; set; }\r\n\r\n public string Calcium { get; set; }\r\n\r\n public string Iron { get; set; }\r\n }\r\n\r\n private List> _headers = new List>\r\n {\r\n new ()\r\n {\r\n Text= \"Dessert (100g serving)\",\r\n Align= \"start\",\r\n Sortable= false,\r\n Value= nameof(Dessert.Name)\r\n },\r\n new (){ Text= \"Calories\", Value= nameof(Dessert.Calories)},\r\n new (){ Text= \"Fat (g)\", Value= nameof(Dessert.Fat)},\r\n new (){ Text= \"Carbs (g)\", Value= nameof(Dessert.Carbs)},\r\n new (){ Text= \"Protein (g)\", Value= nameof(Dessert.Protein)},\r\n new (){ Text= \"Actions\", Value= \"actions\",Sortable=false,Width=\"100px\",Align=\"center\" }\r\n };\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Iron= \"8%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n Fat= 16.0,\r\n Carbs= 49,\r\n Protein= 3.9,\r\n Iron= \"16%\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n Fat= 0.0,\r\n Carbs= 94,\r\n Protein= 0.0,\r\n Iron= \"0%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n Fat= 0.2,\r\n Carbs= 98,\r\n Protein= 0,\r\n Iron= \"2%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n Fat= 3.2,\r\n Carbs= 87,\r\n Protein= 6.5,\r\n Iron= \"45%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n Fat= 25.0,\r\n Carbs= 51,\r\n Protein= 4.9,\r\n Iron= \"22%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n Fat= 26.0,\r\n Carbs= 65,\r\n Protein= 7,\r\n Iron= \"6%\",\r\n }\r\n };\r\n private int _editedIndex;\r\n private bool _dialog;\r\n private bool _dialogDelete;\r\n private Dessert _editedItem = new Dessert\r\n {\r\n Name = \"\",\r\n Calories = 0,\r\n Fat = 0,\r\n Carbs = 0,\r\n Protein = 0,\r\n };\r\n public string FormTitle\r\n {\r\n get\r\n {\r\n return _editedIndex == -1 ? \"New Item\" : \"Edit Item\";\r\n }\r\n }\r\n\r\n public void Close()\r\n {\r\n _dialog = false;\r\n _editedItem = new Dessert();\r\n _editedIndex = -1;\r\n }\r\n\r\n public void Save()\r\n {\r\n if (_editedIndex > -1)\r\n {\r\n var item = _desserts[_editedIndex];\r\n item.Fat = _editedItem.Fat;\r\n item.Protein = _editedItem.Protein;\r\n item.Calories = _editedItem.Calories;\r\n item.Carbs = _editedItem.Carbs;\r\n item.Name = _editedItem.Name;\r\n }\r\n else\r\n {\r\n _desserts.Add(_editedItem);\r\n }\r\n Close();\r\n }\r\n\r\n public void EditItem(Dessert item)\r\n {\r\n _editedIndex = _desserts.IndexOf(item);\r\n _editedItem = new Dessert()\r\n {\r\n Calories = item.Calories,\r\n Carbs = item.Carbs,\r\n Fat = item.Fat,\r\n Name = item.Name,\r\n Protein = item.Protein\r\n };\r\n _dialog = true;\r\n }\r\n\r\n public void DeleteItem(Dessert item)\r\n {\r\n _editedIndex = _desserts.IndexOf(item);\r\n _editedItem = new Dessert()\r\n {\r\n Calories = item.Calories,\r\n Carbs = item.Carbs,\r\n Fat = item.Fat,\r\n Name = item.Name,\r\n Protein = item.Protein\r\n };\r\n _dialogDelete = true;\r\n }\r\n\r\n public void DeleteItemConfirm()\r\n {\r\n _desserts.RemoveAt(_editedIndex);\r\n CloseDelete();\r\n }\r\n\r\n public void CloseDelete()\r\n {\r\n _dialogDelete = false;\r\n _editedItem = new();\r\n _editedIndex = -1;\r\n }\r\n }",
+ "Type": "Demos.Components.Tables.children.DataTable.props.Fixed",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "footer",
+ "Title": "表脚属性",
+ "Description": "r.Name\"\r\n Class=\"elevation-1\"\r\n FooterProps=\"_footerProps\"> \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public string Category { get; set; }\r\n }\r\n\r\n private Dictionary _footerProps = new Dictionary\r\n {\r\n {\"ShowFirstLastPage\", true},\r\n {\"FirstIcon\", \"mdi-arrow-collapse-left\" },\r\n {\"LastIcon\", \"mdi-arrow-collapse-right\" },\r\n {\"PrevIcon\", \"mdi-minus\" },\r\n {\"NextIcon\", \"mdi-plus\" }\r\n };\r\n\r\n private List> _headers = new()\r\n {\r\n new()\r\n {\r\n Text = \"Dessert (100g serving)\",\r\n Align = \"start\",\r\n Value = nameof(Dessert.Name)\r\n },\r\n new() { Text = \"Category\", Value = nameof(Dessert.Category) }\r\n };\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Category= \"Ice cream\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Category= \"Ice cream\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Category= \"Cookie\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Category= \"Pastry\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Category= \"Cookie\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Category= \"Candy\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Category= \"Candy\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Category= \"Toffee\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Category= \"Pastry\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Category= \"Candy\"\r\n }\r\n };\r\n}",
+ "Type": "Demos.Components.Tables.children.DataTable.props.Footer",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "group",
+ "Title": "分组",
+ "Description": "r.Name\"\r\n SortBy=\"nameof(Dessert.Name)\"\r\n GroupBy=\"nameof(Dessert.Category)\"\r\n Class=\"elevation-1\"\r\n ShowGroupBy>\r\n \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public string Category { get; set; }\r\n\r\n public string Dairy { get; set; }\r\n }\r\n\r\n private List> _headers = new List>\r\n {\r\n new ()\r\n {\r\n Text= \"Dessert (100g serving)\",\r\n Align= \"start\",\r\n Value= nameof(Dessert.Name),\r\n Groupable=false\r\n },\r\n new (){ Text= \"Category\", Value= nameof(Dessert.Category),Align=\"right\"},\r\n new (){ Text= \"Dairy\", Value= nameof(Dessert.Dairy),Align=\"right\"}\r\n };\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Category=\"Ice cream\",\r\n Dairy=\"Yes\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Category=\"Ice cream\",\r\n Dairy=\"Yes\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Category=\"Cookie\",\r\n Dairy=\"Yes\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Category=\"Pastry\",\r\n Dairy=\"Yes\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Category=\"Cookie\",\r\n Dairy=\"No\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Category=\"Candy\",\r\n Dairy=\"No\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Category=\"Candy\",\r\n Dairy=\"No\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Category=\"Toffee\",\r\n Dairy=\"No\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Category=\"Pastry\",\r\n Dairy=\"Yes\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Category=\"Candy\",\r\n Dairy=\"Yes\"\r\n }\r\n };\r\n }",
+ "Type": "Demos.Components.Tables.children.DataTable.props.Group",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "hideDefaultHeaderAndFooter",
+ "Title": "隐藏默认表头和表脚",
+ "Description": "> _headers = new List>\r\n {\r\n new ()\r\n {\r\n Text= \"Dessert (100g serving)\",\r\n Align= \"start\",\r\n Sortable= false,\r\n Value= nameof(Dessert.Name)\r\n },\r\n new (){ Text= \"Calories\", Value= nameof(Dessert.Calories)},\r\n new (){ Text= \"Fat (g)\", Value= nameof(Dessert.Fat)},\r\n new (){ Text= \"Carbs (g)\", Value= nameof(Dessert.Carbs)},\r\n new (){ Text= \"Protein (g)\", Value= nameof(Dessert.Protein)},\r\n new (){ Text= \"Iron (%)\", Value= nameof(Dessert.Iron)}\r\n };\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Iron= \"8%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n Fat= 16.0,\r\n Carbs= 49,\r\n Protein= 3.9,\r\n Iron= \"16%\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n Fat= 0.0,\r\n Carbs= 94,\r\n Protein= 0.0,\r\n Iron= \"0%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n Fat= 0.2,\r\n Carbs= 98,\r\n Protein= 0,\r\n Iron= \"2%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n Fat= 3.2,\r\n Carbs= 87,\r\n Protein= 6.5,\r\n Iron= \"45%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n Fat= 25.0,\r\n Carbs= 51,\r\n Protein= 4.9,\r\n Iron= \"22%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n Fat= 26.0,\r\n Carbs= 65,\r\n Protein= 7,\r\n Iron= \"6%\",\r\n }\r\n };\r\n }\r\n\r\n",
+ "Type": "Demos.Components.Tables.children.DataTable.props.HideDefaultHeaderAndFooter",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "loading",
+ "Title": "加载中",
+ "Description": "r.Name\"\r\n Class=\"elevation-1\"\r\n Loading=\"true\"\r\n LoadingText=\"Loading... Please wait\">\r\n \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n public int Calories { get; set; }\r\n }\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Tables.children.DataTable.props.Loading",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "multiSort",
+ "Title": "多列排序",
+ "Description": "\r\n \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n\r\n public int Sodium { get; set; }\r\n\r\n public string Calcium { get; set; }\r\n\r\n public string Iron { get; set; }\r\n }\r\n\r\n private List> _headers = new List>\r\n {\r\n new ()\r\n {\r\n Text= \"Dessert (100g serving)\",\r\n Align= \"start\",\r\n Sortable= false,\r\n Value= nameof(Dessert.Name)\r\n },\r\n new (){ Text= \"Calories\", Value= nameof(Dessert.Calories)},\r\n new (){ Text= \"Fat (g)\", Value= nameof(Dessert.Fat)},\r\n new (){ Text= \"Carbs (g)\", Value= nameof(Dessert.Carbs)},\r\n new (){ Text= \"Protein (g)\", Value= nameof(Dessert.Protein)},\r\n new (){ Text= \"Iron (%)\", Value= nameof(Dessert.Iron)}\r\n };\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 200,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 200,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 300,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 300,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Iron= \"8%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Calories= 400,\r\n Fat= 16.0,\r\n Carbs= 49,\r\n Protein= 3.9,\r\n Iron= \"16%\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Calories= 400,\r\n Fat= 0.0,\r\n Carbs= 94,\r\n Protein= 0.0,\r\n Iron= \"0%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Calories= 400,\r\n Fat= 0.2,\r\n Carbs= 98,\r\n Protein= 0,\r\n Iron= \"2%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Calories= 400,\r\n Fat= 3.2,\r\n Carbs= 87,\r\n Protein= 6.5,\r\n Iron= \"45%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Calories= 500,\r\n Fat= 25.0,\r\n Carbs= 51,\r\n Protein= 4.9,\r\n Iron= \"22%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Calories= 500,\r\n Fat= 26.0,\r\n Carbs= 65,\r\n Protein= 7,\r\n Iron= \"6%\",\r\n }\r\n };\r\n\r\n public List _sortBy = new List\r\n {\r\n nameof(Dessert.Calories),\r\n nameof(Dessert.Fat)\r\n };\r\n\r\n public List _sortDesc = new List\r\n {\r\n false,\r\n true\r\n };\r\n }\r\n\r\n",
+ "Type": "Demos.Components.Tables.children.DataTable.props.MultiSort",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "rowSelection",
+ "Title": "行选择",
+ "Description": "r.Name\"\r\n ShowSelect\r\n Class=\"elevation-1\">\r\n \r\n \r\n \r\n\r\n @code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n\r\n public int Sodium { get; set; }\r\n\r\n public string Calcium { get; set; }\r\n\r\n public string Iron { get; set; }\r\n }\r\n\r\n private List> _headers = new List>\r\n {\r\n new ()\r\n {\r\n Text= \"Dessert (100g serving)\",\r\n Align= \"start\",\r\n Sortable= false,\r\n Value= nameof(Dessert.Name)\r\n },\r\n new (){ Text= \"Calories\", Value= nameof(Dessert.Calories)},\r\n new (){ Text= \"Fat (g)\", Value= nameof(Dessert.Fat)},\r\n new (){ Text= \"Carbs (g)\", Value= nameof(Dessert.Carbs)},\r\n new (){ Text= \"Protein (g)\", Value= nameof(Dessert.Protein)},\r\n new (){ Text= \"Iron (%)\", Value= nameof(Dessert.Iron)}\r\n };\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Iron= \"8%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n Fat= 16.0,\r\n Carbs= 49,\r\n Protein= 3.9,\r\n Iron= \"16%\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n Fat= 0.0,\r\n Carbs= 94,\r\n Protein= 0.0,\r\n Iron= \"0%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n Fat= 0.2,\r\n Carbs= 98,\r\n Protein= 0,\r\n Iron= \"2%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n Fat= 3.2,\r\n Carbs= 87,\r\n Protein= 6.5,\r\n Iron= \"45%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n Fat= 25.0,\r\n Carbs= 51,\r\n Protein= 4.9,\r\n Iron= \"22%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n Fat= 26.0,\r\n Carbs= 65,\r\n Protein= 7,\r\n Iron= \"6%\",\r\n }\r\n };\r\n\r\n private bool _singleSelect;\r\n\r\n private IEnumerable _selected = new List();\r\n }\r\n\r\n",
+ "Type": "Demos.Components.Tables.children.DataTable.props.RowSelection",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "search",
+ "Title": "搜索",
+ "Description": "\r\n \r\n Nutrition\r\n \r\n \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n\r\n public int Sodium { get; set; }\r\n\r\n public string Calcium { get; set; }\r\n\r\n public string Iron { get; set; }\r\n }\r\n\r\n private string _search;\r\n\r\n private List> _headers = new List>\r\n {\r\n new ()\r\n {\r\n Text= \"Dessert (100g serving)\",\r\n Align= \"start\",\r\n Sortable= false,\r\n Value= nameof(Dessert.Name)\r\n },\r\n new (){ Text= \"Calories\", Value= nameof(Dessert.Calories)},\r\n new (){ Text= \"Fat (g)\", Value= nameof(Dessert.Fat)},\r\n new (){ Text= \"Carbs (g)\", Value= nameof(Dessert.Carbs)},\r\n new (){ Text= \"Protein (g)\", Value= nameof(Dessert.Protein)},\r\n new (){ Text= \"Iron (%)\", Value= nameof(Dessert.Iron)}\r\n };\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Iron= \"8%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n Fat= 16.0,\r\n Carbs= 49,\r\n Protein= 3.9,\r\n Iron= \"16%\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n Fat= 0.0,\r\n Carbs= 94,\r\n Protein= 0.0,\r\n Iron= \"0%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n Fat= 0.2,\r\n Carbs= 98,\r\n Protein= 0,\r\n Iron= \"2%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n Fat= 3.2,\r\n Carbs= 87,\r\n Protein= 6.5,\r\n Iron= \"45%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n Fat= 25.0,\r\n Carbs= 51,\r\n Protein= 4.9,\r\n Iron= \"22%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n Fat= 26.0,\r\n Carbs= 65,\r\n Protein= 7,\r\n Iron= \"6%\",\r\n }\r\n };\r\n }\r\n\r\n",
+ "Type": "Demos.Components.Tables.children.DataTable.props.Search",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 4,
+ "Name": "stripe",
+ "Title": "斑马纹",
+ "Description": "r.Name\"\r\n Class=\"elevation-1\"> \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n\r\n public int Sodium { get; set; }\r\n\r\n public string Calcium { get; set; }\r\n\r\n public string Iron { get; set; }\r\n }\r\n\r\n private List> _headers = new List>\r\n {\r\n new ()\r\n {\r\n Text= \"Dessert (100g serving)\",\r\n Align= \"start\",\r\n Sortable= false,\r\n Value= nameof(Dessert.Name)\r\n },\r\n new (){ Text= \"Calories\", Value= nameof(Dessert.Calories)},\r\n new (){ Text= \"Fat (g)\", Value= nameof(Dessert.Fat)},\r\n new (){ Text= \"Carbs (g)\", Value= nameof(Dessert.Carbs)},\r\n new (){ Text= \"Protein (g)\", Value= nameof(Dessert.Protein)},\r\n new (){ Text= \"Iron (%)\", Value= nameof(Dessert.Iron)}\r\n };\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Iron= \"8%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n Fat= 16.0,\r\n Carbs= 49,\r\n Protein= 3.9,\r\n Iron= \"16%\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n Fat= 0.0,\r\n Carbs= 94,\r\n Protein= 0.0,\r\n Iron= \"0%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n Fat= 0.2,\r\n Carbs= 98,\r\n Protein= 0,\r\n Iron= \"2%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n Fat= 3.2,\r\n Carbs= 87,\r\n Protein= 6.5,\r\n Iron= \"45%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n Fat= 25.0,\r\n Carbs= 51,\r\n Protein= 4.9,\r\n Iron= \"22%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n Fat= 26.0,\r\n Carbs= 65,\r\n Protein= 7,\r\n Iron= \"6%\",\r\n }\r\n };\r\n }",
+ "Type": "Demos.Components.Tables.children.DataTable.props.Stripe",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 2,
+ "Name": "header",
+ "Title": "表头",
+ "Description": "\r\n \r\n @if (header.Value == nameof(Dessert.Name))\r\n {\r\n @header.Text.ToUpperInvariant()\r\n }\r\n else\r\n {\r\n @header.Text\r\n }\r\n \r\n \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n\r\n public int Sodium { get; set; }\r\n\r\n public string Calcium { get; set; }\r\n\r\n public string Iron { get; set; }\r\n }\r\n\r\n private List> _headers = new List>\r\n {\r\n new ()\r\n {\r\n Text= \"Dessert (100g serving)\",\r\n Align= \"start\",\r\n Sortable= false,\r\n Value= nameof(Dessert.Name)\r\n },\r\n new (){ Text= \"Calories\", Value= nameof(Dessert.Calories)},\r\n new (){ Text= \"Fat (g)\", Value= nameof(Dessert.Fat)},\r\n new (){ Text= \"Carbs (g)\", Value= nameof(Dessert.Carbs)},\r\n new (){ Text= \"Protein (g)\", Value= nameof(Dessert.Protein)},\r\n new (){ Text= \"Iron (%)\", Value= nameof(Dessert.Iron)}\r\n };\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Iron= \"8%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n Fat= 16.0,\r\n Carbs= 49,\r\n Protein= 3.9,\r\n Iron= \"16%\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n Fat= 0.0,\r\n Carbs= 94,\r\n Protein= 0.0,\r\n Iron= \"0%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n Fat= 0.2,\r\n Carbs= 98,\r\n Protein= 0,\r\n Iron= \"2%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n Fat= 3.2,\r\n Carbs= 87,\r\n Protein= 6.5,\r\n Iron= \"45%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n Fat= 25.0,\r\n Carbs= 51,\r\n Protein= 4.9,\r\n Iron= \"22%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n Fat= 26.0,\r\n Carbs= 65,\r\n Protein= 7,\r\n Iron= \"6%\",\r\n }\r\n };\r\n }\r\n",
+ "Type": "Demos.Components.Tables.children.DataTable.contents.Header",
+ "Style": "",
+ "Debug": false,
+ "Group": 2
+ },
+ {
+ "Order": 2,
+ "Name": "item",
+ "Title": "项目",
+ "Description": "\r\n \r\n @if (context.Header.Value == nameof(Dessert.Calories))\r\n {\r\n \r\n @context.Item.Calories\r\n \r\n }\r\n else\r\n {\r\n @context.Value\r\n }\r\n \r\n \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n\r\n public int Sodium { get; set; }\r\n\r\n public string Calcium { get; set; }\r\n\r\n public string Iron { get; set; }\r\n }\r\n\r\n private List> _headers = new List>\r\n {\r\n new ()\r\n {\r\n Text= \"Dessert (100g serving)\",\r\n Align= \"start\",\r\n Sortable= false,\r\n Value= nameof(Dessert.Name)\r\n },\r\n new (){ Text= \"Calories\", Value= nameof(Dessert.Calories)},\r\n new (){ Text= \"Fat (g)\", Value= nameof(Dessert.Fat)},\r\n new (){ Text= \"Carbs (g)\", Value= nameof(Dessert.Carbs)},\r\n new (){ Text= \"Protein (g)\", Value= nameof(Dessert.Protein)},\r\n new (){ Text= \"Iron (%)\", Value= nameof(Dessert.Iron)}\r\n };\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Iron= \"8%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n Fat= 16.0,\r\n Carbs= 49,\r\n Protein= 3.9,\r\n Iron= \"16%\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n Fat= 0.0,\r\n Carbs= 94,\r\n Protein= 0.0,\r\n Iron= \"0%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n Fat= 0.2,\r\n Carbs= 98,\r\n Protein= 0,\r\n Iron= \"2%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n Fat= 3.2,\r\n Carbs= 87,\r\n Protein= 6.5,\r\n Iron= \"45%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n Fat= 25.0,\r\n Carbs= 51,\r\n Protein= 4.9,\r\n Iron= \"22%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n Fat= 26.0,\r\n Carbs= 65,\r\n Protein= 7,\r\n Iron= \"6%\",\r\n }\r\n };\r\n\r\n public string GetColor(int calories)\r\n {\r\n if (calories > 400)\r\n {\r\n return \"red\";\r\n }\r\n\r\n if (calories > 200)\r\n {\r\n return \"orange\";\r\n }\r\n\r\n return \"green\";\r\n }\r\n }\r\n",
+ "Type": "Demos.Components.Tables.children.DataTable.contents.Item",
+ "Style": "",
+ "Debug": false,
+ "Group": 2
+ },
+ {
+ "Order": 2,
+ "Name": "simpleCheckbox",
+ "Title": "简单复选框",
+ "Description": "> _headers = new List>\r\n {\r\n new ()\r\n {\r\n Text= \"Dessert (100g serving)\",\r\n Align= \"start\",\r\n Sortable= false,\r\n Value= nameof(Dessert.Name)\r\n },\r\n new (){ Text= \"Calories\", Value= nameof(Dessert.Calories)},\r\n new (){ Text= \"Fat (g)\", Value= nameof(Dessert.Fat)},\r\n new (){ Text= \"Carbs (g)\", Value= nameof(Dessert.Carbs)},\r\n new (){ Text= \"Protein (g)\", Value= nameof(Dessert.Protein)},\r\n new (){ Text= \"Iron (%)\", Value= nameof(Dessert.Iron)},\r\n new (){ Text=\"Gluten-Free\",Value=nameof(Dessert.Glutenfree)}\r\n };\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Iron= \"8%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n Fat= 16.0,\r\n Carbs= 49,\r\n Protein= 3.9,\r\n Iron= \"16%\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n Fat= 0.0,\r\n Carbs= 94,\r\n Protein= 0.0,\r\n Iron= \"0%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n Fat= 0.2,\r\n Carbs= 98,\r\n Protein= 0,\r\n Iron= \"2%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n Fat= 3.2,\r\n Carbs= 87,\r\n Protein= 6.5,\r\n Iron= \"45%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n Fat= 25.0,\r\n Carbs= 51,\r\n Protein= 4.9,\r\n Iron= \"22%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n Fat= 26.0,\r\n Carbs= 65,\r\n Protein= 7,\r\n Iron= \"6%\",\r\n }\r\n };\r\n }\r\n",
+ "Type": "Demos.Components.Tables.children.DataTable.contents.SimpleCheckbox",
+ "Style": "",
+ "Debug": false,
+ "Group": 2
+ },
+ {
+ "Order": 3,
+ "Name": "cRUDActions",
+ "Title": "CRUD操作",
+ "Description": "\r\n \r\n \r\n My CRUD \r\n _dialog=true\">\r\n New Item\r\n \r\n \r\n \r\n \r\n @FormTitle\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n Cancel\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n \r\n \r\n \r\n Are you sure you want to delete this item? \r\n \r\n Cancel \r\n OK \r\n \r\n \r\n \r\n \r\n \r\n \r\n @if (context.Header.Value == \"actions\")\r\n {\r\n EditItem(context.Item)\">mdi-pencil \r\n DeleteItem(context.Item)\">mdi-delete \r\n }\r\n else\r\n {\r\n @context.Value\r\n }\r\n \r\n \r\n \r\n Reset\r\n \r\n \r\n \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n }\r\n\r\n private List> _headers = new List>\r\n {\r\n new ()\r\n {\r\n Text= \"Dessert (100g serving)\",\r\n Align= \"start\",\r\n Sortable= false,\r\n Value= nameof(Dessert.Name)\r\n },\r\n new (){ Text= \"Calories\", Value= nameof(Dessert.Calories)},\r\n new (){ Text= \"Fat (g)\", Value= nameof(Dessert.Fat)},\r\n new (){ Text= \"Carbs (g)\", Value= nameof(Dessert.Carbs)},\r\n new (){ Text= \"Protein (g)\", Value= nameof(Dessert.Protein)},\r\n new (){ Text= \"Actions\", Value= \"actions\",Sortable=false }\r\n };\r\n\r\n private List _desserts;\r\n\r\n private bool _dialog;\r\n private bool _dialogDelete;\r\n private Dessert _editedItem = new Dessert\r\n {\r\n Name = \"\",\r\n Calories = 0,\r\n Fat = 0,\r\n Carbs = 0,\r\n Protein = 0,\r\n };\r\n private int _editedIndex;\r\n\r\n public string FormTitle\r\n {\r\n get\r\n {\r\n return _editedIndex == -1 ? \"New Item\" : \"Edit Item\";\r\n }\r\n }\r\n\r\n protected override void OnInitialized()\r\n {\r\n Initialize();\r\n }\r\n\r\n public void Initialize()\r\n {\r\n _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n Fat= 16.0,\r\n Carbs= 49,\r\n Protein= 3.9\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n Fat= 0.0,\r\n Carbs= 94,\r\n Protein= 0.0\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n Fat= 0.2,\r\n Carbs= 98,\r\n Protein= 0\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n Fat= 3.2,\r\n Carbs= 87,\r\n Protein= 6.5\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n Fat= 25.0,\r\n Carbs= 51,\r\n Protein= 4.9\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n Fat= 26.0,\r\n Carbs= 65,\r\n Protein= 7\r\n }\r\n };\r\n }\r\n\r\n public void Close()\r\n {\r\n _dialog = false;\r\n _editedItem = new Dessert();\r\n _editedIndex = -1;\r\n }\r\n\r\n public void Save()\r\n {\r\n if (_editedIndex > -1)\r\n {\r\n var item = _desserts[_editedIndex];\r\n item.Fat = _editedItem.Fat;\r\n item.Protein = _editedItem.Protein;\r\n item.Calories = _editedItem.Calories;\r\n item.Carbs = _editedItem.Carbs;\r\n item.Name = _editedItem.Name;\r\n }\r\n else\r\n {\r\n _desserts.Add(_editedItem);\r\n }\r\n Close();\r\n }\r\n\r\n public void EditItem(Dessert item)\r\n {\r\n _editedIndex = _desserts.IndexOf(item);\r\n _editedItem = new Dessert()\r\n {\r\n Calories = item.Calories,\r\n Carbs = item.Carbs,\r\n Fat = item.Fat,\r\n Name = item.Name,\r\n Protein = item.Protein\r\n };\r\n _dialog = true;\r\n }\r\n\r\n public void DeleteItem(Dessert item)\r\n {\r\n _editedIndex = _desserts.IndexOf(item);\r\n _editedItem = new Dessert()\r\n {\r\n Calories = item.Calories,\r\n Carbs = item.Carbs,\r\n Fat = item.Fat,\r\n Name = item.Name,\r\n Protein = item.Protein\r\n };\r\n _dialogDelete = true;\r\n }\r\n\r\n public void DeleteItemConfirm()\r\n {\r\n _desserts.RemoveAt(_editedIndex);\r\n CloseDelete();\r\n }\r\n\r\n public void CloseDelete()\r\n {\r\n _dialogDelete = false;\r\n _editedItem = new();\r\n _editedIndex = -1;\r\n }\r\n }\r\n",
+ "Type": "Demos.Components.Tables.children.DataTable.misc.CRUDActions",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 3,
+ "Name": "editDialog",
+ "Title": "编辑用对话框",
+ "Description": "r.Name\"\r\n ShowExpand\r\n Class=\"elevation-1\">\r\n \r\n \r\n Expandable Table \r\n \r\n \r\n \r\n \r\n More info about @context.Item.Name\r\n \r\n \r\n \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n\r\n public string Iron { get; set; }\r\n }\r\n\r\n private bool _singleExpand;\r\n //private List _expanded;\r\n\r\n private List> _headers = new List>\r\n {\r\n new ()\r\n {\r\n Text= \"Dessert (100g serving)\",\r\n Align= \"start\",\r\n Sortable= false,\r\n Value= nameof(Dessert.Name)\r\n },\r\n new (){ Text= \"Calories\", Value= nameof(Dessert.Calories)},\r\n new (){ Text= \"Fat (g)\", Value= nameof(Dessert.Fat)},\r\n new (){ Text= \"Carbs (g)\", Value= nameof(Dessert.Carbs)},\r\n new (){ Text= \"Protein (g)\", Value= nameof(Dessert.Protein)},\r\n new (){ Text= \"Iron (%)\", Value= nameof(Dessert.Iron)},\r\n new (){ Text=\"\",Value=\"data-table-expand\"}\r\n };\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Iron= \"8%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n Fat= 16.0,\r\n Carbs= 49,\r\n Protein= 3.9,\r\n Iron= \"16%\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n Fat= 0.0,\r\n Carbs= 94,\r\n Protein= 0.0,\r\n Iron= \"0%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n Fat= 0.2,\r\n Carbs= 98,\r\n Protein= 0,\r\n Iron= \"2%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n Fat= 3.2,\r\n Carbs= 87,\r\n Protein= 6.5,\r\n Iron= \"45%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n Fat= 25.0,\r\n Carbs= 51,\r\n Protein= 4.9,\r\n Iron= \"22%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n Fat= 26.0,\r\n Carbs= 65,\r\n Protein= 7,\r\n Iron= \"6%\",\r\n }\r\n };\r\n}\r\n",
+ "Type": "Demos.Components.Tables.children.DataTable.misc.ExpandableRow",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 3,
+ "Name": "externalPagination",
+ "Title": "外部分页",
+ "Description": "> _headers = new List>\r\n {\r\n new ()\r\n {\r\n Text= \"Dessert (100g serving)\",\r\n Align= \"start\",\r\n Sortable= false,\r\n Value= nameof(Dessert.Name)\r\n },\r\n new (){ Text= \"Calories\", Value= nameof(Dessert.Calories)},\r\n new (){ Text= \"Fat (g)\", Value= nameof(Dessert.Fat)},\r\n new (){ Text= \"Carbs (g)\", Value= nameof(Dessert.Carbs)},\r\n new (){ Text= \"Protein (g)\", Value= nameof(Dessert.Protein)},\r\n new (){ Text= \"Iron (%)\", Value= nameof(Dessert.Iron)}\r\n };\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Iron= \"8%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n Fat= 16.0,\r\n Carbs= 49,\r\n Protein= 3.9,\r\n Iron= \"16%\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n Fat= 0.0,\r\n Carbs= 94,\r\n Protein= 0.0,\r\n Iron= \"0%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n Fat= 0.2,\r\n Carbs= 98,\r\n Protein= 0,\r\n Iron= \"2%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n Fat= 3.2,\r\n Carbs= 87,\r\n Protein= 6.5,\r\n Iron= \"45%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n Fat= 25.0,\r\n Carbs= 51,\r\n Protein= 4.9,\r\n Iron= \"22%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n Fat= 26.0,\r\n Carbs= 65,\r\n Protein= 7,\r\n Iron= \"6%\",\r\n }\r\n };\r\n\r\n private int _page = 1;\r\n private int _pageCount = 0;\r\n private int _itemsPerPage = 10;\r\n}\r\n",
+ "Type": "Demos.Components.Tables.children.DataTable.misc.ExternalPagination",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 3,
+ "Name": "externalSorting",
+ "Title": "外部排序",
+ "Description": "> _headers = new List>\r\n {\r\n new ()\r\n {\r\n Text= \"Dessert (100g serving)\",\r\n Align= \"start\",\r\n Value= nameof(Dessert.Name)\r\n },\r\n new (){ Text= \"Calories\", Value= nameof(Dessert.Calories)},\r\n new (){ Text= \"Fat (g)\", Value= nameof(Dessert.Fat)},\r\n new (){ Text= \"Carbs (g)\", Value= nameof(Dessert.Carbs)},\r\n new (){ Text= \"Protein (g)\", Value= nameof(Dessert.Protein)},\r\n new (){ Text= \"Iron (%)\", Value= nameof(Dessert.Iron)}\r\n };\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Iron= \"8%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n Fat= 16.0,\r\n Carbs= 49,\r\n Protein= 3.9,\r\n Iron= \"16%\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n Fat= 0.0,\r\n Carbs= 94,\r\n Protein= 0.0,\r\n Iron= \"0%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n Fat= 0.2,\r\n Carbs= 98,\r\n Protein= 0,\r\n Iron= \"2%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n Fat= 3.2,\r\n Carbs= 87,\r\n Protein= 6.5,\r\n Iron= \"45%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n Fat= 25.0,\r\n Carbs= 51,\r\n Protein= 4.9,\r\n Iron= \"22%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n Fat= 26.0,\r\n Carbs= 65,\r\n Protein= 7,\r\n Iron= \"6%\",\r\n }\r\n };\r\n\r\n private string _sortBy = nameof(Dessert.Fat);\r\n private bool _sortDesc = false;\r\n\r\n public void HandleOnOptionsUpdate(DataOptions options)\r\n {\r\n _sortBy = options.SortBy.FirstOrDefault();\r\n _sortDesc = options.SortDesc.FirstOrDefault();\r\n }\r\n\r\n public void ToggleOrder()\r\n {\r\n _sortDesc = !_sortDesc;\r\n }\r\n\r\n public void NextSort()\r\n {\r\n var index = _headers.FindIndex(h => h.Value == _sortBy);\r\n index = (index + 1) % _headers.Count;\r\n _sortBy = _headers[index].Value;\r\n }\r\n}\r\n",
+ "Type": "Demos.Components.Tables.children.DataTable.misc.ExternalSorting",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 3,
+ "Name": "serverSidePaginateAndSort",
+ "Title": "服务器端分页和排序",
+ "Description": " _desserts = new List();\r\n private bool _loading = true;\r\n private DataOptions _options=new DataOptions();\r\n\r\n private List> _headers = new List>\r\n {\r\n new ()\r\n {\r\n Text= \"Dessert (100g serving)\",\r\n Align= \"start\",\r\n Sortable= false,\r\n Value= nameof(Dessert.Name)\r\n },\r\n new (){ Text= \"Calories\", Value= nameof(Dessert.Calories)},\r\n new (){ Text= \"Fat (g)\", Value= nameof(Dessert.Fat)},\r\n new (){ Text= \"Carbs (g)\", Value= nameof(Dessert.Carbs)},\r\n new (){ Text= \"Protein (g)\", Value= nameof(Dessert.Protein)},\r\n new (){ Text= \"Iron (%)\", Value= nameof(Dessert.Iron)}\r\n };\r\n\r\n public void HandleOnOptionsUpdate(DataOptions options)\r\n {\r\n _options = options;\r\n GetDataFromApi();\r\n }\r\n\r\n protected override void OnInitialized()\r\n {\r\n GetDataFromApi();\r\n }\r\n\r\n public void GetDataFromApi()\r\n {\r\n _loading = true;\r\n FakeApiCallAsync().ContinueWith(task =>\r\n {\r\n var data = task.Result;\r\n _desserts = data.items;\r\n _totalDesserts = data.total;\r\n _loading = false;\r\n\r\n InvokeAsync(StateHasChanged);\r\n });\r\n }\r\n\r\n public async Task<(IEnumerable items, int total)> FakeApiCallAsync()\r\n {\r\n var sortBy = _options.SortBy;\r\n var sortDesc = _options.SortDesc;\r\n var page = _options.Page;\r\n var itemsPerPage = _options.ItemsPerPage;\r\n\r\n var items = GetDesserts();\r\n var total = items.Count();\r\n\r\n if (sortBy.Count == 1 && sortDesc.Count == 1)\r\n {\r\n var header = _headers.Find(header => header.Value == sortBy[0]);\r\n var selector = header.ItemValue.Factory;\r\n\r\n if (!sortDesc[0])\r\n {\r\n items = items.OrderBy(selector);\r\n }\r\n else\r\n {\r\n items = items.OrderByDescending(selector);\r\n }\r\n }\r\n\r\n if (itemsPerPage > 0)\r\n {\r\n items = items.Skip((page - 1) * itemsPerPage).Take(page * itemsPerPage);\r\n }\r\n\r\n await Task.Delay(1000);\r\n return (items, total);\r\n }\r\n\r\n public IEnumerable GetDesserts()\r\n {\r\n return new List\r\n {\r\n new Dessert\r\n {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n Fat= 6.0,\r\n Carbs= 24,\r\n Protein= 4.0,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n Fat= 9.0,\r\n Carbs= 37,\r\n Protein= 4.3,\r\n Iron= \"1%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n Fat= 16.0,\r\n Carbs= 23,\r\n Protein= 6.0,\r\n Iron= \"7%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n Fat= 3.7,\r\n Carbs= 67,\r\n Protein= 4.3,\r\n Iron= \"8%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n Fat= 16.0,\r\n Carbs= 49,\r\n Protein= 3.9,\r\n Iron= \"16%\"\r\n },\r\n new Dessert\r\n {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n Fat= 0.0,\r\n Carbs= 94,\r\n Protein= 0.0,\r\n Iron= \"0%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n Fat= 0.2,\r\n Carbs= 98,\r\n Protein= 0,\r\n Iron= \"2%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n Fat= 3.2,\r\n Carbs= 87,\r\n Protein= 6.5,\r\n Iron= \"45%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n Fat= 25.0,\r\n Carbs= 51,\r\n Protein= 4.9,\r\n Iron= \"22%\",\r\n },\r\n new Dessert\r\n {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n Fat= 26.0,\r\n Carbs= 65,\r\n Protein= 7,\r\n Iron= \"6%\",\r\n }\r\n };\r\n }\r\n}",
+ "Type": "Demos.Components.Tables.children.DataTable.misc.ServerSidePaginateAndSort",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cover": "https://gw.alipayobjects.com/zos/alicdn/rrwbSt3FQ/DataTable.svg",
+ "Cols": 1,
+ "Related": [
+ "/components/data-iterators",
+ "/components/simple-tables",
+ "/components/lists"
+ ],
+ "Subtitle": "数据表格",
+ "Title": "Data tables",
+ "Type": "数据表格"
+ },
+ {
+ "Desc": "\r\n \r\n \r\n \r\n Name\r\n \r\n \r\n Calories\r\n \r\n \r\n \r\n \r\n @foreach (var item in _desserts)\r\n {\r\n \r\n @item.Name \r\n @item.Calories \r\n \r\n }\r\n \r\n \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n }\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n },\r\n new Dessert{\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n },\r\n new Dessert {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n },\r\n new Dessert {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n },\r\n new Dessert {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n },\r\n new Dessert {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n },\r\n new Dessert {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n },\r\n new Dessert {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n },\r\n new Dessert {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n },\r\n new Dessert {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n },\r\n };\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Tables.children.SimpleTables.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 0,
+ "Name": "dark",
+ "Title": "暗色主题",
+ "Description": "\r\n \r\n \r\n \r\n Name\r\n \r\n \r\n Calories\r\n \r\n \r\n \r\n \r\n @foreach (var item in _desserts)\r\n {\r\n \r\n @item.Name \r\n @item.Calories \r\n \r\n }\r\n \r\n \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n }\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n },\r\n new Dessert{\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n },\r\n new Dessert {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n },\r\n new Dessert {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n },\r\n new Dessert {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n },\r\n new Dessert {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n },\r\n new Dessert {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n },\r\n new Dessert {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n },\r\n new Dessert {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n },\r\n new Dessert {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n },\r\n };\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Tables.children.SimpleTables.props.Dark",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "dense",
+ "Title": "紧凑",
+ "Description": "\r\n \r\n \r\n \r\n Name\r\n \r\n \r\n Calories\r\n \r\n \r\n \r\n \r\n @foreach (var item in _desserts)\r\n {\r\n \r\n @item.Name \r\n @item.Calories \r\n \r\n }\r\n \r\n \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n }\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n },\r\n new Dessert{\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n },\r\n new Dessert {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n },\r\n new Dessert {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n },\r\n new Dessert {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n },\r\n new Dessert {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n },\r\n new Dessert {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n },\r\n new Dessert {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n },\r\n new Dessert {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n },\r\n new Dessert {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n },\r\n };\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Tables.children.SimpleTables.props.Dense",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "fixedHeader",
+ "Title": "固定表头",
+ "Description": "\r\n \r\n \r\n \r\n Name\r\n \r\n \r\n Calories\r\n \r\n \r\n \r\n \r\n @foreach (var item in _desserts)\r\n {\r\n \r\n @item.Name \r\n @item.Calories \r\n \r\n }\r\n \r\n \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n }\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n },\r\n new Dessert{\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n },\r\n new Dessert {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n },\r\n new Dessert {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n },\r\n new Dessert {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n },\r\n new Dessert {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n },\r\n new Dessert {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n },\r\n new Dessert {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n },\r\n new Dessert {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n },\r\n new Dessert {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n },\r\n };\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Tables.children.SimpleTables.props.FixedHeader",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "height",
+ "Title": "高度",
+ "Description": "\r\n \r\n \r\n \r\n Name\r\n \r\n \r\n Calories\r\n \r\n \r\n \r\n \r\n @foreach (var item in _desserts)\r\n {\r\n \r\n @item.Name \r\n @item.Calories \r\n \r\n }\r\n \r\n \r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n }\r\n\r\n private List _desserts = new List\r\n {\r\n new Dessert {\r\n Name= \"Frozen Yogurt\",\r\n Calories= 159,\r\n },\r\n new Dessert{\r\n Name= \"Ice cream sandwich\",\r\n Calories= 237,\r\n },\r\n new Dessert {\r\n Name= \"Eclair\",\r\n Calories= 262,\r\n },\r\n new Dessert {\r\n Name= \"Cupcake\",\r\n Calories= 305,\r\n },\r\n new Dessert {\r\n Name= \"Gingerbread\",\r\n Calories= 356,\r\n },\r\n new Dessert {\r\n Name= \"Jelly bean\",\r\n Calories= 375,\r\n },\r\n new Dessert {\r\n Name= \"Lollipop\",\r\n Calories= 392,\r\n },\r\n new Dessert {\r\n Name= \"Honeycomb\",\r\n Calories= 408,\r\n },\r\n new Dessert {\r\n Name= \"Donut\",\r\n Calories= 452,\r\n },\r\n new Dessert {\r\n Name= \"KitKat\",\r\n Calories= 518,\r\n },\r\n };\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Tables.children.SimpleTables.props.Height",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cover": "https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/SimpleTables.svg",
+ "Cols": 1,
+ "Related": [
+ "/components/data-iterators",
+ "/components/data-tables",
+ "/components/lists"
+ ],
+ "Subtitle": "简单表格",
+ "Title": "Simple tables",
+ "Type": "简单表格"
+ },
+ {
+ "Desc": "\r\n Item One \r\n Item Two \r\n Item Three \r\n ",
+ "Type": "Demos.Components.Tabs.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 1,
+ "Name": "alignWithTitle",
+ "Title": "对齐标题",
+ "Description": "\r\n \r\n \r\n Your Dashboard \r\n\r\n \r\n mdi-magnify \r\n \r\n\r\n \r\n mdi-dots-vertical \r\n \r\n \r\n\r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n @item\r\n \r\n }\r\n \r\n \r\n \r\n\r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n @text \r\n \r\n \r\n }\r\n \r\n \r\n\r\n@code {\r\n\r\n StringNumber tab;\r\n\r\n List items = new()\r\n {\r\n \"web\", \"shopping\", \"videos\", \"images\", \"news\",\r\n };\r\n\r\n string text = \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\";\r\n\r\n}",
+ "Type": "Demos.Components.Tabs.props.AlignWithTitle",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "centerActive",
+ "Title": "激活项居中",
+ "Description": "\r\n \r\n One \r\n Two \r\n Three \r\n Four \r\n Five \r\n Six \r\n Seven \r\n Eight \r\n Nine \r\n Ten \r\n Eleven \r\n Twelve \r\n Thirteen \r\n Fourteen \r\n Fifteen \r\n Sixteen \r\n Seventeen \r\n Eighteen \r\n Nineteen \r\n Twenty \r\n \r\n ",
+ "Type": "Demos.Components.Tabs.props.CenterActive",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "customIcons",
+ "Title": "自定义分隔符",
+ "Description": "\r\n \r\n @foreach (var i in Enumerable.Range(1, 30))\r\n {\r\n Item @i \r\n }\r\n \r\n ",
+ "Type": "Demos.Components.Tabs.props.CustomIcons",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "fixedTabs",
+ "Title": "固定选项卡",
+ "Description": "\r\n Option \r\n Another Selection \r\n Items \r\n Another Screen \r\n ",
+ "Type": "Demos.Components.Tabs.props.FixedTabs",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "grow",
+ "Title": "增长",
+ "Description": "\r\n \r\n \r\n\r\n \r\n @foreach (var item in items)\r\n {\r\n @item \r\n }\r\n \r\n\r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n @text \r\n \r\n \r\n }\r\n \r\n \r\n\r\n\r\n\r\n@code {\r\n\r\n StringNumber tab;\r\n\r\n List items = new List() {\"petizers\", \"Entrees\", \"Deserts\", \"Cocktails\"};\r\n\r\n string text = \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\";\r\n\r\n}",
+ "Type": "Demos.Components.Tabs.props.Grow",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "iconAndText",
+ "Title": "图标和文本",
+ "Description": "\r\n \r\n \r\n Recents\r\n
USA
\n \n",
+ "Order": 0,
+ "OtherDocs": {
+ "API": "\n
- \n
- MContainer \n
- MRow \n
- MCol \n
- MSpacer \n
- \n
MContainer：MContainer提供了将你的网站内容居中和水平填充的功能。 你还可以使用 Fluid 属性将容器在所有视口和设备尺寸上完全扩展。 \nMCol：MCol包裹内容，它必须是MRow的直接子集。 \nMRow：MRow是MCol的容器组件。 它使用 Flex 属性来控制其内栏的布局和流。 它使用的是 24px 的标准间隔。 这可以用 Dense 属性来减小，或者用 NoGutters\n来完全去除。 \nMSpacer：MSpacer是一个基本而又通用的间隔组件，用于分配父子组件之间的剩余宽度。 当一个MSpacer放置在子组件之前或之后时，组件将推到其容器的左右两侧。 当多个组件之间使用多个MSpacer时，剩余的宽度将均匀地分布在每个 spacer 之间。 \n
FillHeight applies height: 100% to an element. When applied to MContainer it will also align-items: center.
MASA.Blazor 网格深受 Bootstrap 网格 的启发。 它使用一系列的容器、行、列来整合内容的布局和排列。 如果你不熟悉\nflexbox，阅读 CSS Tricks flexbox 指南，了解背景、术语、指南和代码片段。
\n", + "Code": "使用 Align 和 AlignSelf 属性来改变 flex 项目及其父项的垂直对齐方式。
\n", + "Code": "\r\n @foreach (var align in _alignments)\r\n {\r\n \r\n \r\n @for (int i = 0; i < 3; i++)\r\n {\r\n \r\n \r\n One of three columns\r\n \r\n \r\n }\r\n \r\n \r\n }\r\n\r\n \r\n \r\n @foreach (var align in _alignments)\r\n {\r\n \r\n \r\n One of three columns\r\n \r\n \r\n }\r\n \r\n \r\n\r\n \r\n \r\n @foreach (var align in _alignments)\r\n {\r\n \r\n \r\n One of three columns\r\n \r\n \r\n }\r\n \r\n \r\n
\r\n\r\n@code{\r\n private string[] _alignments = new string[]\r\n {\r\n \"start\",\r\n \"center\",\r\n \"end\"\r\n };\r\n}\r\n",
+ "Type": "Demos.Components.Grid.props.Align",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "breakpointSizing",
+ "Title": "断点尺寸",
+ "Description": "列将自动占用其父容器内相等的空间。 这可以使用 Cols 属性来修改。 你还可以使用 Sm、Md、Lg 和 Xl 属性来进一步定义不同视口尺寸下的列占用空间。
\n", + "Code": "使用 Justify 属性改变 flex 项目的水平对齐方式。
\n", + "Code": "你可以使用 NoGutters 属性从 MRow 中移除负值外边距，从其直接子 MCol 中移除内边距。
偏移对于控制元素不可见或控制内容位置很有用。 就像断点一样，你可以为任何可用的尺寸设置一个偏移。 这使你可以根据自己的需求精确地调整应用布局。
\n", + "Code": "\r\n \r\n \r\n \r\n \r\n .col-md-4\r\n \r\n \r\n \r\n \r\n .col-md-4 .offset-md-4\r\n \r\n \r\n \r\n \r\n \r\n \r\n .col-md-3 .offset-md-3\r\n \r\n \r\n \r\n \r\n .col-md-3 .offset-md-3\r\n \r\n \r\n \r\n \r\n \r\n \r\n .col-md-6 .offset-md-3\r\n \r\n \r\n \r\n \r\n
",
+ "Type": "Demos.Components.Grid.props.Offset",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "offsetBreakpoint",
+ "Title": "偏移断点",
+ "Description": "偏移也可以在每个断点的基础上设置。
\n", + "Code": "\r\n \r\n \r\n \r\n \r\n .col-sm-5 .col-md-6\r\n \r\n \r\n \r\n \r\n .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0\r\n \r\n \r\n \r\n \r\n \r\n \r\n .col-sm-6 .col-md-5 .col-lg-6\r\n \r\n \r\n \r\n \r\n .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0\r\n \r\n \r\n \r\n \r\n
",
+ "Type": "Demos.Components.Grid.props.OffsetBreakpoint",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "order",
+ "Title": "排序",
+ "Description": "你可以控制网格项目的排序。 与偏移一样，你可以为不同的尺寸设置不同的顺序。 设计专门的屏幕布局，以适应任何应用。
\n", + "Code": "\r\n \r\n \r\n \r\n \r\n First, but unordered\r\n \r\n \r\n \r\n \r\n Second, but last\r\n \r\n \r\n \r\n \r\n Third, but first\r\n \r\n \r\n \r\n \r\n
",
+ "Type": "Demos.Components.Grid.props.Order",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "orderFirstAndLast",
+ "Title": "先后排序",
+ "Description": "你也可以明确指定 First 或 Last，这将分别为 order CSS 属性分配 -1 或 13 值。
\n", + "Code": "\r\n \r\n \r\n \r\n \r\n First, but last\r\n \r\n \r\n \r\n \r\n Second, but unordered\r\n \r\n \r\n \r\n \r\n Third, but first\r\n \r\n \r\n \r\n \r\n
",
+ "Type": "Demos.Components.Grid.props.OrderFirstAndLast",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 2,
+ "Name": "columnWrapping",
+ "Title": "换行列",
+ "Description": "当在给定的行中放置了超过 12 个列时（没有使用 .flex-nowrap），每一组额外的列都将被包入新的行。
\r\n \r\n \r\n \r\n \r\n .col-9\r\n \r\n \r\n \r\n \r\n .col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.\r\n \r\n \r\n \r\n \r\n .col-6
Subsequent columns continue along the new line.\r\n \r\n \r\n \r\n \r\n
",
+ "Type": "Demos.Components.Grid.misc.ColumnWrapping",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 3,
+ "Name": "equalWidthColumns",
+ "Title": "等宽列",
+ "Description": "Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.\r\n
Subsequent columns continue along the new line.\r\n
你可以把等宽列分成多行。\n虽然旧版本的浏览器有解决办法，但仍有一个 Safari flexbox 问题。\n如果你是最新的 Safari，无需担心这个问题。
\n", + "Code": "\r\n \r\n \r\n @for (int index = 0; index < 4; index++)\r\n {\r\n \r\n \r\n Column\r\n \r\n \r\n if (index == 1)\r\n {\r\n \r\n \r\n
",
+ "Type": "Demos.Components.Grid.misc.EqualWidthColumns",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 4,
+ "Name": "growAndShrink",
+ "Title": "增长与收缩",
+ "Description": "默认情况下，flex 组件将自动填充行或列中的可用空间。 没有指定具体尺寸时，它们也会相对于 flex 容器中的其他 flex 项目收缩。 你可以使用 cols 属性定义 MCol 的列宽，并提供 1 到 12 的值。
\r\n \r\n \r\n @for (var index = 0; index < 4; index++)\r\n {\r\n \r\n \r\n col\r\n \r\n \r\n }\r\n \r\n \r\n @for (int index = 0; index < 2; index++)\r\n {\r\n \r\n \r\n col-@(index == 0 ? 8 : 4)\r\n \r\n \r\n }\r\n \r\n \r\n
",
+ "Type": "Demos.Components.Grid.misc.GrowAndShrink",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 5,
+ "Name": "marginHelpers",
+ "Title": "外边距辅助",
+ "Description": "使用外边距工具类可以强行把同级列分开。
\n", + "Code": "\r\n \r\n \r\n \r\n \r\n .col-md-4\r\n \r\n \r\n \r\n \r\n .col-md-4 .ml-auto\r\n \r\n \r\n \r\n \r\n \r\n \r\n .col-md-3 .ml-md-auto\r\n \r\n \r\n \r\n \r\n .col-md-3 .ml-md-auto\r\n \r\n \r\n \r\n \r\n \r\n \r\n .col-auto .mr-auto\r\n \r\n \r\n \r\n \r\n .col-auto\r\n \r\n \r\n \r\n \r\n
\r\n",
+ "Type": "Demos.Components.Grid.misc.MarginHelpers",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 5,
+ "Name": "nested",
+ "Title": "嵌套网格",
+ "Description": "与其他框架类似，网格可以被嵌套，以实现非常自定义的布局。
\n", + "Code": "\r\n \r\n \r\n \r\n \r\n Level 1: .col-sm-9\r\n \r\n \r\n \r\n \r\n Level 2: .col-8 .col-sm-6\r\n \r\n \r\n \r\n \r\n Level 3: .col-4 .col-sm-6\r\n \r\n \r\n \r\n \r\n \r\n \r\n
",
+ "Type": "Demos.Components.Grid.misc.Nested",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 5,
+ "Name": "oneColumnWidth",
+ "Title": "一列宽度",
+ "Description": "使用自动布局时，你可以只定义一列的宽度，并且仍然可以让它的同级元素围绕它自动调整大小。
\n", + "Code": "\r\n \r\n \r\n @for (var index = 0; index < 3; index++)\r\n {\r\n var localVariable = index + 1;\r\n \r\n \r\n @localVariable of 3 @(localVariable == 2 ? \"(wider)\" : \"\")\r\n \r\n \r\n }\r\n \r\n \r\n @for (int index = 0; index < 3; index++)\r\n {\r\n var localVariable = index + 1;\r\n \r\n \r\n @localVariable of 3 @(localVariable == 2 ? \"(wider)\" : \"\")\r\n \r\n \r\n }\r\n \r\n \r\n
",
+ "Type": "Demos.Components.Grid.misc.OneColumnWidth",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 5,
+ "Name": "rowAndColumnBreakpoints",
+ "Title": "行和列断点",
+ "Description": "根据分辨率动态地改变你的布局。 （调整你的屏幕大小，并观看顶部 row 布局在 sm、md 和 lg 断点上的变化）。
MSpacer 组件在你想要填充可用空间或在两个组件之间留出空间时非常有用。
Masa.Blazor 网格系统的强大和灵活性使你能够创建出色的用户界面。
\n", + "Code": "为列分配断点宽度可以根据其内容的性质宽度来配置调整大小。
\n", + "Code": "MButtonGroup 组件是专门针对 MButton 构建的 MItemGroup 的简单包装器。
- \n
- MButtonGroup \n
- MButton \n
切换按钮允许您创建一个样式化的按钮组，可以使用 @bind-Value(s) 下选择或切换。
\n", + "Code": "Exclusive
\r\nMultiple
\r\nNo Options Selected
\r\nMandatory
\r\nText Options
\r\nText & Icon Options
\r\nMButtonGroup 带有 mandatory 属性将总是有一个（被选中的）值。
\r\n Mandatory\r\n
\r\nMButtonGroup 带有 multiple 属性将允许用户选中多个值并以数组的形式返回。
\r\n Multiple\r\n
\r\n你可以使用 rounded 属性让 MButtonGroup 变成圆角样式。
\r\n Rounded\r\n
\r\n可与 MToolbar 轻松集成自定义按钮方案。
对类似的操作进行分组，并设计自己的 WYSIWYG 组件。
\n", + "Code": "MChipGroup 通过提供可分组的功能来增强 MChip 组件。 它使用纸片来创建选择组。
- \n
- MChipGroup \n
- MChip \n
使用 Column 属性的纸片组可以包装它们的纸片。
\n", + "Code": "\r\n \r\n @foreach (var tag in _tags)\r\n {\r\n \r\n @tag\r\n \r\n }\r\n \r\n
\r\n 使用 Filter 属性轻松创建提供额外反馈的纸片组。 这就与用户选中的纸片产生了一种可供选择的视觉样式。
\n", + "Code": "\r\n Choose amenities\r\n
\r\n\r\n\r\n Choose neighborhoods\r\n
\r\n\r\n具有 Mandatory 属性的纸片组必须始终选择一个值。
\n", + "Code": "具有 Multiple prop的纸片组可以选择多个值。
\n", + "Code": "MChip 组件可以有一个用于其model的明确值。 这会传递到 MChipGroup 组件并且在您不想使用纸片索引作为其值时非常有用。
\r\n Shirt Blouse\r\n
\r\n纸片组允许创建自定义接口，这些接口执行与项组或单选控件相同的操作，但在风格上有所不同。
\n", + "Code": "\r\n Toothbrush\r\n
\r\nMItemGroup 提供从任何组件中创建一组可选项的功能。 这是 MTabs 和 Mcarousel 等组件的基本功能。
- \n
- MItem \n
- MItemGroup \n
MItemGroup 的核心用法是创建由 Value 控制的任何对象的组。
The ActiveClass property allows you to set custom CSS class on active items.
\n", + "Code": "Mandatory 项目组必须至少选择一个项目。
\n", + "Code": "项目组可以选择 多个 个项目。
\n", + "Code": "轻松绑定自定义纸片组。
\n", + "Code": "当图标允许选择或取消选择单个选项（例如将项目标记为收藏）时，它们可以用作切换按钮。
\n", + "Code": "MListItemGroup 提供创建一组可选择的 MListItem 的能力。MListItemGroup 组件利用其核心的 MItemGroup 来为交互式列表提供一个简洁的接口。
- \n
- MListGroup \n
- MListItem \n
- MListItemAction \n
- MListItemActionText \n
- MListItemAvatar \n
- MListItemContent \n
- MListItemGroup \n
- MListItemSubtitle \n
- MListItemTitle \n
默认情况下，ListItemGroup 操作类似于 ItemGroup 。如果没有提供 Value，则该群组将基于其索引提供默认值。
您可以设置一个在选择项目时将添加的类。
\n", + "Code": "必须至少选定一项。
\n", + "Code": "您可以一次选择多个项目。
\n", + "Code": "您可以轻松禁用所选 MListItem 的默认高亮显示。 这为用户的选择创建了一个较低的配置文件。
使用默认插槽，您可以访问项目内部状态并进行切换。 因为 Active 属性是一个布尔值, 我们使用复选框上的 IsActive prop 将其状态链接到 MListItem。
MSlideGroup 组件用于显示伪分页信息。它以 MItemGroup 为核心，为 MTabs\n和 MChipGroup 等组件提供基础。
- \n
- MSlideGroup \n
- MSlideItem \n
类似于 MWindow 组件，MSideGroup 允许项目根据需要占用尽可能多的空间，允许用户在提供的信息中水平移动。
ActiveClass 属性允许您在激活的项上设置自定义的 CSS 类。
\n", + "Code": "使用 CenterActive 参数将使活动的项目永远居中。
您可以使用 NextIcon 和 PrevIcon 添加自定义分页图标代替箭头。
Mandatory 将使幻灯片组需要至少选择一个项目。
您可以通过设置 Multiple 来选择多个项目。
自定义幻灯片组以在图表上创造性地显示信息。 使用此选项，可以方便地为用户显示辅助信息。
\n", + "Code": "\r\n Selected @model\r\n
\r\nMWindow 组件提供了将内容从一个窗格过渡到另一个窗格的基础功能。 其他组件如MTabs、MCarousel 和 MStepper 使用此组件作为其核心。
- \n
- MWindow \n
- MWindowItem \n
MWindow 被设计成可以轻松地循环浏览内容，它提供了一个简单的接口来创建真正的自定义实现。
\r\n \r\n mdi-record \r\n \r\n
\r\n \r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\r\n
\r\n\r\n\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\r\n
\r\n\r\n\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\r\n
\r\n可以用 PrevContent 和 NextContent 槽来自定义窗口中的箭头部分。
Slide @item
\r\n反转 MWindow 总是显示反向过渡。
Slide @(item + 1)
\r\nMWindow 可以是垂直的。 垂直窗口有 Y 轴过渡而不是 X 轴过渡。
Slide @(item + 1)
\r\n创建具有平滑动画的丰富表单。 MWindow 能够自动跟踪当前的选择索引，来改变过渡动画的方向。 这可以通过 Reverse 参数来手动控制。
\r\n \r\n \r\n
\r\n \r\n Welcome to MASA.Blazor\r\n
\r\n Thanks for signing up!\r\nMWindow 使创建自定义组件（如不同样式的幻灯片）变得很轻松。
MHover组件为处理任何组件的悬停状态提供了一个干净的接口。
- \n
- MHover \n
设置 Disabled 属性可以禁用悬停功能。
\n", + "Code": "通过组合或单独使用 OpenDelay 和 CloseDelay 属性延迟 MHover 事件。
MHover 可以与 for 结合使用，以便在用户与列表交互时突出单个项目。
@item.Title
\r\n\r\n\r\n
\r\n\r\n @item.Text
\r\n@item.SubText
\r\n\r\n @foreach (var icon in _icons)\r\n {\r\n \r\n \r\n @icon\r\n \r\n \r\n }\r\n
\r\n 创建高度定制的组件以响应用户交互。
\n", + "Code": "\r\n For the perfect meal\r\n
\r\n \r\n QW cooking utensils\r\n
\r\n\r\n Our Vintage kitchen utensils delight any chef.
\r\n Made of bamboo by hand\r\n
\r\n \r\n Made of bamboo by hand\r\n
MIcon 组件提供了一系列用于为您的应用程序的各个方面提供上下文的胶卷。 对于所有可用图标的列表, 请访问官方的 Material Design 图标 页面。\n要使用任何这些图标，只需使用 mdi- 前缀，然后是图标名称。
- \n
- MIcon \n
使用色彩辅助器，您可以改变标准的暗黑和明亮的主题的图标的颜色。
\n", + "Code": "将任何单击事件绑定到 MIcon 将自动将光标更改为指针。
图标可以在按钮内部使用，以增加动作的重点。
\n", + "Code": "\r\n
",
+ "Type": "Demos.Components.Icon.misc.Button",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 0,
+ "Name": "fontAwesome",
+ "Title": "Font Awesome",
+ "Description": "\r\n \r\n Accept\r\n \r\n mdi-checkbox-marked-circle\r\n \r\n \r\n\r\n \r\n Decline\r\n \r\n mdi-cancel\r\n \r\n \r\n\r\n \r\n \r\n mdi-minus-circle\r\n Cancel\r\n \r\n
\r\n\r\n \r\n \r\n \r\n mdi-arrow-left\r\n Back\r\n \r\n\r\n \r\n \r\n mdi-wrench\r\n \r\n \r\n\r\n \r\n \r\n mdi-cloud-upload\r\n \r\n \r\n
\r\n\r\n \r\n \r\n mdi-thumb-up \r\n \r\n\r\n \r\n mdi-thumb-down \r\n \r\n
\r\n同样支持 Font Awesome。 只需使用 fa- 预定图标名称。 请注意，您仍然需要在您的项目中包含Font Awesome 图标。
Material Design 也是支持的。
\n", + "Code": "如果您想要在 MIcon 组件中使用SVG图标，仅支持传入SVG的 path。
MImage组件包含支持丰富媒体的功能。
- \n
- MImage \n
MImage 组件用于显示具有延迟加载和占位符的响应图像。
如果你想改变图像的长宽比，你可以设置一个固定的宽高比。
\n", + "Code": "\r\n \r\n \r\n\r\n
\r\n\r\n@code {\r\n private double _width = 300;\r\n}",
+ "Type": "Demos.Components.Image.props.AspectRatio",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "contain",
+ "Title": "包含",
+ "Description": "如果提供的长宽比与实际图像不匹配，则默认行为是填充尽可能多的空间，裁剪图像的边。启用 Contain 属性可以防止这种情况，但会导致两边出现空白。
\n", + "Code": "\r\n Default (cover)\r\n
\r\n \r\n Matching\r\n
\r\n \r\n Too high\r\n
\r\n \r\n Too low\r\n
\r\n \r\n Contain\r\n
\r\n \r\n Matching\r\n
\r\n \r\n Too high\r\n
\r\n \r\n Too low\r\n
\r\n Gradient 属性可用于对图像应用简单的渐变叠加。更复杂的渐变应该作为一个class写在内容插槽上。
\n", + "Code": "MImage 将自动增长到 Src 的大小，保持正确的纵横比。你可以用Height和MaxHeight的属性来限制。
MImage 有一个特别的 PlaceholderContent 插槽，在图像加载时占位显示。 注意：下面的例子有一个错误的 Src，因此图片不会加载，以方便你观察占位符。
您可以使用 MImage 来制作图片库。
\r\n \r\n @for (var index = 0; index < 9; index++)\r\n {\r\n var localVariable = index;\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n
",
+ "Type": "Demos.Components.Image.misc.Grid",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cols": 1,
+ "Related": [
+ "/components/grid-system",
+ "/components/aspect-ratios",
+ "/components/parallax"
+ ],
+ "Subtitle": "图像",
+ "Title": "Images",
+ "Type": "图像"
+ },
+ {
+ "Desc": "MList 组件用于显示信息。 它可以包含头像、内容、操作、列表组标题等等。 列表以易于在集合中识别特定项目的方式显示内容。 它们为组织一组文本和图像提供了一致的样式。
- \n
- MList \n
- MListGroup \n
- MListItem \n
- MListItemAction \n
- MListItemActionText \n
- MListItemAvatar \n
- MListItemContent \n
- MListItemGroup \n
- MListItemIcon \n
- MListItemSubtitle \n
- MListItemTitle \n
如果您要查找有状态列表项，请查看 MListItemGroup。
\n" + }, + "LastWriteTime": "2021-11-17T17:23:13.5872434+08:00", + "DemoList": [ + { + "Order": 0, + "Name": "index", + "Title": "使用", + "Description": "列表有三种基本形式。 单行 (默认), 双行 和 三行. 行声明指定了项目的最小高度，也可以使用相同的属性从 MList 中进行控制。
List 可以通过 Dense 属性变密集。
您不能与已禁用的 MList 交互。
在 Flat 属性的 MList 中选择时，项目不会发生变化。
列表可以接受一个替代的 Nav 样式，它减少了 MListItem 的宽度，并增加了一个边框半径。
你可以让 MList 项变成圆角。
形状列表在 MListItem 的一侧具有圆形边界。
使用 MListGroup 组件，您可以使用 SubGroup 属性创建多达 2 级的深度。
对于三行列表，字幕将垂直夹在 2 行，然后省略。
\n", + "Code": "列表组件可以包含列表组标题，分割线，以及1行或者更多行，如果副标题文本溢出则会以省略号的形式截断文本。
\n", + "Code": "列表可以包含一组项目，这些项目将在单击MListGroup的ActivatorContent时显示。扩展列表也用于 MNavigationDrawer 组件中。
可操作的 ThreeLine 列表。 利用 MListItemGroup，轻松将动作连接到图块。
\n", + "Code": "列表组件可以包含一个操作栈。当你需要在你的动作项目旁边显示数据文本时，这是非常有用的。
\n", + "Code": "一个列表可以和一张卡片结合起来。
\n", + "Code": "\r\n Ali Conners\r\n
\r\n 一个简单的列表利用 MistItemIcon, MListItemTitle 和 MListItemAvatar。
在这里，我们结合了单行列表中的 MListItemAvatar 和 MLlistItemIcon。
列表可以包含多个子标头和分隔符。
\n", + "Code": "MMenu 组件在激活它的元素的位置上展示一个菜单。
- \n
- MMenu \n
请记住将激活菜单的元素放置在 ActivatorContent 中。
\n", + "Code": "\r\n \r\n \r\n DROPDOWN \r\n \r\n\r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n \r\n @item\r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n
\r\n\r\n@code {\r\n\r\n string[] items =\r\n {\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me 2\"\r\n };\r\n\r\n}",
+ "Type": "Demos.Components.Menu.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 1,
+ "Name": "absolute",
+ "Title": "绝对定位",
+ "Description": "菜单可以使用 Absolute 属性，将其绝对放置在激活器元素的顶部。 尝试点击图像上的任意位置。
\n", + "Code": "菜单也可以通过使用 Absolute 以及 PositionX 和 PositionY 参数来在没有激活器的情况下使用。 尝试右键点击图像上的任何地方。
\n", + "Code": "\r\n \r\n \r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n \r\n @item\r\n \r\n \r\n \r\n }\r\n \r\n \r\n
\r\n\r\n\r\n\r\n@code {\r\n\r\n bool showMenu = false;\r\n double X = 0;\r\n double Y = 0;\r\n\r\n string[] items =\r\n {\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me 2\"\r\n };\r\n\r\n private async Task Show(MouseEventArgs args)\r\n {\r\n showMenu = false;\r\n StateHasChanged();\r\n await Task.Delay(16);\r\n \r\n X = args.ClientX;\r\n Y = args.ClientY;\r\n showMenu = true;\r\n StateHasChanged();\r\n }\r\n}",
+ "Type": "Demos.Components.Menu.props.AbsoluteWithoutActivator",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 3,
+ "Name": "closeOnClick",
+ "Title": "点击关闭",
+ "Description": "失去焦点时可以关闭菜单。
\n", + "Code": "\r\n \r\n \r\n DROPDOWN \r\n \r\n\r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n \r\n @item\r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n
\r\n\r\n@code {\r\n\r\n [Inject]\r\n NavigationManager NavigationManager { get; set; }\r\n\r\n string[] items =\r\n {\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me 2\"\r\n };\r\n\r\n bool closeOnClick = true;\r\n}",
+ "Type": "Demos.Components.Menu.props.CloseOnClick",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 4,
+ "Name": "closeOnContentClick",
+ "Title": "点击内容关闭",
+ "Description": "您可以配置在点击内容后是否关闭 MMenu。
\r\n \r\n \r\n DROPDOWN \r\n \r\n\r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n \r\n @item\r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n
\r\n\r\n@code {\r\n\r\n string[] items =\r\n {\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me 2\"\r\n };\r\n\r\n bool closeOnContentClick = true;\r\n}",
+ "Type": "Demos.Components.Menu.props.CloseOnContentClick",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 5,
+ "Name": "disabled",
+ "Title": "禁用",
+ "Description": "您可以禁用菜单。禁用的菜单无法打开。
\n", + "Code": "\r\n \r\n \r\n DROPDOWN \r\n \r\n\r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n \r\n @item\r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n
\r\n\r\n@code {\r\n\r\n string[] items =\r\n {\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me 2\"\r\n };\r\n\r\n bool disabled = true;\r\n}",
+ "Type": "Demos.Components.Menu.props.Disabled",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 6,
+ "Name": "offsetX",
+ "Title": "X偏移",
+ "Description": "菜单可以被X轴偏移，以使激活器可见。
\n", + "Code": "\r\n \r\n \r\n DROPDOWN \r\n \r\n\r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n \r\n @item\r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n
\r\n\r\n@code {\r\n\r\n string[] items =\r\n {\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me 2\"\r\n };\r\n\r\n bool offset = true;\r\n}",
+ "Type": "Demos.Components.Menu.props.OffsetX",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 7,
+ "Name": "offsetY",
+ "Title": "Y偏移",
+ "Description": "菜单可以被Y轴偏移，以使激活器可见。
\n", + "Code": "\r\n \r\n \r\n DROPDOWN \r\n \r\n\r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n \r\n @item\r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n
\r\n\r\n@code {\r\n\r\n string[] items =\r\n {\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me 2\"\r\n };\r\n\r\n bool offset = true;\r\n}",
+ "Type": "Demos.Components.Menu.props.OffsetY",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 8,
+ "Name": "openOnHover",
+ "Title": "悬停",
+ "Description": "设置使用 OpenOnHover 属性时，菜单会悬停时打开而不是点击时打开。
\n", + "Code": "\r\n \r\n \r\n DROPDOWN \r\n \r\n\r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n \r\n @item\r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n
\r\n\r\n@code {\r\n\r\n string[] items =\r\n {\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me 2\"\r\n };\r\n\r\n}",
+ "Type": "Demos.Components.Menu.props.OpenOnHover",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 13,
+ "Name": "rounded",
+ "Title": "圆角",
+ "Description": "菜单可以通过 Rounded 属性设置为圆角。关于圆角样式的其他信息在 Border Radius 页。
\n", + "Code": "在 RenderFragment 语法中，嵌套的激活器，例如用 MMenu 和 MTooltip 附加到同一激活按钮，需要特定的设置才能正常运行。注意：此语法同样用于其他嵌套激活器，例如 MDialog\n/ MTooltip。
\r\n \r\n \r\n \r\n \r\n @{\r\n var attrs = new Dictionary();\r\n m.Attrs.ToList().ForEach(item => attrs[item.Key] = item.Value);\r\n c.Attrs.ToList().ForEach(item => attrs[item.Key] = item.Value);\r\n }\r\n \r\n Dropdown w/ Tooltip\r\n \r\n \r\n \r\n Im A ToolTip\r\n \r\n \r\n \r\n \r\n \r\n @foreach (var item in items)\r\n {\r\n \r\n \r\n \r\n @item\r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n
\r\n\r\n@code {\r\n\r\n string[] items =\r\n {\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me\",\r\n \"Click Me 2\"\r\n };\r\n\r\n}",
+ "Type": "Demos.Components.Menu.contents.ActivatorAndTooltip",
+ "Style": "",
+ "Debug": false,
+ "Group": 2
+ },
+ {
+ "Order": 11,
+ "Name": "customTransitions",
+ "Title": "自定义过渡",
+ "Description": "MASA.Blazor 有三个标准过渡，scale，slide-x 和 slide-y。您也可以创建自己的过渡并作为过渡参数传递。
\n", + "Code": "菜单可以配置为在打开时为静态菜单，使其充当弹出菜单。当菜单内容中有多个交互式项目时，这很有用。
\n", + "Code": "\r\n \r\n \r\n POPOVER MENU \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n ![\"John\"](\"https://cdn.vuetifyjs.com/images/john.jpg\"\r\n)
\r\n \r\n\r\n \r\n John Leider \r\n Founder of Vuetify \r\n \r\n\r\n \r\n fav = !fav\">\r\n mdi-heart \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n Enable messages\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n Enable hints\r\n \r\n \r\n \r\n\r\n \r\n menu = false\">Cacnel \r\n menu = false\">Save \r\n \r\n \r\n \r\n \r\n
\r\n\r\n@code {\r\n bool fav = true;\r\n bool menu = false;\r\n bool message = false;\r\n bool hints = true;\r\n}",
+ "Type": "Demos.Components.Menu.misc.PopoverMenu",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 13,
+ "Name": "useInComponents",
+ "Title": "在组件中使用",
+ "Description": "\r\n 菜单可以放在几乎任何组件中。
\n", + "Code": "MNavigationDrawer 是用于导航应用程序的组件。 通常被包装在 MCard 元素中使用。
如果使用启用了 App 属性的 MNavigationDrawer，则不需要像示例中那样使用 Absolute 属性。
导航抽屉主要用于存放您应用程序中页面的链接。通常使用 Nav 属性将抽屉与 MList 组件配对使用。
\n", + "Code": "使用 Bottom 属性我们能够在移动设备上重新定位抽屉，让其从屏幕底部出来。 这是另一种样式，只能遇到 MobileBreakpoint 时激活。
\n", + "Code": "将组件放置在 MiniVariant 模式中，并在悬停时扩展开。不更改 MMain 的内容区域。 宽度可以使用 MiniVariantWidth 属性来控制。
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Sandra Adams\r\n \r\n andra_a88@gmail.com \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n mdi-folder \r\n \r\n My Files \r\n \r\n \r\n \r\n mdi-account-multiple \r\n \r\n Shared with me \r\n \r\n \r\n \r\n mdi-star \r\n \r\n Starred \r\n \r\n \r\n \r\n \r\n
",
+ "Type": "Demos.Components.NavigationDrawer.props.ExpandOnHover",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 2,
+ "Name": "floating",
+ "Title": "永久浮动抽屉",
+ "Description": "默认情况下，导航抽屉有一个 1px 右边框，将其与内容分开。 在这个例子中，我们要把抽屉从左边分离出来，让它自己浮动。 Floating 属性可移除右边的边框(如果使用 Right 则移除左边框)。
\n", + "Code": "通过 Src 属性将自定义背景应用于抽屉。 如果你需要自定义 MImage 的属性，你可以使用 ImgContent。
当使用 MiniVariant 属性时，抽屉将会缩小(默认56px)，并隐藏除第一个元素外的 Mlist 内的所有内容。
导航抽屉也可以放置在应用程序（或元素）的右侧。这对于创建带有可能没有任何导航链接的辅助信息的边表也很有用。 当使用 RTL 时，您必须为抽屉明确定义 Right。
\n", + "Code": "临时抽屉位于它的应用程序上方，在移动设备上默认模拟此抽屉行为。
\n", + "Code": "导航抽屉可以自定义，以适合任何应用程序的设计。 我们在这里使用 AppendContent 自定义背景颜色和附加的内容区域。
\n", + "Code": "\r\n LogOut \r\n
\r\n 在此示例中，我们定义了一个自定义宽度的抽屉来容纳嵌套。 我们使用 MRow 确保抽屉和列表在水平方向彼此相邻。
Overlay 组件用于强调特定元素或其中的一部分。 它向用户发出应用程序内状态更改的信号，可用于创建加载程序，对话框等。
- \n
- MOverlay \n
以最简单的形式，MOverlay 组件将在您的应用程序上添加暗淡的图层。
\r\n \r\n Show Overlay\r\n \r\n\r\n
\r\n\r\n@code {\r\n bool overlay = false;\r\n\r\n async Task OnClick(MouseEventArgs args)\r\n {\r\n overlay = true;\r\n await InvokeAsync(StateHasChanged);\r\n\r\n await Task.Delay(2000);\r\n overlay = false;\r\n }\r\n}\r\n",
+ "Type": "Demos.Components.Overlay.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 1,
+ "Name": "absolute",
+ "Title": "绝对定位",
+ "Description": "Absolute 遮罩层被放置在绝对位置，并包含在父元素中。
\n", + "Code": "Opacity 允许您自定义组件的透明度。
\n", + "Code": "ZIndex 使您能够轻松地更改 MOverlay 组件的覆盖顺序。
使用 MHover 作为背景，添加进度组件来轻松创建自定义加载器。
\n", + "Code": "\r\n Magento Forests\r\n
\r\n Travel to the best outdoor experience on planet Earth. A vacation you will never forget!\r\n使用 MOverlay 作为背景，添加进度组件来轻松创建自定义加载器。
\r\n \r\n Launch Application\r\n \r\n mdi-open-in-new\r\n \r\n \r\n\r\n \r\n \r\n
\r\n\r\n@code {\r\n bool overlay = false;\r\n\r\n void Toggle(MouseEventArgs args)\r\n {\r\n overlay = true;\r\n\r\n Task.Run(async () =>\r\n {\r\n await Task.Delay(3000);\r\n overlay = false;\r\n\r\n await InvokeAsync(StateHasChanged);\r\n });\r\n }\r\n}",
+ "Type": "Demos.Components.Overlay.misc.Loader",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cols": 1,
+ "Related": [
+ "/components/cards",
+ "/components/sheets",
+ "/components/dialogs"
+ ],
+ "Subtitle": "遮罩层",
+ "Title": "Overlays",
+ "Type": "遮罩层"
+ },
+ {
+ "Desc": "MPagination 组件用于分离长数据集，以便用户消化信息。 根据提供的数据量，分页组件将自动缩放。 要维护当前页面，只需提供 Value 属性。
- \n
- MPagination \n
分页默认根据设置的 Length 属性显示页数，两边有 Prev 和 Next 按钮帮助导航。
\n", + "Code": "\r\n
\r\n\r\n@code{\r\n private int _page = 1;\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pagination.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 1,
+ "Name": "circle",
+ "Title": "圆形",
+ "Description": "Circle 属性为你提供了分页按钮的另一种样式。
\n", + "Code": "\r\n
\r\n\r\n@code{\r\n private int _page = 1;\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pagination.props.Circle",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "disabled",
+ "Title": "禁用",
+ "Description": "使用 Disabled 属性，可以手动禁用分页。
\n", + "Code": "\r\n
\r\n\r\n",
+ "Type": "Demos.Components.Pagination.props.Disabled",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "icon",
+ "Title": "图标",
+ "Description": "上一页和下一页的图标可以通过 PrevIcon 和 NextIcon 属性自定义。
\n", + "Code": "\r\n
\r\n\r\n@code{\r\n private int _page = 1;\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pagination.props.Icon",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "length",
+ "Title": "长度",
+ "Description": "使用 Length 属性可以设置 MPagination 的长度，如果页面按钮的数量超过了父容器，分页将被从中截断。
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n@code\r\n{\r\n private int _page = 1;\r\n}",
+ "Type": "Demos.Components.Pagination.props.Length",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "totalVisible",
+ "Title": "最大可见分页数",
+ "Description": "你也可以通过 TotalVisible 属性手动设置最大可见分页数。
\n", + "Code": "\r\n
\r\n\r\n@code{\r\n private int _page = 1;\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pagination.props.TotalVisible",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cols": 1,
+ "Related": [
+ "/components/data-iterator",
+ "/components/data-tables",
+ "/components/lists"
+ ],
+ "Subtitle": "分页",
+ "Title": "Pagination",
+ "Type": "分页"
+ },
+ {
+ "Desc": "MColorPicker 允许你使用各种输入方法来选择颜色。
- \n
- MColorPicker \n
可以使用 HideCanvas 属性隐藏画布，也可以使用 CanvasHeight 属性设置其高度。 选择点的大小可以用 DotSize 属性来控制。
\n", + "Code": "使用 Elevation 或 Flat 属性调整 MColorPicker 组件的海拔。 设置 Flat 相当于将 Elevation 设置为0。
数字输入可以用 HideInputs 属性隐藏，滑块可以用 HideSliders 属性隐藏。 \n你也可以使用 HideModeSwitch 属性隐藏模式切换图标。 模式也可以通过 Mode 属性进行外部控制。
\n", + "Code": "MColorPicker 使用 @bind-Value 属性来控制显示的颜色。 它支持十六进制字符串，如 #FF00FF 和 #FF00FF00，以及表示 RGBA、HSLA 和 HSVA\n值的对象。
使用 ShowSwatches 属性，你可以显示一个色板供用户选择。 也可以使用 Swatches 属性自定义显示什么颜色。该属性接受一个二维数组，其中第一维定义一列，第二维通过提供 rgba\n十六进制字符串定义从上到下的色板。 你也可以使用 SwatchesMaxHeight 属性设置色板部分的最大高度。
\n", + "Code": "TODO", + "Type": "Demos.Components.Pickers.children.ColorPickers.props.Swatches", + "Style": "", + "Debug": false, + "Group": 0 + } + ], + "Children": [], + "Category": "Components", + "Cover": "https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/ColorPicker.svg", + "Cols": 1, + "Related": [ + "/components/menus", + "/styles/colors", + "/features/theme" + ], + "Subtitle": "颜色选择器", + "Title": "Color pickers", + "Type": "颜色选择器" + }, + { + "Desc": "MDatePicker 是一个功能齐全的日期选择组件, 它让用户选择一个日期或日期范围。
- \n
- MDatePicker \n
MDatePicker 接受ISO 8601 日期 字符串(YYYY-MM-DD)。 有关 ISO 8601 和其他标准的更多信息，请访问 ISO（国际标准化组织） 国际标准 官方网页。
日期选择器有两种方向变化，纵向（默认）和横向。 默认情况下，当日期（用于日期选择器）或月份（用于月份选择器）选中时它们将发出input事件，但使用Reactive，它们甚至可以在单击年/月之后更新模型。
您可以使用数组、对象和函数指定允许的日期。
\n", + "Code": "可以使用 Color 和 HeaderColor 设置日期选择器颜色。 如果没有提供 HeaderColor, 头部将使用 Color 值。
\n", + "Code": "MDatePicker 组件支持最高高度(z轴)值为24。\n欲了解更多关于高度的信息，请访问官方的 Material Design elevations 页面。
您可以覆盖选择器中使用的默认图标。
\n", + "Code": "日期选择器可以使用 Multiple 选择多个日期。 如果使用 Multiple ，日期选择器就会要求它的model是一个数组。
\n", + "Code": "您可以使用 OnPickerDateUpdate ，它是显示的月份/年份（取决于选择器类型和激活的视图），以便在其更改时执行某些操作。
\n", + "Code": "\r\n Month news (@_pickerDate.ToString(\"yyyy-MM\"))\r\n
\r\n \r\n Change month to see other news\r\n
\r\n - \r\n @foreach (var note in _notes)\r\n {\r\n
- \r\n @note\r\n \r\n }\r\n
日期选择器使用 Range 选择日期范围。 当使用 Range 日期选择器要求其model是长度为2的数组或空数组。
\n", + "Code": "可以添加 Readonly 来禁用选择新日期。
\n", + "Code": "默认情况下，当前日期是使用边框按钮显示的 - ShowCurrent 允许您删除边框或选择其他日期显示为当前日期。
\n", + "Code": "默认情况下，上个月和下个月的天数不可见。它们可以使用 ShowAdjacentMonths 属性显示。
\n", + "Code": "您可以指定选择器的宽度或使其全宽度。
\n", + "Code": "\r\n TODO...\r\n
",
+ "Type": "Demos.Components.Pickers.children.DatePickers.events.DateButtons",
+ "Style": "",
+ "Debug": false,
+ "Group": 1
+ },
+ {
+ "Order": 0,
+ "Name": "dateEvents",
+ "Title": "日期事件(TODO)",
+ "Description": "",
+ "Code": "\r\n TODO...\r\n
\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.DatePickers.events.DateEvents",
+ "Style": "",
+ "Debug": false,
+ "Group": 1
+ },
+ {
+ "Order": 0,
+ "Name": "activePicker",
+ "Title": "激活的选择器",
+ "Description": "您可以创建一个生日选择器-默认情况下从年份选择器开始，限制日期范围，并在选择日期后关闭选择器菜单，使之成为完美的生日选择器。
\n", + "Code": "\r\n \r\n \r\n \r\n \r\n _activePicker=val\"\r\n Max=\"DateOnly.FromDateTime(DateTime.Now)\"\r\n Min=\"new DateOnly(1950,1,1)\"> \r\n \r\n \r\n
\r\n\r\n @code {\r\n private DatePickerType _activePicker = DatePickerType.Year;\r\n private DateOnly _date = DateOnly.FromDateTime(DateTime.Now);\r\n private bool _menu;\r\n }\r\n",
+ "Type": "Demos.Components.Pickers.children.DatePickers.misc.ActivePicker",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 0,
+ "Name": "dialogAndMenu",
+ "Title": "对话框和菜单",
+ "Description": "Active picker:
\r\n @_activePicker 将选择器集成到 MTextField 中时，建议使用 Readonly。 这将防止手机键盘触发。 要节省垂直空间，还可以隐藏选择器标题。
拾取器公开一个允许您挂起保存和取消功能的插槽。 这将保持一个用户取消时可以替换的旧值。
\n", + "Code": "如果需要以自定义格式（不同于YYYY-MM-DD）显示日期，则需要使用格式化功能。
\n", + "Code": "Date in ISO format: @Date.ToString(\"yyyy-MM-dd\")
\r\nDate in ISO format: @Date.ToString(\"yyyy-MM-dd\")
\r\n也可以使用外部库（如Moment.js或date fns）格式化日期
\n", + "Code": "\r\n TODO...\r\n
\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.DatePickers.misc.FormattingWithExternalLibraries",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 0,
+ "Name": "internationalization",
+ "Title": "国际化(TODO)",
+ "Description": "日期选择器通过JavaScript日期对象支持国际化。使用区域设置道具指定BCP 47语言标记，然后使用每周第一天属性设置每周第一天。
\n", + "Code": "日期选择器有两种方向变化，纵向（默认）和横向。
\n", + "Code": "MDatePicker 可以用作一个独立的月份选择器组件。
- \n
- MDatePicker \n
MDatePicker 接受ISO 8601 日期 字符串(YYYY-MM-DD)。 有关 ISO 8601 和其他标准的更多信息，请访问 ISO（国际标准化组织） 国际标准 官方网页。
月份选择器有两种方向变化：纵向 (默认) 和横向。
\n", + "Code": "您可以使用数组、对象或函数指定允许的月份。
\n", + "Code": "可以使用 Color 和 HeaderColor 设置日期选择器颜色。 如果没有提供 HeaderColor, 头部将使用 Color 值。
\n", + "Code": "您可以覆盖选择器中使用的默认图标。
\n", + "Code": "日期选择器可以使用 Multiple 选择多个日期。 如果使用 Multiple ，日期选择器就会要求它的model是一个数组。
\n", + "Code": "可以添加 Readonly 来禁用选择新日期。
\n", + "Code": "默认情况下，当前日期是使用边框按钮显示的 - ShowCurrent 允许您删除边框或选择其他日期显示为当前日期。
\n", + "Code": "您可以指定选择器的宽度或使其全宽度。
\n", + "Code": "将选择器集成到 MTextField 中时，建议使用 Readonly。 这将防止手机键盘触发。 要节省垂直空间，还可以隐藏选择器标题。
拾取器公开一个允许您挂起保存和取消功能的插槽。 这将保持一个用户取消时可以替换的旧值。
\n", + "Code": "日期选择器通过JavaScript日期对象支持国际化。使用区域设置道具指定BCP 47语言标记，然后使用每周第一天属性设置每周第一天。
\n", + "Code": "日期选择器有两种方向变化，纵向（默认）和横向。
\n", + "Code": "MTimePicker 是独立的组件，可以用于许多现有的 MASA Blazor 组件。 它为用户提供了选择时间的视觉表现。
- \n
- MTimePicker \n
时间选择器默认情况下启用了浅色主题。
\n", + "Code": "您可以使用数组、对象和函数指定允许的时间。 您也可以指定时间步进/精度/间隔 - 例如10分钟。
\n", + "Code": "您可以移动 AM/PM 切换到选择器的标题。
\n", + "Code": "时间选择器颜色可以使用 Color 和 HeaderColor 属性设定。如果没有提供 HeaderColor 属性, 头部将使用 Color 属性值。
\n", + "Code": "您无法使用已禁用的选择器。
\n", + "Code": "通过设置 Elevation 从 0 到 24 来突出 MTimePicker 组件。 高度(z轴)将修改 box-shadow css 属性。
时间选择器可以切换为24小时格式。 请注意， Format 只定义选取器的显示方式，选取器的值 (model) 总是以24小时格式。
\n", + "Code": "您可以删除选择器的标题。
\n", + "Code": "这是一个用 Min 和 Max 合并选择器的例子。
\n", + "Code": "\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n@code {\r\n private TimeOnly? _start;\r\n private TimeOnly? _end;\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Pickers.children.TimePickers.props.Range",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 0,
+ "Name": "readonly",
+ "Title": "只读",
+ "Description": "Plan your event:
\r\nStart:@_start
\r\nEnd:@_end
\r\n只读选择器的行为与禁用的一样，但看起来像默认的。
\n", + "Code": "您可以使用鼠标滚轮编辑时间选择器的值。
\n", + "Code": "时间选择器可以输入秒数。
\n", + "Code": "您可以指定选择器的宽度或使其为全宽度。
\n", + "Code": "由于选择器的灵活性，您可以真正按照自己的意愿进行输入。
\n", + "Code": "提供一组响应式的操作按钮。
\n", + "Code": "@using Action = MASA.Blazor.Presets.Action\r\n\r\n \r\n \r\n
\r\n\r\n\r\n \r\n \r\n
\r\n\r\n提供标准类型的确认对话框。
\n", + "Code": "@using AlertTypes = BlazorComponent.AlertTypes\r\n\r\n\r\n Show()\">Default \r\n Show(AlertTypes.Success)\">Success \r\n Show(AlertTypes.Info)\">Info \r\n Show(AlertTypes.Warning)\">Warning \r\n Show(AlertTypes.Error)\">Error \r\n
\r\n\r\n将表单和Modal结合，验证数据正确性。
\r\n _addModal.Show()\" Class=\"mb-1\">Add User \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n r\"\r\n ItemText=\"r => r\"\r\n HideDetails=\"@(\"auto\")\">\r\n \r\n \r\n \r\n \r\n @JsonSerializer.Serialize(_addModal.Data) \r\n \r\n \r\n\r\n \r\n username: @_user?.UserName \r\n city: @_user?.City \r\n gender: @_user?.Gender \r\n favorites: @string.Join(\",\", _user?.Favorites ?? new List()) \r\n \r\n _addModal.Show(_user?.ShallowCopy()))\"\r\n Color=\"primary\"\r\n Disabled=\"@(_user == null)\"\r\n Text\r\n Small>\r\n Edit\r\n \r\n \r\n \r\n
\r\n\r\n@code {\r\n readonly List需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。
\r\n _addModal.Show()\" Class=\"mb-1\">Add User \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n r\"\r\n ItemText=\"r => r\"\r\n HideDetails=\"true\">\r\n \r\n \r\n \r\n r\"\r\n ItemText=\"r => r\"\r\n HideDetails=\"true\">\r\n \r\n \r\n \r\n \r\n @JsonSerializer.Serialize(_addModal.Data) \r\n \r\n \r\n\r\n \r\n username: @_user?.UserName \r\n city: @_user?.City \r\n gender: @_user?.Gender \r\n friends: @string.Join(\",\", _user?.Friends ?? new List()) \r\n favorites: @string.Join(\",\", _user?.Favorites ?? new List()) \r\n \r\n _addModal.Show(_user?.ShallowCopy())\"\r\n Color=\"primary\"\r\n Disabled=\"@(_user == null)\"\r\n Text\r\n Small>\r\n Edit\r\n \r\n \r\n \r\n
\r\n\r\n@code {\r\n readonly List一个比较通用的页头，包括了标题，副标题，操作按钮和搜索栏。
\n", + "Code": "因为MList，MListGroup，MListItem和MListItemGroup这些组件的联系比较松散，无法通过一个给定的值来达到 MListGroup 自动展开的效果。因此做了一个这样的组件。
In its simplest form, v-progress-circular displays a circular progress bar. Use the value prop to control the progress.
\n", + "Code": "\r\n
\r\n\r\n",
+ "Type": "Demos.Components.Progress.children.ProgressCircular.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 1,
+ "Name": "color",
+ "Title": "颜色",
+ "Description": "可以使用 Color 属性为 MProgressCircular 设置其他颜色。
\r\n\t
\r\n\r\n",
+ "Type": "Demos.Components.Progress.children.ProgressCircular.props.Color",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 2,
+ "Name": "indeterminate",
+ "Title": "不定线条",
+ "Description": "使用 Indeterminate 属性，MProgressCircular 将会一直处于动画中。
\n", + "Code": "\r\n\t
\r\n\r\n",
+ "Type": "Demos.Components.Progress.children.ProgressCircular.props.Indeterminate",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 3,
+ "Name": "rotate",
+ "Title": "旋转",
+ "Description": "Rotate 参数使您能够自定义 MProgressCircular 的原点。
\n", + "Code": "@using System.Timers;\r\n@using Timer = System.Timers.Timer;\r\n\r\n\r\n\t@_value \r\n\t@_value \r\n\t@_value \r\n\t@_value \r\n
\r\n\r\n@code\r\n{\r\n private StringNumber _value = 0;\r\n protected Timer Timer { get; set; }\r\n protected override void OnInitialized()\r\n {\r\n if (Timer == null)\r\n {\r\n Timer = new Timer\r\n {\r\n Interval = 1000\r\n };\r\n Timer.Elapsed += Timer_Elapsed;\r\n Timer.Start();\r\n }\r\n }\r\n \r\n private async void Timer_Elapsed(object sender, ElapsedEventArgs e)\r\n {\r\n await InvokeAsync(() =>\r\n {\r\n var value = _value.ToInt32();\r\n if (value >= 100)\r\n {\r\n Timer.Stop();\r\n _value = 0;\r\n Timer.Start();\r\n }\r\n else\r\n {\r\n _value = value + 10;\r\n }\r\n \r\n StateHasChanged();\r\n });\r\n }\r\n}\r\n\r\n",
+ "Type": "Demos.Components.Progress.children.ProgressCircular.props.Rotate",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 4,
+ "Name": "sizeorwidth",
+ "Title": "大小和宽度",
+ "Description": "Size 和 Width 属性允许您轻松修改 MProgressCircular 组件的大小和宽度。
\n", + "Code": "\r\n\t
\r\n\r\n",
+ "Type": "Demos.Components.Progress.children.ProgressCircular.props.SizeOrWidth",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cols": 1,
+ "Related": [
+ "/components/cards",
+ "/components/progress-linear",
+ "/components/lists"
+ ],
+ "Subtitle": "进度环",
+ "Title": "Progress circular",
+ "Type": "进度环"
+ },
+ {
+ "Desc": "该组件用于将数据环传递给用户。 也可以将其置于不确定状态来描述加载。
\n", + "Order": 0, + "OtherDocs": { + "API": "\n- \n
- MProgressLinear \n
最简单的形式， MProgressLinear 显示一个水平进度条。使用 Value 属性来控制进度。
缓冲状态同时表示两个值。 主值由 @bind-Value 控制，而缓冲值则由 BufferValue 属性控制。
\n", + "Code": "@using System.Timers;\r\n@using Timer = System.Timers.Timer;\r\n\r\n您可以使用 Color 和 BackgroundColor 属性设置颜色。
\n", + "Code": "使用 Indeterminate 属性，MProgressLinear 会保持动画状态。
当 Query 设置为 true 时，Query 属性值由不确定的真实性控制。
使用 Reverse 属性显示反转的进度条(LTR模式为从右到左，RTL模式为从左到右)。
\n", + "Code": "\r\n
Rounded 属性是另一种样式，它为 MProgressLinear 组件添加了圆角。
Stream 属性可以使用 BufferValue 向用户表示正在进行一些操作。 您可以使用 BufferValue 和 Value 的任何组合来实现您的设计。
\n", + "Code": "使用 Striped 属性对 MProgressLinear 的值部分应用条纹背景。
MProgressLinear 组件将在使用 @bind-Value 时响应用户输入。 您可以使用默认插槽或绑定本地model在进度内显示。 如果您在寻找线性组件上的高级功能，请查看 MSlider。
进度条组件有一个由 @bind-Value 修改的确定状态。
\n", + "Code": "MProgressLinear 组件有助于向用户解释他们正在等待响应。
使用 Absolute 属性，我们可以将 MProgressLinear 组件定位在 MToolbar 的底部。 我们还使用了 Active 属性来控制进度条的可见性。
评级组件是构建用户小部件的一个特殊但至关重要的部分。 通过评级收集用户反馈是一种简单的分析工具，可以为您的产品或应用程序提供大量反馈。
\n", + "Order": 0, + "OtherDocs": { + "API": "\n- \n
- MRating \n
MRating 组件可以根据您的需要进行着色，您可以设置选定和未选定的颜色。
\r\n
\r\n\r\n@code\r\n{\r\n private double _rating = 4;\r\n}",
+ "Type": "Demos.Components.Rating.props.Color",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 5,
+ "Name": "iconLabel",
+ "Title": "图标标签",
+ "Description": "为图标的提供标签。
\n", + "Code": "\r\n
\r\n\r\n@code\r\n{\r\n private double _rating = 4;\r\n}",
+ "Type": "Demos.Components.Rating.props.IconLabel",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 3,
+ "Name": "incremented",
+ "Title": "增量",
+ "Description": "MRating 有3个定义的图标，全图标、半图标和空图标。
\r\n
\r\n 可以使用 MSilder 组件轻松更改 MRating 组件的长度。
\r\n
\r\n\r\n@code {\r\n private double _rating = 2;\r\n private double _length = 5;\r\n}",
+ "Type": "Demos.Components.Rating.props.Length",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 4,
+ "Name": "size",
+ "Title": "尺寸",
+ "Description": "\r\n model:\r\n @_rating\r\n
\r\n使用 MButton 中提供的相同尺寸等级，或提供您自己的Size属性。
\r\n
\r\n\r\n@code\r\n{\r\n private double _rating = 4;\r\n}",
+ "Type": "Demos.Components.Rating.props.Size",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 6,
+ "Name": "itemContent",
+ "Title": "ItemContent",
+ "Description": "提供插槽是为了让您在显示评级的方式上有更多的自由。
\n", + "Code": "\r\n \r\n \r\n \r\n \r\n @(props.IsFilled ? \"mdi-star-circle\" : \"mdi-star-circle-outline\")\r\n \r\n \r\n \r\n \r\n
\r\n\r\n@code\r\n{\r\n private static double _rating = 4.5;\r\n private string[] _colors = new string[5] { \"green\", \"purple\", \"orange\", \"indigo\", \"red\" };\r\n private ListMRating 组件可与现有组件相匹配。 用丰富的功能和漂亮的设计构建复杂的例子。
\r\n FORTNITE\r\n
\r\n \r\n Video game\r\n
\r\n \r\n Portions of the materials used are trademarks and/or copyrighted works of Epic Games, Inc. All rights reserved by Epic. This material is not official and is not endorsed by Epic.\r\n
\r\nMRating 组件与产品搭配良好，使你能够收集和显示客户反馈。
\r\n
\r\n Halycon Days
\r\n Ellie Goulding
\r\n (2013)
\r\n MSheet 组件是许多组件的基础，如 MCard, MToolbar等等。 可用属性是Material Design的基础 - 纸和立面（阴影）的概念。
- \n
- MSheet \n
纸张和基于它们的部件可以有不同的尺寸和颜色。
\nMSheet 组件接受自定义Material Design Color值，例如 warning、amber darken-3\n和 deep-purple accent，以及 rgb、rgba和十六进制值。
MSheet 组件接受一个介于 0(默认值) 至 24 之间的自定义高度(z轴)。 elevation 属性修改 box-shadow 属性。 更多信息位于\nMD Elevation Design Specification。
Rounded 增加了默认 4px 的 border-radius。 默认情况下， MSheet 组件没有边框半径。 通过提供自定义的圆角值来定义半径的大小和位置；例如，圆角值 tr-xl l-pill 等于\nrounded-tr-xl rounded-l-pill。 关于圆角样式的其他信息在 Border Radius 页。
MSkeletonLoader 组件是一个多功能工具，可以在一个项目中填充许多角色。 在其核心部分，该组件向用户提供了一个指示，指出某些东西即将出现但尚未可用。 有超过30个预先定义的选项，可以组合成定制的示例。
- \n
- MSkeletonLoader \n
MSkeletonLoader 组件为用户提供了一个内容即将到来/加载的视觉指示器。 这比传统的全屏加载器要好。
MSkeletonLoader可以在创建实体模型时用作样板设计。 混合和匹配各种预定义的选项或创建您自己独特的实现。 在此示例中，我们使用自定义 data 属性来将相同的属性一次应用到多个 MSkeletonLoader。
\n", + "Code": "MSnackbar 组件用于向用户显示快速消息。 Snackbars 支持定位、移除延迟和回调。
\n", + "Order": 0, + "OtherDocs": { + "API": "\n- \n
- MSnackbar \n
MSnackbar 以最简单的形式向用户显示一个临时且可关闭的通知。
\r\n \r\n Open Snackbar\r\n \r\n \r\n \r\n Hello, I'm a snackbar\r\n \r\n \r\n \r\n Close\r\n \r\n \r\n \r\n
\r\n\r\n@code{\r\n private bool _show;\r\n\r\n public void Show()\r\n {\r\n _show = true;\r\n }\r\n\r\n public void Close()\r\n {\r\n _show = false;\r\n }\r\n}\r\n",
+ "Type": "Demos.Components.Snackbar.usage.Index",
+ "Style": "",
+ "Debug": false,
+ "Group": 4
+ },
+ {
+ "Order": 1,
+ "Name": "multiLine",
+ "Title": "多行",
+ "Description": "MultiLine 属性扩展了 MSnackbar 的高度，让您有更多的内容空间。
\r\n \r\n Open Snackbar\r\n \r\n\r\n \r\n \r\n Hello, I'm a snackbar\r\n \r\n \r\n _show = false\">\r\n Close\r\n \r\n \r\n \r\n
\r\n\r\n@code{\r\n private bool _show;\r\n\r\n public void Show()\r\n {\r\n _show = true;\r\n }\r\n}\r\n",
+ "Type": "Demos.Components.Snackbar.props.MultiLine",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "timeout",
+ "Title": "超时",
+ "Description": "Timeout 属性允许您自定义 MSnackbar 隐藏之前的延迟。
\r\n _snackbar = true\">\r\n Open Snackbar\r\n \r\n\r\n \r\n \r\n My timeout is set to 2000.\r\n \r\n \r\n _snackbar = false\">\r\n Close\r\n \r\n \r\n \r\n
\r\n\r\n@code{\r\n private bool _snackbar;\r\n}\r\n",
+ "Type": "Demos.Components.Snackbar.props.Timeout",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 1,
+ "Name": "variants",
+ "Title": "变体",
+ "Description": "使用 Text, Shaped, Outlined 等属性将不同样式应用于 MSnackbar。
Vertical 属性允许您堆叠 MSnackbar 的内容。
\r\n _snackbar = true\">\r\n Open Snackbar\r\n \r\n\r\n \r\n \r\n Lorem ipsum dolor sit amet\r\n \r\n \r\n _snackbar = false\">\r\n Close\r\n \r\n \r\n \r\n
\r\n\r\n@code{\r\n private bool _snackbar;\r\n}\r\n",
+ "Type": "Demos.Components.Snackbar.props.Vertical",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ }
+ ],
+ "Children": [],
+ "Category": "Components",
+ "Cols": 1,
+ "Related": [
+ "/components/buttons",
+ "/styles/colors",
+ "/components/forms"
+ ],
+ "Subtitle": "消息条",
+ "Title": "Snackbars",
+ "Type": "消息条"
+ },
+ {
+ "Desc": "MStepper 组件通过数字步骤显示进度。
一个步骤组件适用于多种场景，包括购物车、创建记录等等。
\n", + "Code": "步骤组件也有一个放置在步骤下方的备用标签样式。
\n", + "Code": "\r\n \r\n \r\n \r\n Ad unit details\r\n \r\n\r\n \r\n Ad sizes\r\n \r\n\r\n \r\n Ad templates\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Ad unit details\r\n \r\n\r\n \r\n Ad sizes\r\n Optional\r\n \r\n\r\n \r\n Ad templates\r\n \r\n \r\n \r\n
\r\n\r\n",
+ "Type": "Demos.Components.Stepper.props.AlternateLabel",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 2,
+ "Name": "nonLinear",
+ "Title": "非线性的步骤条",
+ "Description": "NonLinear 步骤可以让用户按照自己选择路线在流程中移动。
\n", + "Code": "\r\n \r\n \r\n \r\n Select campaign settings\r\n \r\n\r\n \r\n Create an ad group\r\n \r\n\r\n \r\n Create an ad\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Select campaign settings\r\n \r\n\r\n \r\n Create an ad group\r\n \r\n\r\n \r\n Create an ad\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Select campaign settings\r\n \r\n\r\n \r\n Create an ad group\r\n \r\n\r\n \r\n Create an ad\r\n \r\n \r\n \r\n
\r\n",
+ "Type": "Demos.Components.Stepper.props.NonLinear",
+ "Style": "",
+ "Debug": false,
+ "Group": 0
+ },
+ {
+ "Order": 3,
+ "Name": "vertical",
+ "Title": "垂直",
+ "Description": "水平步骤线通过定义的步骤将用户沿Y轴移动。其他地方与水平方向的一致。
\n", + "Code": "错误状态同样可以应用于备用标签样式的显示。
\n", + "Code": "步骤条可以动态地添加或移除他们的步骤。 如果删除了一个当前激活的步骤，请务必通过更改应用model来说明这一点。
\n", + "Code": "\r\n \r\n \r\n v\"\r\n ItemText=\"v=>v.ToString()\"\r\n Label=\"# of steps\"> \r\n \r\n \r\n \r\n \r\n\r\n @for (var n = 1; n <= Steps; n++)\r\n {\r\n var i = n;\r\n i\"\r\n Step=\"i\"\r\n Editable>\r\n Step @i\r\n \r\n\r\n @if (i != Steps)\r\n {\r\n \r\n\r\n \r\n @for (var n = 1; n <= Steps; n++)\r\n {\r\n var i = n;\r\n \r\n \r\n \r\n\r\n NextStep(i)\">\r\n Continue\r\n \r\n\r\n \r\n Cancel\r\n \r\n \r\n }\r\n \r\n \r\n
\r\n\r\n@code {\r\n private List用户随时可以选择可编辑的步骤并将跳转到该步。
\n", + "Code": "可以显示错误状态来通知用户必须采取的一些行动。
\n", + "Code": "水平步骤线通过定义的步骤将用户沿 x轴 移动。
\n", + "Code": "线性步骤始终沿着你定义的路径移动。
\n", + "Code": "\r\n \r\n \r\n \r\n Select campaign settings\r\n \r\n\r\n \r\n Create an ad group\r\n \r\n\r\n \r\n Create an ad\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Select campaign settings\r\n \r\n\r\n \r\n Create an ad group\r\n \r\n\r\n \r\n Create an ad\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Select campaign settings\r\n \r\n\r\n \r\n Create an ad group\r\n \r\n\r\n \r\n Create an ad\r\n \r\n \r\n \r\n
\r\n",
+ "Type": "Demos.Components.Stepper.misc.LinearSteppers",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 10,
+ "Name": "nonEditableSteps",
+ "Title": "不可编辑步骤",
+ "Description": "不可编辑步骤（Non-editable steps）强制用户在整个流程中进行线性处理。
\n", + "Code": "可选步骤可由子文本调出。
\n", + "Code": "\r\n \r\n \r\n \r\n Select campaign settings\r\n \r\n\r\n \r\n Create an ad group\r\n Optional\r\n \r\n\r\n \r\n Create an ad\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Select campaign settings\r\n \r\n\r\n \r\n Create an ad group\r\n Optional\r\n \r\n\r\n \r\n Create an ad\r\n \r\n \r\n \r\n
\r\n",
+ "Type": "Demos.Components.Stepper.misc.OptionalSteps",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 12,
+ "Name": "verticalErrors",
+ "Title": "垂直错误",
+ "Description": "同样的，错误状态也可以应用于垂直的步骤。
\n", + "Code": "用于分隔列表的各个部分。
\n", + "Order": 0, + "OtherDocs": { + "API": "\n- \n
- MSubheader \n
最简单形式的副标题显示带有默认主题的副标题。
\n", + "Code": "Inset 的副标题向右移动72像素。 这使您可以选择将它们与列表项和插入分隔符对齐。
\n", + "Code": "一个副标题可以添加到上下文中，对用户正在看的东西起到分类等作用。
\n", + "Code": "使用副标题可以帮助分离不同类型的操作。
\n", + "Code": "在社交媒体互动中使用子标题。
\n", + "Code": "MDataIterator 组件用于显示数据，并且与 MDataTable 组件共享其大部分功能。 功能包括排序、搜索、分页和选择。
- \n
- MDataIterator \n
MDataIterator 的内部具有选择和扩展状态，就像 MDataTable 一样。 在这个示例中，我们在默认插槽上使用使用 isExpanded 和 expand 。
@item.Name
\r\nMDataIterator 有用于添加额外内容的 HeaderContent 和 FooterContent 插槽。
排序，过滤和分页可以从外部使用单独的属性进行控制。
\n", + "Code": "MDataTable 组件用于显示表格数据。 功能包括排序，搜索，分页，内容编辑和行选择。
- \n
- MDataTable \n
标准数据表格默认会将数据呈现为简单的行。
\n", + "Code": "你可以向 CustomFilter 属性提供一个函数，覆盖 Search 属性的默认过滤。 如果你需要自定义特定列的过滤，你可以给表头数据项的 Filter 属性提供一个函数。\n类型是Func<object, string, TItem, bool>。 即使没有提供 Search 属性，这个函数也会一直运作。 因此，你需要确保在不应用过滤器的情况下，函数会返回 true。
\r\n r.Name\"\r\n Class=\"elevation-1\"\r\n Search=\"@_search\"\r\n CustomItemFilter=\"FilterOnlyCapsText\">\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n\r\n public int Sodium { get; set; }\r\n\r\n public string Calcium { get; set; }\r\n\r\n public string Iron { get; set; }\r\n }\r\n\r\n private string _search;\r\n private string _calories;\r\n\r\n public List使用 Dense 属性，可以让数据表格表现为另一种样式。
\n", + "Code": "在搜索表格内容时，你可以设置表头数据项的 Filterable 属性为 false，禁止对应列的内容被包含在搜索结果内。 下面的示例中，不会被搜索到 Dessert 列的内容。
\n", + "Code": "默认固定最后一列。
\n", + "Code": "MDataTable 使用 MDataFooter 组件渲染一个默认的表脚。 你可以使用 FooterProps 将属性传递给这个组件。
你可以使用 GroupBy 和 GroupDesc 属性分组。 ShowGroupBy 属性将在默认表头中显示分组按钮。 你可以设置表头数据项的 Groupable 属性为 false ，禁用对应属性的分组。
\n", + "Code": "你可以应用 HideDefaultHeader 和 HideDefaultFooter 属性，分别移除默认表头和表脚。
\n", + "Code": "你可以使用 Loading 属性来表示正在加载表格数据。 即使表格中没有数据，也会显示一条加载信息。 加载信息可以使用 LoadingText 属性或 LoadingContent 插槽来自定义。
\n", + "Code": "使用 MultiSort 属性可以根据多列同时排序。 启用后，你可以向 SortBy 和 SortDesc 传递数组以控制排序。
\n", + "Code": "ShowSelect 属性将在默认表头中渲染一个复选框以切换所有行是否被选择，同时也为每个默认行渲染一个复选框。你还可以使用 SingleSelect 属性，指定能同时选择多行还是只能选择一行。
\n", + "Code": "数据表格还提供了 Search 属性以过滤数据。
\n", + "Code": "明暗相间的条纹。
\n", + "Code": "你可以使用插槽 HeaderColContent 来自定义某些列。
\n", + "Code": "你可以使用动态插槽 ItemColContent 来自定义某些列。
\n", + "Code": "如果想要在数据表格的插槽模板中使用复选框，请使用 MSimpleCheckbox 组件，而不是 MCheckbox 组件。 MSimplleChecbox 组件被内部使用，跟随表头对齐方式。
\r\n \r\n \r\n @if (context.Header.Value == nameof(Dessert.Glutenfree))\r\n {\r\n \r\n \r\n
\r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n\r\n public string Iron { get; set; }\r\n\r\n public bool Glutenfree { get; set; }\r\n }\r\n\r\n private List带 CRUD 操作的 MDataTable 使用 MDialog 组件来编辑每行数据。
MEditDialog 组件可用于直接在 MDataTable 中编辑数据。 如果点击 MEditDialog 外部时不想关闭对话框，可以添加 Persistent 属性。
\r\n Todo...\r\n
",
+ "Type": "Demos.Components.Tables.children.DataTable.misc.EditDialog",
+ "Style": "",
+ "Debug": false,
+ "Group": 3
+ },
+ {
+ "Order": 3,
+ "Name": "expandableRow",
+ "Title": "可展开行",
+ "Description": "ShowExpand 属性会在每个默认行上渲染一个展开图标。 你可以使用 ItemDataTableExpandContent 插槽来自定义。 添加一列 Value="data-table-expand" 到 **\nHeaders**\n数组，就能自定义这个插槽的位置。 你还可以使用 SingleExpand 属性，指定能同时展开多行还是只能展开一行。 行需要唯一的Key才能进行展开，使用ItemKey进行指定。
要在外部控制分页，可以使用单独的属性或使用 Options 属性。
\n", + "Code": "\r\n _pageCount=val\"\r\n Class=\"elevation-1\">\r\n \r\n
\r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n\r\n public string Iron { get; set; }\r\n }\r\n\r\n private List\r\n
\r\n要在外部控制排序，可以使用单独的属性或使用 Options 属性。
\n", + "Code": "\r\n \r\n \r\n
\r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n\r\n public string Iron { get; set; }\r\n }\r\n\r\n private List\r\n \r\n Toggle sort order\r\n \r\n \r\n Sort next column\r\n \r\n
\r\n如果你正在从后端服务器加载已经分页和排序的数据，你可以使用 ServerItemsLength 属性。 使用这个属性会禁用内置的排序和分页，因此，你需要用特定事件（OnPageUpdate，**\nOnSortByUpdate**，OnOptionsUpdate 等）来得知什么时候要向后端服务器请求新页面。 获取数据时，使用 Loading 属性显示进度条。
\n", + "Code": "\r\n \r\n \r\n
\r\n\r\n@code {\r\n public class Dessert\r\n {\r\n public string Name { get; set; }\r\n\r\n public int Calories { get; set; }\r\n\r\n public double Fat { get; set; }\r\n\r\n public int Carbs { get; set; }\r\n\r\n public double Protein { get; set; }\r\n\r\n public int Sodium { get; set; }\r\n\r\n public string Calcium { get; set; }\r\n\r\n public string Iron { get; set; }\r\n }\r\n\r\n private int _totalDesserts = 0;\r\n private IEnumerableMSimpleTable组件是 table 元素的简单封装组件。 在组件中，你可以使用所有常规表元素，如 thead ， tbody ，tr 等。
\n", + "Order": 0, + "OtherDocs": { + "API": "\n- \n
- MSimpleTable \n
简单表格组件是 <table> 元素的封装组件。
使用 Dark 属性把表格切换到暗色主题。
你可以使用 Dense 属性来显示紧凑表格。
\n", + "Code": "使用 FixedHeader 属性和 Height 属性，将表头固定在表格的顶部。
\n", + "Code": "使用 Height 属性设置表格的高度。
\n", + "Code": "MTabs 组件用于将内容隐藏在可选择的项目后面。 这也可以用作页面的伪导航，其中选项卡是链接，选项卡项是内容。
- \n
- MTabs \n
- MTab \n
- MTabItem \n
- MTabsItems \n
- MTabsSlider \n
当使用 Dark 属性和 不 提供自定义 Color 时，MTabs组件会将其颜色默认为 white。
MTabs 组件是 MItemGroup 的样式扩展。 它提供了一个易于使用的接口来组织内容组。
使用 AlignWithTitle 属性将 MTabs MToolbarTitle 对齐（MAppBarNavIcon 或 MButton 必须在 MToolbar 中使用)。
CenterActive 属性将使活动标签始终居中。
\n", + "Code": "PrevIcon 和 NextIcon 可以用于应用自定义分页图标。
\n", + "Code": "FixedTabs 属性迫使 MTab 占用所有可用的空间，直到最大宽度(300px)。
Grow 属性将使选项卡项目占用所有可用的空间，最大宽度为300px。
\n", + "Code": "BASiL
\r\n使用 IconsWithText 属性将 MTabs 的高度增加到72px，以便图标和文本都能被使用。