var lesson = {
	files: [
		{
			name: "main",
			content: "import { render, Portal } from \"solid-js/web\";\nimport \"./styles.css\";\n\nfunction App() {\n  return (\n    <div class=\"app-container\">\n      <p>Just some text inside a div that has a restricted size.</p>\n      <div class=\"popup\">\n        <h1>Popup</h1>\n        <p>Some text you might need for something or other.</p>\n      </div>\n    </div>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "styles",
			type: "css",
			content: ".app-container {\n  width: 200px;\n  height: 100px;\n  overflow: hidden;\n}\n\n.popup {\n  position: relative;\n  z-index: 2;\n  background: #ddd;\n  padding: 1rem;\n  min-height: 200px;\n  min-width: 200px;\n}\n\n.popup::after {\n  content: \" \";\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  margin-left: -5px;\n  border-width: 5px;\n  border-style: solid;\n  border-color: transparent transparent #ddd transparent;\n}"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render, Portal } from \"solid-js/web\";\nimport \"./styles.css\";\n\nfunction App() {\n  return (\n    <div class=\"app-container\">\n      <p>Just some text inside a div that has a restricted size.</p>\n      <Portal>\n        <div class=\"popup\">\n          <h1>Popup</h1>\n          <p>Some text you might need for something or other.</p>\n        </div>\n      </Portal>\n    </div>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "styles",
			type: "css",
			content: ".app-container {\n  width: 200px;\n  height: 100px;\n  overflow: hidden;\n}\n\n.popup {\n  position: relative;\n  z-index: 2;\n  background: #ddd;\n  padding: 1rem;\n  min-height: 200px;\n  min-width: 200px;\n}\n\n.popup::after {\n  content: \" \";\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  margin-left: -5px;\n  border-width: 5px;\n  border-style: solid;\n  border-color: transparent transparent #ddd transparent;\n}"
		}
	]
};
var markdown = "有时在应用程序的正常顺序之外插入元素是很有用。Z-index 有时不足以处理像模态框类浮动元素的渲染上下文。\n\nSolid 提供一个 `<Portal>` 组件，`<Portal>` 的子内容将被插入到选择的位置。默认情况下，它的元素将在 `document.body` 下的 `<div>` 中呈现。\n\n在示例中，我们看到信息弹出框被截断了。我们可以通过将元素包装在 `<Portal>` 中将其从正常 DOM 顺序中拉出来解决这个问题：\n\n```jsx\n<Portal>\n  <div class=\"popup\">\n    <h1>Popup</h1>\n    <p>Some text you might need for something or other.</p>\n  </div>\n</Portal>\n```\n";
var flow_portal = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

export { flow_portal as default, lesson, markdown, solved };
