var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nimport \"./style.css\";\n\nfunction App() {\n  const [current, setCurrent] = createSignal(\"foo\");\n\n  return <>\n    <button\n\t   class={current() === 'foo' ? 'selected' : ''}\n\t   onClick={() => setCurrent('foo')}\n    >foo</button>\n    <button\n\t    class={current() === 'bar' ? 'selected' : ''}\n\t    onClick={() => setCurrent('bar')}\n    >bar</button>\n    <button\n\t    class={current() === 'baz' ? 'selected' : ''}\n\t    onClick={() => setCurrent('baz')}\n    >baz</button>\n  </>;\n}\n\nrender(() => <App />, document.getElementById('app'));"
		},
		{
			name: "style",
			type: "css",
			content: "button {\n  display: block;\n}\n\n.selected {\n  background-color: #ff3e00;\n  color: white;\n}"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nimport \"./style.css\";\n\nfunction App() {\n  const [current, setCurrent] = createSignal(\"foo\");\n\n  return <>\n    <button\n\t   classList={{selected: current() === 'foo'}}\n\t   onClick={() => setCurrent('foo')}\n    >foo</button>\n    <button\n\t    classList={{selected: current() === 'bar'}}\n\t    onClick={() => setCurrent('bar')}\n    >bar</button>\n    <button\n\t    classList={{selected: current() === 'baz'}}\n\t    onClick={() => setCurrent('baz')}\n    >baz</button>\n  </>;\n}\n\nrender(() => <App />, document.getElementById('app'));"
		},
		{
			name: "style",
			type: "css",
			content: "button {\n  display: block;\n}\n\n.selected {\n  background-color: #ff3e00;\n  color: white;\n}"
		}
	]
};
var markdown = "Solid 支持同时使用 `class` 和 `className` 来设置元素的 `className` 属性。然而，条件设置 class 可以给开发者提供便利。出于这个原因，Solid 提供一个内置的 `classList` JSX 属性，`classList` 接受一个对象，其中键是类名，值是一个布尔表达式。当为 true 时应用该 class，当为 false 时该 class 被移除。\n\n我们可以替换：\n\n```jsx\n<button\n  class={current() === \"foo\" ? \"selected\" : \"\"}\n  onClick={() => setCurrent(\"foo\")}\n>\n  foo\n</button>\n```\n\n用下面代码替换:\n\n```jsx\n<button\n  classList={{ selected: current() === \"foo\" }}\n  onClick={() => setCurrent(\"foo\")}\n>\n  foo\n</button>\n```\n\n也不要忘了，你还可以用 CSS 模块中接收到的类名进行动态设置。\n\n```jsx\nimport { active } from \"./style.module.css\";\n\n<div classList={{ [active]: isActive() }} />;\n```\n";
var bindings_classlist = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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