CJSS基于 CSS 的 Web 框架

联合创作 · 2023-09-19 03:14

CJSS 是一个基于 CSS 的 Web 框架,所有效果都在 CSS 文件中生效,可以在 CSS 中使用它添加更多功能,或者构建一个完整的页面。

使用方法:

HTML

想要使用某个组件,在 CSS 文件中选择它,然后添加 --html:(your markup here);

h1 {
  --html:(
    This is a headline
  );
}

如果希望通过标签产生效果,如下

<component>My Component</component>
component {
  --html:(
    <h2>${yield}</h2>
    <p>This is a component</p>
  );
}

就会呈现为

<component>
  <h2>My Component</h2>
  <p>This is a component</p>
</component>

JavaScript

如果想使用 JavaScript 从 HTML 中直接定义事物的行为,在 CSS 文件中就可以执行此操作。

.item {
  cursor: pointer;
  --js:(
    function toggle() {
      this.classList.toggle('active');
    }
    this.addEventListener('click', toggle );
  );
}

添加数据方法

使用 --data(key:[data]) 属性

nav {
  --data:(
    name: ['one', 'two', 'three'],
    link: ['#one', '#two', '#three'],
  );
  --html:(
    <a class="item" href="${data.link[0]}">${data.name[0]}</a>
    <a class="item" href="${data.link[1]}">${data.name[1]}</a>
    <a class="item" href="${data.link[2]}">${data.name[2]}</a>
  );
  --js:(console.log(data));
}

框架案例

浏览 7
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报