mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-17 11:49:41 +08:00
2131 lines
100 KiB
JavaScript
2131 lines
100 KiB
JavaScript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[150],{
|
|
|
|
/***/ 424:
|
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
|
|
"use strict";
|
|
// ESM COMPAT FLAG
|
|
__webpack_require__.r(__webpack_exports__);
|
|
|
|
// EXTERNAL MODULE: ./node_modules/vue/dist/vue.esm-browser.js
|
|
var vue_esm_browser = __webpack_require__(0);
|
|
|
|
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist/templateLoader.js??ref--6!./node_modules/vue-loader/dist??ref--2-0!./website/md-loader!./website/docs/jp/layout.md?vue&type=template&id=242ff14d
|
|
|
|
var layoutvue_type_template_id_242ff14d_hoisted_1 = {
|
|
class: "content element-doc"
|
|
};
|
|
|
|
var layoutvue_type_template_id_242ff14d_hoisted_2 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h2", {
|
|
id: "reiauto"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#reiauto"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" レイアウト")], -1);
|
|
|
|
var layoutvue_type_template_id_242ff14d_hoisted_3 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "24カラムを基本レイアウトで、簡単、素早く作れます。", -1);
|
|
|
|
var layoutvue_type_template_id_242ff14d_hoisted_4 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "besitukureiauto"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#besitukureiauto"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" ベーシックレイアウト")], -1);
|
|
|
|
var layoutvue_type_template_id_242ff14d_hoisted_5 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "カラムを用いて、ベーシックグリッドレイアウトを作ります。", -1);
|
|
|
|
var layoutvue_type_template_id_242ff14d_hoisted_6 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "row"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" と "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "col"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" を使えば、"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "span"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 属性を使って簡単にレイアウトを操作することができます。")])], -1);
|
|
|
|
var layoutvue_type_template_id_242ff14d_hoisted_7 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<el-row>\n <el-col :span=\"24\"><div class=\"grid-content bg-purple-dark\"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span=\"12\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"12\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"8\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n")], -1);
|
|
|
|
var layoutvue_type_template_id_242ff14d_hoisted_8 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "karamu-jian-ge"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#karamu-jian-ge"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" カラム間隔")], -1);
|
|
|
|
var layoutvue_type_template_id_242ff14d_hoisted_9 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "カラム間隔もサポートされてます。", -1);
|
|
|
|
var layoutvue_type_template_id_242ff14d_hoisted_10 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("行にはカラム間の間隔を指定するための "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "gutter"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 属性があり、デフォルト値は0です。")])], -1);
|
|
|
|
var layoutvue_type_template_id_242ff14d_hoisted_11 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<el-row :gutter=\"20\">\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n")], -1);
|
|
|
|
var layoutvue_type_template_id_242ff14d_hoisted_12 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "haiburitudoreiauto"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#haiburitudoreiauto"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" ハイブリッドレイアウト")], -1);
|
|
|
|
var layoutvue_type_template_id_242ff14d_hoisted_13 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "基本の1/24カラムを組み合わせて、より複雑なハイブリッドレイアウトを形成できます。", -1);
|
|
|
|
var layoutvue_type_template_id_242ff14d_hoisted_14 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<el-row :gutter=\"20\">\n <el-col :span=\"16\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"16\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n")], -1);
|
|
|
|
var layoutvue_type_template_id_242ff14d_hoisted_15 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "karamuohusetuto"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#karamuohusetuto"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" カラムオフセット")], -1);
|
|
|
|
var layoutvue_type_template_id_242ff14d_hoisted_16 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "オフセットを指定することができます。", -1);
|
|
|
|
var _hoisted_17 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Colの"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "offset"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("属性の値を設定することで、カラムのオフセット数を指定することができます。")])], -1);
|
|
|
|
var _hoisted_18 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<el-row :gutter=\"20\">\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n <el-col :span=\"6\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n <el-col :span=\"12\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n")], -1);
|
|
|
|
var _hoisted_19 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "pei-zhi"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#pei-zhi"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 配置")], -1);
|
|
|
|
var _hoisted_20 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "フレックスレイアウトを使用して、列の配置を柔軟に行うことができます。", -1);
|
|
|
|
var _hoisted_21 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "type"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 属性に "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "flex"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" を設定することでフレックスレイアウトを有効にし、"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "justify"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 属性に start, center, end, space-between, space-around を設定することで子要素のレイアウトを定義することができます。")])], -1);
|
|
|
|
var _hoisted_22 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<el-row type=\"flex\" class=\"row-bg\">\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"center\">\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"end\">\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"space-between\">\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"space-around\">\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n")], -1);
|
|
|
|
var _hoisted_23 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "resuponsibureiauto"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#resuponsibureiauto"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" レスポンシブレイアウト")], -1);
|
|
|
|
var _hoisted_24 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Bootstrapのレスポンシブデザインを例にとると、xs, sm, md, lg, xlの5つのブレイクポイントがプリセットされています。", -1);
|
|
|
|
var _hoisted_25 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<el-row :gutter=\"10\">\n <el-col :xs=\"8\" :sm=\"6\" :md=\"4\" :lg=\"3\" :xl=\"1\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :xs=\"4\" :sm=\"6\" :md=\"8\" :lg=\"9\" :xl=\"11\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :xs=\"4\" :sm=\"6\" :md=\"8\" :lg=\"9\" :xl=\"11\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :xs=\"8\" :sm=\"6\" :md=\"4\" :lg=\"3\" :xl=\"1\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n\n<style>\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n</style>\n")], -1);
|
|
|
|
var _hoisted_26 = /*#__PURE__*/Object(vue_esm_browser["m" /* createStaticVNode */])("<h3 id=\"yao-suwo-yinsutamenoyuteiriteikurasu\"><a class=\"header-anchor\" href=\"#yao-suwo-yinsutamenoyuteiriteikurasu\">¶</a> 要素を隠すためのユーティリティクラス</h3><p>さらに、Element Plus は、特定の条件下で要素を隠すための一連のクラスを提供します。これらのクラスは、任意の DOM 要素やカスタムコンポーネントに追加することができます。これらのクラスを使用するには、以下のCSSファイルをインポートする必要があります。</p><pre><code class=\"hljs language-js\"><span class=\"hljs-keyword\">import</span> <span class=\"hljs-string\">'element-plus/lib/theme-chalk/display.css'</span>;\n</code></pre><p>クラス:</p><ul><li><code>hidden-xs-only</code> - xs ビューポートのとき、非表示にする</li><li><code>hidden-sm-only</code> - sm ビューポートのとき、非表示にする</li><li><code>hidden-sm-and-down</code> - sm ビューポート以下のとき、非表示にする</li><li><code>hidden-sm-and-up</code> - sm ビューポート以上のとき、非表示にする</li><li><code>hidden-md-only</code> - md ビューポートのとき、非表示にする</li><li><code>hidden-md-and-down</code> - md ビューポート以下のとき、非表示にする</li><li><code>hidden-md-and-up</code> - md ビューポート以上のとき、非表示にする</li><li><code>hidden-lg-only</code> - lg ビューポートのとき、非表示にする</li><li><code>hidden-lg-and-down</code> - lg ビューポート以下のとき、非表示にする</li><li><code>hidden-lg-and-up</code> - lg ビューポート以上のとき、非表示にする</li><li><code>hidden-xl-only</code> - xl ビューポートのとき、非表示にする</li></ul><h3 id=\"xing-shu-xing\"><a class=\"header-anchor\" href=\"#xing-shu-xing\">¶</a> 行属性</h3><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted Values</th><th>Default</th></tr></thead><tbody><tr><td>gutter</td><td>グリッド間隔</td><td>number</td><td>—</td><td>0</td></tr><tr><td>type</td><td>レイアウトモード、フレックスを使用することができます、モダンなブラウザで動作します。</td><td>string</td><td>—</td><td>—</td></tr><tr><td>justify</td><td>フレックスレイアウトの水平配置</td><td>string</td><td>start/end/center/space-around/space-between</td><td>start</td></tr><tr><td>align</td><td>フレックスレイアウトの垂直配置</td><td>string</td><td>top/middle/bottom</td><td>top</td></tr><tr><td>tag</td><td>カスタムエレメントタグ</td><td>string</td><td>*</td><td>div</td></tr></tbody></table><h3 id=\"lie-shu-xing\"><a class=\"header-anchor\" href=\"#lie-shu-xing\">¶</a> 列属性</h3><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted Values</th><th>Default</th></tr></thead><tbody><tr><td>span</td><td>グリッドスパンの列数</td><td>number</td><td>—</td><td>24</td></tr><tr><td>offset</td><td>左辺のグリッドのスペースの数</td><td>number</td><td>—</td><td>0</td></tr><tr><td>push</td><td>グリッドが右に移動する列数</td><td>number</td><td>—</td><td>0</td></tr><tr><td>pull</td><td>グリッドが左に移動する列数</td><td>number</td><td>—</td><td>0</td></tr><tr><td>xs</td><td><code><768px</code> レスポンシブ列または列propsオブジェクト</td><td>number/object (e.g. {span: 4, offset: 4})</td><td>—</td><td>—</td></tr><tr><td>sm</td><td><code>≥768px</code> レスポンシブ列または列propsオブジェクト</td><td>number/object (e.g. {span: 4, offset: 4})</td><td>—</td><td>—</td></tr><tr><td>md</td><td><code>≥992px</code> レスポンシブ列または列propsオブジェクト</td><td>number/object (e.g. {span: 4, offset: 4})</td><td>—</td><td>—</td></tr><tr><td>lg</td><td><code>≥1200px</code> レスポンシブ列または列propsオブジェクト</td><td>number/object (e.g. {span: 4, offset: 4})</td><td>—</td><td>—</td></tr><tr><td>xl</td><td><code>≥1920px</code> レスポンシブ列または列propsオブジェクト</td><td>number/object (e.g. {span: 4, offset: 4})</td><td>—</td><td>—</td></tr><tr><td>tag</td><td>カスタムエレメントタグ</td><td>string</td><td>*</td><td>div</td></tr></tbody></table>", 9);
|
|
|
|
function layoutvue_type_template_id_242ff14d_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
var _component_element_demo0 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo0");
|
|
|
|
var _component_demo_block = Object(vue_esm_browser["P" /* resolveComponent */])("demo-block");
|
|
|
|
var _component_element_demo1 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo1");
|
|
|
|
var _component_element_demo2 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo2");
|
|
|
|
var _component_element_demo3 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo3");
|
|
|
|
var _component_element_demo4 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo4");
|
|
|
|
var _component_element_demo5 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo5");
|
|
|
|
return Object(vue_esm_browser["G" /* openBlock */])(), Object(vue_esm_browser["j" /* createBlock */])("section", layoutvue_type_template_id_242ff14d_hoisted_1, [layoutvue_type_template_id_242ff14d_hoisted_2, layoutvue_type_template_id_242ff14d_hoisted_3, layoutvue_type_template_id_242ff14d_hoisted_4, layoutvue_type_template_id_242ff14d_hoisted_5, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo0)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [layoutvue_type_template_id_242ff14d_hoisted_7];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [layoutvue_type_template_id_242ff14d_hoisted_6];
|
|
}),
|
|
_: 1
|
|
}), layoutvue_type_template_id_242ff14d_hoisted_8, layoutvue_type_template_id_242ff14d_hoisted_9, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo1)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [layoutvue_type_template_id_242ff14d_hoisted_11];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [layoutvue_type_template_id_242ff14d_hoisted_10];
|
|
}),
|
|
_: 1
|
|
}), layoutvue_type_template_id_242ff14d_hoisted_12, layoutvue_type_template_id_242ff14d_hoisted_13, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo2)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [layoutvue_type_template_id_242ff14d_hoisted_14];
|
|
}),
|
|
_: 1
|
|
}), layoutvue_type_template_id_242ff14d_hoisted_15, layoutvue_type_template_id_242ff14d_hoisted_16, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo3)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_18];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_17];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_19, _hoisted_20, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo4)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_22];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_21];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_23, _hoisted_24, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo5)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_25];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_26]);
|
|
}
|
|
// CONCATENATED MODULE: ./website/docs/jp/layout.md?vue&type=template&id=242ff14d
|
|
|
|
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
|
|
var helpers_extends = __webpack_require__(7);
|
|
var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
|
|
|
|
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist??ref--2-0!./website/md-loader!./website/docs/jp/layout.md?vue&type=script&lang=ts
|
|
|
|
|
|
/* harmony default export */ var layoutvue_type_script_lang_ts = ({
|
|
name: 'component-doc',
|
|
components: {
|
|
"element-demo0": function () {
|
|
var _createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
var _hoisted_1 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-dark"
|
|
}, null, -1);
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_3 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_4 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_5 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_6 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_7 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_8 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_9 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_10 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_11 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_12 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_13 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_14 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_15 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_16 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_col = _resolveComponent("el-col");
|
|
|
|
var _component_el_row = _resolveComponent("el-row");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_row, null, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 24
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_1];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, null, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 12
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_2];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 12
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_3];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, null, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 8
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_4];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 8
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_5];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 8
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_6];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, null, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_7];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_8];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_9];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_10];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, null, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_11];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_12];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_13];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_14];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_15];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_16];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
})]);
|
|
}
|
|
|
|
var democomponentExport = {};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo1": function () {
|
|
var _createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
var _hoisted_1 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_3 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_4 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_col = _resolveComponent("el-col");
|
|
|
|
var _component_el_row = _resolveComponent("el-row");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_row, {
|
|
gutter: 20
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_1];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_2];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_3];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_4];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
})]);
|
|
}
|
|
|
|
var democomponentExport = {};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo2": function () {
|
|
var _createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
var _hoisted_1 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_3 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_4 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_5 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_6 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_7 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_8 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_9 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_col = _resolveComponent("el-col");
|
|
|
|
var _component_el_row = _resolveComponent("el-row");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_row, {
|
|
gutter: 20
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 16
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_1];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 8
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_2];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, {
|
|
gutter: 20
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 8
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_3];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 8
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_4];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_5];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_6];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, {
|
|
gutter: 20
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_7];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 16
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_8];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_9];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
})]);
|
|
}
|
|
|
|
var democomponentExport = {};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo3": function () {
|
|
var _createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
var _hoisted_1 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_3 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_4 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_5 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_col = _resolveComponent("el-col");
|
|
|
|
var _component_el_row = _resolveComponent("el-row");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_row, {
|
|
gutter: 20
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_1];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6,
|
|
offset: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_2];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, {
|
|
gutter: 20
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 6,
|
|
offset: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_3];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6,
|
|
offset: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_4];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, {
|
|
gutter: 20
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 12,
|
|
offset: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_5];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
})]);
|
|
}
|
|
|
|
var democomponentExport = {};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo4": function () {
|
|
var _createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
var _hoisted_1 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_3 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_4 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_5 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_6 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_7 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_8 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_9 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_10 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_11 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_12 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_13 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_14 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_15 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_col = _resolveComponent("el-col");
|
|
|
|
var _component_el_row = _resolveComponent("el-row");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_row, {
|
|
type: "flex",
|
|
class: "row-bg"
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_1];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_2];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_3];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, {
|
|
type: "flex",
|
|
class: "row-bg",
|
|
justify: "center"
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_4];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_5];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_6];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, {
|
|
type: "flex",
|
|
class: "row-bg",
|
|
justify: "end"
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_7];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_8];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_9];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, {
|
|
type: "flex",
|
|
class: "row-bg",
|
|
justify: "space-between"
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_10];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_11];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_12];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, {
|
|
type: "flex",
|
|
class: "row-bg",
|
|
justify: "space-around"
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_13];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_14];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_15];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
})]);
|
|
}
|
|
|
|
var democomponentExport = {};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo5": function () {
|
|
var _createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
var _hoisted_1 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_3 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_4 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_col = _resolveComponent("el-col");
|
|
|
|
var _component_el_row = _resolveComponent("el-row");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_row, {
|
|
gutter: 10
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
xs: 8,
|
|
sm: 6,
|
|
md: 4,
|
|
lg: 3,
|
|
xl: 1
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_1];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
xs: 4,
|
|
sm: 6,
|
|
md: 8,
|
|
lg: 9,
|
|
xl: 11
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_2];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
xs: 4,
|
|
sm: 6,
|
|
md: 8,
|
|
lg: 9,
|
|
xl: 11
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_3];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
xs: 8,
|
|
sm: 6,
|
|
md: 4,
|
|
lg: 3,
|
|
xl: 1
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_4];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
})]);
|
|
}
|
|
|
|
var democomponentExport = {};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}()
|
|
}
|
|
});
|
|
// CONCATENATED MODULE: ./website/docs/jp/layout.md?vue&type=script&lang=ts
|
|
|
|
// CONCATENATED MODULE: ./website/docs/jp/layout.md
|
|
|
|
|
|
|
|
layoutvue_type_script_lang_ts.render = layoutvue_type_template_id_242ff14d_render
|
|
|
|
/* harmony default export */ var layout = __webpack_exports__["default"] = (layoutvue_type_script_lang_ts);
|
|
|
|
/***/ }),
|
|
|
|
/***/ 689:
|
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
|
|
"use strict";
|
|
// ESM COMPAT FLAG
|
|
__webpack_require__.r(__webpack_exports__);
|
|
|
|
// EXTERNAL MODULE: ./node_modules/vue/dist/vue.esm-browser.js
|
|
var vue_esm_browser = __webpack_require__(0);
|
|
|
|
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist/templateLoader.js??ref--6!./node_modules/vue-loader/dist??ref--2-0!./website/md-loader!./website/docs/fr-FR/layout.md?vue&type=template&id=826f1810
|
|
|
|
var layoutvue_type_template_id_826f1810_hoisted_1 = {
|
|
class: "content element-doc"
|
|
};
|
|
|
|
var layoutvue_type_template_id_826f1810_hoisted_2 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h2", {
|
|
id: "layout"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#layout"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Layout")], -1);
|
|
|
|
var layoutvue_type_template_id_826f1810_hoisted_3 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Vous pouvez créer une mise en page facilement et rapidement grâce à une base de 24 colonnes.", -1);
|
|
|
|
var layoutvue_type_template_id_826f1810_hoisted_4 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "mise-en-page-basique"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#mise-en-page-basique"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Mise en page basique")], -1);
|
|
|
|
var layoutvue_type_template_id_826f1810_hoisted_5 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Créez une grille de mise en page basique grâce aux colonnes.", -1);
|
|
|
|
var layoutvue_type_template_id_826f1810_hoisted_6 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Grâce à "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "row"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" et "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "col"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(", vous pouvez arranger la mise en page en utilisant l'attribut "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "span"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(".")])], -1);
|
|
|
|
var layoutvue_type_template_id_826f1810_hoisted_7 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<el-row>\n <el-col :span=\"24\"><div class=\"grid-content bg-purple-dark\"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span=\"12\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"12\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"8\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n")], -1);
|
|
|
|
var layoutvue_type_template_id_826f1810_hoisted_8 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "espacement"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#espacement"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Espacement")], -1);
|
|
|
|
var layoutvue_type_template_id_826f1810_hoisted_9 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "L'espacement entre colonnes est configurable.", -1);
|
|
|
|
var layoutvue_type_template_id_826f1810_hoisted_10 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Utilisez l'attribut "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "gutter"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" dans el-row pour spécifier l'espacement entre colonnes. La valeur par défaut est 0.")])], -1);
|
|
|
|
var layoutvue_type_template_id_826f1810_hoisted_11 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<el-row :gutter=\"20\">\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n")], -1);
|
|
|
|
var layoutvue_type_template_id_826f1810_hoisted_12 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "mise-en-page-complexe"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#mise-en-page-complexe"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Mise en page complexe")], -1);
|
|
|
|
var layoutvue_type_template_id_826f1810_hoisted_13 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Vous pouvez former une mise en page complexe en combinant les systèmes de colonnes 1 / 24 comme vous le souhaitez.", -1);
|
|
|
|
var layoutvue_type_template_id_826f1810_hoisted_14 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<el-row :gutter=\"20\">\n <el-col :span=\"16\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"16\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n")], -1);
|
|
|
|
var layoutvue_type_template_id_826f1810_hoisted_15 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "decalage-des-colonnes"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#decalage-des-colonnes"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Décalage des colonnes")], -1);
|
|
|
|
var layoutvue_type_template_id_826f1810_hoisted_16 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Vous pouvez spécifier un décalage pour les colonnes.", -1);
|
|
|
|
var _hoisted_17 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Utiliser l'attribut "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "offset"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" pour régler le décalage.")])], -1);
|
|
|
|
var _hoisted_18 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<el-row :gutter=\"20\">\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n <el-col :span=\"6\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n <el-col :span=\"12\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n")], -1);
|
|
|
|
var _hoisted_19 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "alignement"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#alignement"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Alignement")], -1);
|
|
|
|
var _hoisted_20 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Utilisez la mise en page flex pour rendre l'alignement des colonnes flexible.", -1);
|
|
|
|
var _hoisted_21 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Vous pouvez activer la mise en page flex en réglant l'attribut "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "type"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" à 'flex', puis en configurant la disposition des éléments enfants avec l'attribut "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "justify"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" définit à 'start', 'center', 'end', 'space-between' ou 'space-around'.")])], -1);
|
|
|
|
var _hoisted_22 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<el-row type=\"flex\" class=\"row-bg\">\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"center\">\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"end\">\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"space-between\">\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"space-around\">\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n")], -1);
|
|
|
|
var _hoisted_23 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "mise-en-page-responsive"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#mise-en-page-responsive"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Mise en page responsive")], -1);
|
|
|
|
var _hoisted_24 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Se basant sur le design responsive de Bootstrap, il existe cinq breakpoints déjà définit: xs, sm, md, lg and xl.", -1);
|
|
|
|
var _hoisted_25 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<el-row :gutter=\"10\">\n <el-col :xs=\"8\" :sm=\"6\" :md=\"4\" :lg=\"3\" :xl=\"1\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :xs=\"4\" :sm=\"6\" :md=\"8\" :lg=\"9\" :xl=\"11\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n <el-col :xs=\"4\" :sm=\"6\" :md=\"8\" :lg=\"9\" :xl=\"11\"><div class=\"grid-content bg-purple\"></div></el-col>\n <el-col :xs=\"8\" :sm=\"6\" :md=\"4\" :lg=\"3\" :xl=\"1\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n\n<style>\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n</style>\n")], -1);
|
|
|
|
var _hoisted_26 = /*#__PURE__*/Object(vue_esm_browser["m" /* createStaticVNode */])("<h3 id=\"classes-pour-cacher-certains-elements\"><a class=\"header-anchor\" href=\"#classes-pour-cacher-certains-elements\">¶</a> Classes pour cacher certains éléments</h3><p>Element Plus fournit également une série de classes pour cacher des éléments dans certaines circonstances. Ces classes peuvent être ajoutées à n'importe quel élément du DOM ou composant. Vous devrez importer le fichier CSS suivant pour pouvoir les utiliser:</p><pre><code class=\"hljs language-js\"><span class=\"hljs-keyword\">import</span> <span class=\"hljs-string\">'element-plus/lib/theme-chalk/display.css'</span>;\n</code></pre><p>Ces classes sont:</p><ul><li><code>hidden-xs-only</code> - disparaît sur les très petits viewports uniquement</li><li><code>hidden-sm-only</code> - disparaît sur les petits viewports uniquement</li><li><code>hidden-sm-and-down</code> - disparaît sur les petits viewports et plus petits</li><li><code>hidden-sm-and-up</code> - disparaît sur les petits viewports et plus grand</li><li><code>hidden-md-only</code> - disparaît sur les viewports moyens uniquement</li><li><code>hidden-md-and-down</code> - disparaît sur les viewports moyens et plus petits</li><li><code>hidden-md-and-up</code> - disparaît sur les viewports moyens et plus grand</li><li><code>hidden-lg-only</code> - disparaît sur les viewports larges uniquement</li><li><code>hidden-lg-and-down</code> - disparaît sur les viewports larges et plus petits</li><li><code>hidden-lg-and-up</code> - disparaît sur les viewports larges et plus grand</li><li><code>hidden-xl-only</code> - disparaît sur les viewports très larges uniquement</li></ul><h3 id=\"attributs-des-lignes\"><a class=\"header-anchor\" href=\"#attributs-des-lignes\">¶</a> Attributs des lignes</h3><table><thead><tr><th>Attribut</th><th>Description</th><th>Type</th><th>Valeurs acceptées</th><th>Défaut</th></tr></thead><tbody><tr><td>gutter</td><td>Espacement de la grille.</td><td>number</td><td>—</td><td>0</td></tr><tr><td>type</td><td>Mode de mise en page. Vous pouvez utiliser flex, qui fonctionne sur les navigateurs modernes.</td><td>string</td><td>—</td><td>—</td></tr><tr><td>justify</td><td>Alignement horizontal pour le mise en page flex.</td><td>string</td><td>start/end/center/space-around/space-between</td><td>start</td></tr><tr><td>align</td><td>Alignement vertical pour la mise en page flex.</td><td>string</td><td>top/middle/bottom</td><td>top</td></tr><tr><td>tag</td><td>Élément de tag personnalisé.</td><td>string</td><td>*</td><td>div</td></tr></tbody></table><h3 id=\"attributs-des-colonnes\"><a class=\"header-anchor\" href=\"#attributs-des-colonnes\">¶</a> Attributs des colonnes</h3><table><thead><tr><th>Attribut</th><th>Description</th><th>Type</th><th>Valeurs acceptées</th><th>Défaut</th></tr></thead><tbody><tr><td>span</td><td>Nombre de colonnes sur lesquelles l'élément s'étend.</td><td>number</td><td>—</td><td>24</td></tr><tr><td>offset</td><td>Nombre d'espacements sur la gauche de l'élément.</td><td>number</td><td>—</td><td>0</td></tr><tr><td>push</td><td>Nombre de colonnes dont l'élément se déplace vers la droite.</td><td>number</td><td>—</td><td>0</td></tr><tr><td>pull</td><td>Nombre de colonnes dont l'élément se déplace vers la gauche.</td><td>number</td><td>—</td><td>0</td></tr><tr><td>xs</td><td><code><768px</code> Nombre de colonnes responsives ou bien objet de propriétés de colonne.</td><td>number/object (e.g. {span: 4, offset: 4})</td><td>—</td><td>—</td></tr><tr><td>sm</td><td><code>≥768px</code> Nombre de colonnes responsives ou bien objet de propriétés de colonne.</td><td>number/object (e.g. {span: 4, offset: 4})</td><td>—</td><td>—</td></tr><tr><td>md</td><td><code>≥992px</code> Nombre de colonnes responsives ou bien objet de propriétés de colonne.</td><td>number/object (e.g. {span: 4, offset: 4})</td><td>—</td><td>—</td></tr><tr><td>lg</td><td><code>≥1200px</code> Nombre de colonnes responsives ou bien objet de propriétés de colonne.</td><td>number/object (e.g. {span: 4, offset: 4})</td><td>—</td><td>—</td></tr><tr><td>xl</td><td><code>≥1920px</code> Nombre de colonnes responsives ou bien objet de propriétés de colonne.</td><td>number/object (e.g. {span: 4, offset: 4})</td><td>—</td><td>—</td></tr><tr><td>tag</td><td>Élément de tag personnalisé.</td><td>string</td><td>*</td><td>div</td></tr></tbody></table>", 9);
|
|
|
|
function layoutvue_type_template_id_826f1810_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
var _component_element_demo0 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo0");
|
|
|
|
var _component_demo_block = Object(vue_esm_browser["P" /* resolveComponent */])("demo-block");
|
|
|
|
var _component_element_demo1 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo1");
|
|
|
|
var _component_element_demo2 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo2");
|
|
|
|
var _component_element_demo3 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo3");
|
|
|
|
var _component_element_demo4 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo4");
|
|
|
|
var _component_element_demo5 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo5");
|
|
|
|
return Object(vue_esm_browser["G" /* openBlock */])(), Object(vue_esm_browser["j" /* createBlock */])("section", layoutvue_type_template_id_826f1810_hoisted_1, [layoutvue_type_template_id_826f1810_hoisted_2, layoutvue_type_template_id_826f1810_hoisted_3, layoutvue_type_template_id_826f1810_hoisted_4, layoutvue_type_template_id_826f1810_hoisted_5, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo0)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [layoutvue_type_template_id_826f1810_hoisted_7];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [layoutvue_type_template_id_826f1810_hoisted_6];
|
|
}),
|
|
_: 1
|
|
}), layoutvue_type_template_id_826f1810_hoisted_8, layoutvue_type_template_id_826f1810_hoisted_9, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo1)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [layoutvue_type_template_id_826f1810_hoisted_11];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [layoutvue_type_template_id_826f1810_hoisted_10];
|
|
}),
|
|
_: 1
|
|
}), layoutvue_type_template_id_826f1810_hoisted_12, layoutvue_type_template_id_826f1810_hoisted_13, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo2)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [layoutvue_type_template_id_826f1810_hoisted_14];
|
|
}),
|
|
_: 1
|
|
}), layoutvue_type_template_id_826f1810_hoisted_15, layoutvue_type_template_id_826f1810_hoisted_16, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo3)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_18];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_17];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_19, _hoisted_20, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo4)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_22];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_21];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_23, _hoisted_24, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo5)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_25];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_26]);
|
|
}
|
|
// CONCATENATED MODULE: ./website/docs/fr-FR/layout.md?vue&type=template&id=826f1810
|
|
|
|
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
|
|
var helpers_extends = __webpack_require__(7);
|
|
var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
|
|
|
|
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist??ref--2-0!./website/md-loader!./website/docs/fr-FR/layout.md?vue&type=script&lang=ts
|
|
|
|
|
|
/* harmony default export */ var layoutvue_type_script_lang_ts = ({
|
|
name: 'component-doc',
|
|
components: {
|
|
"element-demo0": function () {
|
|
var _createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
var _hoisted_1 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-dark"
|
|
}, null, -1);
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_3 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_4 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_5 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_6 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_7 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_8 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_9 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_10 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_11 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_12 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_13 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_14 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_15 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_16 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_col = _resolveComponent("el-col");
|
|
|
|
var _component_el_row = _resolveComponent("el-row");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_row, null, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 24
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_1];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, null, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 12
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_2];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 12
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_3];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, null, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 8
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_4];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 8
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_5];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 8
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_6];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, null, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_7];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_8];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_9];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_10];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, null, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_11];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_12];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_13];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_14];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_15];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_16];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
})]);
|
|
}
|
|
|
|
var democomponentExport = {};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo1": function () {
|
|
var _createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
var _hoisted_1 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_3 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_4 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_col = _resolveComponent("el-col");
|
|
|
|
var _component_el_row = _resolveComponent("el-row");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_row, {
|
|
gutter: 20
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_1];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_2];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_3];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_4];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
})]);
|
|
}
|
|
|
|
var democomponentExport = {};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo2": function () {
|
|
var _createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
var _hoisted_1 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_3 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_4 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_5 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_6 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_7 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_8 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_9 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_col = _resolveComponent("el-col");
|
|
|
|
var _component_el_row = _resolveComponent("el-row");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_row, {
|
|
gutter: 20
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 16
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_1];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 8
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_2];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, {
|
|
gutter: 20
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 8
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_3];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 8
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_4];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_5];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_6];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, {
|
|
gutter: 20
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_7];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 16
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_8];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 4
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_9];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
})]);
|
|
}
|
|
|
|
var democomponentExport = {};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo3": function () {
|
|
var _createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
var _hoisted_1 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_3 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_4 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_5 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_col = _resolveComponent("el-col");
|
|
|
|
var _component_el_row = _resolveComponent("el-row");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_row, {
|
|
gutter: 20
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_1];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6,
|
|
offset: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_2];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, {
|
|
gutter: 20
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 6,
|
|
offset: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_3];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6,
|
|
offset: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_4];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, {
|
|
gutter: 20
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 12,
|
|
offset: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_5];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
})]);
|
|
}
|
|
|
|
var democomponentExport = {};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo4": function () {
|
|
var _createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
var _hoisted_1 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_3 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_4 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_5 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_6 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_7 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_8 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_9 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_10 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_11 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_12 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_13 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_14 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_15 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_col = _resolveComponent("el-col");
|
|
|
|
var _component_el_row = _resolveComponent("el-row");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_row, {
|
|
type: "flex",
|
|
class: "row-bg"
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_1];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_2];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_3];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, {
|
|
type: "flex",
|
|
class: "row-bg",
|
|
justify: "center"
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_4];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_5];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_6];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, {
|
|
type: "flex",
|
|
class: "row-bg",
|
|
justify: "end"
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_7];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_8];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_9];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, {
|
|
type: "flex",
|
|
class: "row-bg",
|
|
justify: "space-between"
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_10];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_11];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_12];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_row, {
|
|
type: "flex",
|
|
class: "row-bg",
|
|
justify: "space-around"
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_13];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_14];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
span: 6
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_15];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
})]);
|
|
}
|
|
|
|
var democomponentExport = {};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo5": function () {
|
|
var _createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
var _hoisted_1 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
var _hoisted_3 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple"
|
|
}, null, -1);
|
|
|
|
var _hoisted_4 = /*#__PURE__*/_createVNode("div", {
|
|
class: "grid-content bg-purple-light"
|
|
}, null, -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_col = _resolveComponent("el-col");
|
|
|
|
var _component_el_row = _resolveComponent("el-row");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_row, {
|
|
gutter: 10
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_col, {
|
|
xs: 8,
|
|
sm: 6,
|
|
md: 4,
|
|
lg: 3,
|
|
xl: 1
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_1];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
xs: 4,
|
|
sm: 6,
|
|
md: 8,
|
|
lg: 9,
|
|
xl: 11
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_2];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
xs: 4,
|
|
sm: 6,
|
|
md: 8,
|
|
lg: 9,
|
|
xl: 11
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_3];
|
|
}),
|
|
_: 1
|
|
}), _createVNode(_component_el_col, {
|
|
xs: 8,
|
|
sm: 6,
|
|
md: 4,
|
|
lg: 3,
|
|
xl: 1
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_4];
|
|
}),
|
|
_: 1
|
|
})];
|
|
}),
|
|
_: 1
|
|
})]);
|
|
}
|
|
|
|
var democomponentExport = {};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}()
|
|
}
|
|
});
|
|
// CONCATENATED MODULE: ./website/docs/fr-FR/layout.md?vue&type=script&lang=ts
|
|
|
|
// CONCATENATED MODULE: ./website/docs/fr-FR/layout.md
|
|
|
|
|
|
|
|
layoutvue_type_script_lang_ts.render = layoutvue_type_template_id_826f1810_render
|
|
|
|
/* harmony default export */ var layout = __webpack_exports__["default"] = (layoutvue_type_script_lang_ts);
|
|
|
|
/***/ })
|
|
|
|
}]); |