1.0.1 • Published 7 months ago

input-slot v1.0.1

Weekly downloads
-
License
ISC
Repository
github
Last release
7 months ago

input-slot【输入插槽】

【input-slot】主要使用slat,react实现的可在输入框添加自定义标签和自定义选择器的组件


API

属性类型是否必传默认值
templateArray-
placeholderString''
selectProps{ iconUrl: string; className: string; }-
tagProps{ className: string; placeholderClassName: string; }-
onChange(e) => void-

示例代码

import { Descendant,  Text as SlateText } from 'slate';
import InputSolt from 'input-slot'
type CustomElement = Descendant & {
    type?: string;
    field?: string;
    placeholder?: string;
    options?: string[];
    selected?: string;
    children: {
      type?: string;
      text?: string;
      placeholder?: string;
      children?: SlateText[];
      field?: string;
      options?: string[];
      selected?: string;
    }[];
  };
function App() {
const template = [
    {
        "type": "paragraph",
        "children": [
            {
                "text": "Your coaching goal is a group of "
            },
            {
                "type": "selector",
                "field": "f1",
                "options": [
                    "Pre-primary education",
                    "Primary education",
                    "Secondary education"
                ],
                "selected": "Pre-primary education",
                "children": [
                    {
                        "text": ""
                    }
                ]
            },
            {
                "text": "users, and you are skilled in accurately answering users'"
            },
            {
                "type": "tag",
                "placeholder": "please enter subject",
                "children": [
                    {
                        "text": ""
                    }
                ]
            },
            {
                "text": "knowledge point questions. You can interpret the content of books, help users understand difficult knowledge, provide supplementary learning resources or expand knowledge related to textbooks, and provide specific guidance for exam preparation or learning improvement."
            }
        ]
    }
]
const handleChange = (value: CustomElement[]) => {
    console.log(value)
}
  return (
    <InputSolt template={template} onChange={handleChange} />
  )
}

export default App
1.0.1

7 months ago

1.0.0

7 months ago