README.md

cascaderjs

cascader for javascript

Introduction

Extremely lightweight, incredibly simple.

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	11 ✔

Installing

Package manager

npm install cascaderjs

import Cascader from "cascaderjs";
import "cascaderjs/styles/index.css";

Browser

<link rel="stylesheet" href="styles/index.css" />
<script type="text/javascript" src="dist/index.js"></script>

Usage

const cascader: CascaderInstance = new Cascader(selector, options);

The value of selector cannot be 'body' or 'document'

import Cascader, { CascaderInstance } from "cascaderjs";
import "cascaderjs/styles/index.css";

const cascader: CascaderInstance = new Cascader(".cascader1", {
	mode: "single", //multiple
	placeholder: "please select",
	data: [
		{
			className: "sichuan", //If the value is not empty, it will be set to class
			value: "sichuan",
			label: "Sichuan",
			showTitle: true, //html title attribute
			children: [
				{
					value: "chengdu",
					label: "Chengdu",
					children: [
						{
							value: "wuhouci",
							label: "Wuhou Shrine",
						},
						{
							value: "jinli",
							label: "Jinli Street",
						},
					],
				},
				{
					value: "mianyang",
					label: "Mianyang",
				},
				{
					value: "zigong",
					label: "Zigong",
				},
			],
		},
		{
			value: "zhejiang",
			label: "Zhejiang",
			children: [
				{
					value: "hangzhou",
					label: "Hangzhou",
					children: [
						{
							value: "xihu",
							label: "West Lake",
						},
					],
				},
			],
		},
		{
			value: "jiangsu",
			label: "Jiangsu",
			disabled: true, //default value is false
			children: [
				{
					value: "nanjing",
					label: "Nanjing",
				},
			],
		},
		{
			value: "hongkong",
			label: "Hongkong",
		},
	],
	showClear: true, //display clear button. default value is false
	defaultValue: ["sichuan", "chengdu", "jinli"], //If the mode is multiple, a binary array must be used, for example: [['sichuan', 'chengdu', 'jinli']].
	onChange: function (value, labelValue, indexValue) {
		//The callback after selection will only trigger if the user genuinely clicks.
		console.log(value, labelValue, indexValue);
	},
	displayRender: function (label) {
		//The function to display selected items after selection, customizable by the user. default is label.join("/")
		return label.join("~");
	},
});

//initial
cascader.init();

//setValue
cascader.setValue(["zhejiang", "hangzhou", "xihu"]);

//getter
cascader.value; // labelValue indexValue

Preview

Customize

use css variable to customize cascader styles

// default
--cascader-primary-color: rgb(64, 150, 255);
--cascader-background-color: #fff;

--cascader-container-width: 300px;
--cascader-container-height: 32px;
--cascader-container-padding: 2px 5px;
--cascader-container-border-width: 1px;
--cascader-container-border-style: solid;
--cascader-container-border-color: rgb(217, 217, 217);
--cascader-container-border-radius: 6px;

--cascader-container-value-color: rgba(0, 0, 0, 0.88);
--cascader-container-value-font-size: 14px;

--cascader-container-arrow-color: #000;
--cascader-container-arrow-active-color: #000;

--cascader-container-menus-top: 110%;
--cascader-container-menus-border-radius: 6px;
--cascader-container-menus-box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);

--cascader-container-menu-max-height: 215px;
--cascader-container-menu-padding: 5px;
--cascader-container-menu-border-color: rgba(0, 0, 0, 0.06);

--cascader-container-item-padding: 5px 10px;
--cascader-container-item-border-radius: 6px;
--cascader-container-item-background-color: #fff;
--cascader-container-item-background-hover-color: rgba(0, 0, 0, 0.06);
--cascader-container-item-background-active-color: rgb(230, 244, 255);
--cascader-container-item-disabled-color: rgba(0, 0, 0, 0.25);

--cascader-container-item-multiple-width: 20px;
--cascader-container-item-multiple-height: 20px;
--cascader-container-item-multiple-border-color: rgb(217, 217, 217);
--cascader-container-item-multiple-border-radius: 6px;
--cascader-container-item-multiple-active-color: #1677ff;

--cascader-container-item-value-max-width: 150px;
--cascader-container-item-value-font-size: 14px;
--cascader-container-item-value-color: rgba(0, 0, 0, 0.88);

--cascader-container-item-icon-font-size: 14px;
--cascader-container-item-icon-color: rgba(0, 0, 0, 0.45);