silkjs/linson

A Vue 3 Component Library.

Linson

Linson is a Vue 3 Component Library. translates from the Chinese character "林森", meaning Linson provides users with the most basic materials to quickly and seamlessly assemble a standardized User Interface

English | 简体中文

Features

• Linson UI is written in TypeScript, providing powerful type support for silky-smooth coding.
• Components support treeshaking and can be referenced on-demand without third-party plugins.
• Dark mode is supported, and the theme is freely customizable, following CSS standards and changing CSS variables to achieve a hundred different themes.
• Support both template mode and rendering function mode, and do optimization for rendering function mode, more suitable for declarative programming.

Design Resources

• Linson for Desktop
• Linson for Mobile (In Planning)

Usage

install

npm install @silkjs/linson

import

// style
import "@silkjs/linson/dist/linson.css";

// global use
import { Linson } from "@silkjs/linson";
app.use(Linson);

// or
import { Button } from "@silkjs/linson";
app.use(Button);

template mode

<template>
  <l-row :gutter="[16, 16]">
    <l-col :span="6"><l-button theme="default">Default</l-button></l-col>
    <l-col :span="6"><l-button theme="primary">Primary</l-button></l-col>
    <l-col :span="6"><l-button theme="warning">Warning</l-button></l-col>
    <l-col :span="6"><l-button theme="error">Error</l-button></l-col>
    <l-col :span="6"><l-button theme="success">Success</l-button></l-col>
  </l-row>
</template>
<script lang="ts">
  import { defineComponent } from "vue";

  export default defineComponent({
    setup() {},
  });
</script>

render-function mode

import { defineComponent } from "vue";
import { Button, Row, Col } from "@silkjs/linson";

defineComponent({
  setup() {
    return () => (
      <Row gutter={[16, 16]}>
        <Col span={6}>
          <Button theme="default">Default</Button>
        </Col>
        <Col span={6}>
          <Button theme="primary">Primary</Button>
        </Col>
        <Col span={6}>
          <Button theme="warning">Warning</Button>
        </Col>
        <Col span={6}>
          <Button theme="error">Error</Button>
        </Col>
        <Col span={6}>
          <Button theme="success">Success</Button>
        </Col>
      </Row>
    );
  },
});

Widgets

Setting

• ConfigProvider

General

• Button
• Divider
• Dropdown
• Icon

Entry

• Cascader
• Checkbox
• DatePicker
• Form
• Input
• InputNumber
• Radio
• Select
• Switch
• TimePicker
• Upload

Layout

• Grid
• Space

Display

• Card
• Carousel
• Skeleton
• Table
• Tag

Feedback

• Alert
• Dialog
• Message
• Popconfirm
• Popover
• Tooltip

Navigation

• Breadcrumb
• Menu
• Pagination
• Steps
• Tabs

Progress

Detailed progress view here, The project is currently under construction and is not recommended for use in a production environment.