{"id":1534,"date":"2021-08-03T03:26:00","date_gmt":"2021-08-02T18:26:00","guid":{"rendered":"http:\/\/www.agile-software.site\/?p=1534"},"modified":"2023-07-17T10:01:03","modified_gmt":"2023-07-17T01:01:03","slug":"materialui","status":"publish","type":"post","link":"https:\/\/agile-software.net\/?p=1534","title":{"rendered":"MaterialUI"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u30e9\u30a4\u30d6\u30e9\u30ea<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&nbsp;@material-ui\/core<\/li>\n\n\n\n<li><code>@material-ui\/icons<\/code>\uff1aSVG \u30a2\u30a4\u30b3\u30f3\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u96c6<\/li>\n\n\n\n<li><code>@material-ui\/lab<\/code>\uff1a\u30c8\u30b0\u30eb\u30dc\u30bf\u30f3\u306a\u3069\u3001core \u306b\u306f\u306a\u3044\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u96c6<\/li>\n\n\n\n<li><code>@material-ui\/pickers<\/code>\uff1aDate Picker \u7684\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u96c6<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">DATA DISPLAY<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Avatar<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Badge<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Chip<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Divider<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Icons<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Material Icons<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">List<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Table<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Tooltip<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Typography<\/h3>\n\n\n\n<p>variant\u3067\u6587\u5b57\u306e\u5927\u304d\u3055\u3092\u8abf\u6574\u3057\u307e\u3059<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>h1<\/li>\n\n\n\n<li>h2<\/li>\n\n\n\n<li>h3<\/li>\n\n\n\n<li>h4<\/li>\n\n\n\n<li>h5<\/li>\n\n\n\n<li>h6<\/li>\n\n\n\n<li>subtitle1<\/li>\n\n\n\n<li>subtitle2<\/li>\n\n\n\n<li>body1<\/li>\n\n\n\n<li>body2<\/li>\n<\/ul>\n\n\n\n<p><br>component\u306f<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-plain\"><code> &lt;div className={classes.root}&gt; \n      &lt;Typography variant=&quot;h1&quot; component=&quot;h2&quot; gutterBottom&gt; \n        h1. Heading \n      &lt;\/Typography&gt; \n      &lt;Typography variant=&quot;h2&quot; gutterBottom&gt; \n        h2. Heading \n      &lt;\/Typography&gt; \n      &lt;Typography variant=&quot;h3&quot; gutterBottom&gt; \n        h3. Heading \n      &lt;\/Typography&gt; \n      &lt;Typography variant=&quot;h4&quot; gutterBottom&gt; \n        h4. Heading \n      &lt;\/Typography&gt; \n      &lt;Typography variant=&quot;h5&quot; gutterBottom&gt; \n        h5. Heading \n      &lt;\/Typography&gt; \n      &lt;Typography variant=&quot;h6&quot; gutterBottom&gt; \n        h6. Heading \n      &lt;\/Typography&gt; \n      &lt;Typography variant=&quot;subtitle1&quot; gutterBottom&gt; \n        subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur \n      &lt;\/Typography&gt; \n      &lt;Typography variant=&quot;subtitle2&quot; gutterBottom&gt; \n        subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur \n      &lt;\/Typography&gt; \n      &lt;Typography variant=&quot;body1&quot; gutterBottom&gt; \n        body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur \n        unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam \n        dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam. \n      &lt;\/Typography&gt; \n      &lt;Typography variant=&quot;body2&quot; gutterBottom&gt; \n        body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur \n        unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam \n        dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam. \n      &lt;\/Typography&gt; \n      &lt;Typography variant=&quot;button&quot; display=&quot;block&quot; gutterBottom&gt; \n        button text \n      &lt;\/Typography&gt; \n      &lt;Typography variant=&quot;caption&quot; display=&quot;block&quot; gutterBottom&gt; \n        caption text \n      &lt;\/Typography&gt; \n      &lt;Typography variant=&quot;overline&quot; display=&quot;block&quot; gutterBottom&gt; \n        overline text \n      &lt;\/Typography&gt; \n    &lt;\/div&gt;<\/code><\/pre><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"817\" height=\"851\" src=\"https:\/\/www.agile-software.site\/wp-content\/uploads\/2023\/01\/typography.png\" alt=\"\" class=\"wp-image-2457\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">FEEDBACK<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Alert<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Backdrop<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Dialog<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Progress<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Skeleton<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Snackbar<\/h3>\n\n\n\n<h2 class=\"wp-block-heading\">SURFACES<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Accordion<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">App Bar<\/h3>\n\n\n\n<p>position\u306b\u306fstatic\u306e\u307b\u304b\u306bsticky<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"769\" height=\"74\" src=\"https:\/\/www.agile-software.site\/wp-content\/uploads\/2023\/01\/appbar.png\" alt=\"\" class=\"wp-image-2510\"\/><\/figure>\n<\/div>\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-plain\"><code> &lt;AppBar position=&quot;static&quot;&gt;\n        &lt;Toolbar&gt;\n          &lt;IconButton\n            size=&quot;large&quot;\n            edge=&quot;start&quot;\n            color=&quot;inherit&quot;\n            aria-label=&quot;menu&quot;\n            sx={{ mr: 2 }}\n          &gt;\n            &lt;MenuIcon \/&gt;\n          &lt;\/IconButton&gt;\n          &lt;Typography variant=&quot;h6&quot; component=&quot;div&quot; sx={{ flexGrow: 1 }}&gt;\n            News\n          &lt;\/Typography&gt;\n          &lt;Button color=&quot;inherit&quot;&gt;Login&lt;\/Button&gt;\n        &lt;\/Toolbar&gt;\n      &lt;\/AppBar&gt;<\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Card<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Paper<\/h3>\n\n\n\n<p>elevation\u3067\u9ad8\u3055\u3092\u8abf\u6574\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3002<\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">NAVIGATION<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Bottom Navaigation<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Breadcrumbs<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Drawer<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Link<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Menu<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Pagination<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Speed Dial<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Speed Dial<\/h3>\n\n\n\n<h2 class=\"wp-block-heading\">LAYOUT<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Box<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Container<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Grid<\/h3>\n\n\n\n<p>xs\u306e\u3068\u304d\u306f\u30ab\u30e9\u30e0\u304c12\u500b\u3042\u308b\u3002sm\u306e\u3068\u304d\u306f6\u500b<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">spacing<\/h4>\n\n\n\n<p>spacing\u3067\u30ab\u30e9\u30e0\u306e\u9593\u9694\u3092\u8abf\u6574\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-plain\"><code>\n&lt;Grid container spacing={2}&gt;<\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Stack<\/h3>\n\n\n\n<p>Stack\u306f\u7e26\u30fb\u6a2a\u306b\u8981\u7d20\u3092\u4e26\u3079\u3089\u308c\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Image List<\/h3>\n\n\n\n<h2 class=\"wp-block-heading\">AutoComplete<\/h2>\n\n\n\n<p>AutoComplete \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3001\u30c6\u30ad\u30b9\u30c8\u30d5\u30a3\u30fc\u30eb\u30c9\u306b\u5165\u529b\u3055\u308c\u305f\u5024\u304b\u3089\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u9078\u629e\u80a2\u3092\u7d5e\u308a\u8fbc\u3093\u3067\u9078\u629e\u3067\u304d\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u30e9\u30a4\u30d6\u30e9\u30ea DATA DISPLAY Avatar Badge Chip Divider Icons Material Icons List Table Tooltip Typography variant\u3067\u6587\u5b57\u306e\u5927\u304d\u3055<\/p>\n","protected":false},"author":1,"featured_media":1539,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jin_ogp_image_url":"","_jin_last_featured_id":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1534","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1534"}],"version-history":[{"count":6,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1534\/revisions"}],"predecessor-version":[{"id":2597,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1534\/revisions\/2597"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/media\/1539"}],"wp:attachment":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}