sun-parakeet

 v0.0.12

Switch 开关

示例

基础用法

<Switch />

默认打开

<Switch checked />

文字和图标

<Switch checkedText="开" uncheckedText="关" />

<Switch>
  {#snippet checkedText()}
    <Icon name="check" size={25} class="-mx-1" />
  {/snippet}
  {#snippet uncheckedText()}
    <Icon name="close" size={25} class="-mx-1" />
  {/snippet}
</Switch>

<Switch checkedText="1" uncheckedText="0" />

自定义样式

<Switch
  --sunp-width="60px"
  --sunp-height="36px"
  --sunp-checked-color="var(--sunp-color-success)"
/>

禁用状态

<Switch disabled />
<Switch checked disabled />

表单-水平布局

<Form header="表单-水平布局" layout="horizontal">
  <FormItem label="选择">
    <Switch bind:checked={form.checked} />
  </FormItem>
</Form>

表单-垂直布局

<Form header="表单-垂直布局" layout="vertical">
  <FormItem label="自动发送微信消息">
    <Switch bind:checked={form.checked} />
  </FormItem>
</Form>

Switch

属性

属性 说明 类型 默认值
checked 指定当前是否打开 boolean $bindable(false)
checkedText 打开时的内容 string | Snippet undefined
uncheckedText 关闭时的内容 string | Snippet undefined
disabled 是否禁用 boolean false

事件

事件 说明 类型
onChange 变更事件 (checked: boolean) => void

CSS 变量

属性 说明 默认值
--sunp-width 最小宽度 51px
--sunp-height 高度 31px
--sunp-checked-color 打开时的颜色 var(--sunp-color-primary)

后退

前进

Stepper 步进器

Textarea 文本域