Svelte Mobile UI Overview

<Calendar bind:show type="single"
  title="选择日期" color="#1989fa"
  minDate={new Date(2024, 0, 1)}
  maxDate={new Date(2025, 11, 31)}
  onConfirm={(date) => console.log(date)} />

<Cascader bind:show title="请选择地区"
  options={areaOptions}
  fieldNames={{ text: 'name', value: 'code', children: 'items' }}
  onFinish={(val) => console.log(val)}
  onclose={() => (show = false)} />

<DatePicker bind:show title="选择日期"
  columnsType={['year', 'month', 'day']}
  minDate={new Date(2020, 0, 1)}
  maxDate={new Date(2030, 11, 31)}
  onConfirm={(val) => console.log(val)}
  onCancel={() => (show = false)} />

<TimePicker bind:show title="选择时间"
  columnsType={['hour', 'minute']}
  minHour={8} maxHour={22}
  onConfirm={(val) => console.log(val)}
  onCancel={() => (show = false)} />

<Picker bind:show title="选择城市"
  columns={cityColumns}
  confirmButtonText="确定"
  cancelButtonText="取消"
  onConfirm={(val) => console.log(val)}
  onCancel={() => (show = false)}
  onChange={(val) => console.log(val)} />

<PickerGroup title="预约日期时间"
  tabs={['选择日期', '选择时间']}
  nextStepText="下一步"
  bind:activeTab>
  <DatePicker />
  <TimePicker />
</PickerGroup>

<NumberKeyboard bind:show
  theme="default"
  title="输入金额"
  extraKey="."
  closeButtonText="完成"
  randomKeyOrder={false}
  onInput={(key) => console.log(key)}
  onDelete={() => console.log('delete')}
  onclose={() => console.log('close')} />

<PasswordInput value={password}
  length={6} mask
  focused={showKeyboard}
  info="密码为 6 位数字"
  errorInfo={errorMsg}
  gutter={10} />

<Uploader bind:fileList
  maxCount={5} accept="image/*"
  maxSize={5 * 1024 * 1024}
  multiple preview
  deletable imageFit="cover"
  afterRead={(file) => uploadFile(file)}
  onOversize={(file) => toast('文件过大')}
  onDelete={(file) => console.log(file)} />

<Form rules={formRules} labelWidth="6.2em"
  scrollToError validateFirst
  onSubmit={(values) => submit(values)}
  onFailed={(errors) => console.log(errors)}>
  <Field name="user" label="用户名" bind:value={user} />
  <Field name="pwd" label="密码" type="password" bind:value={pwd} />
</Form>

<Circle currentRate={70} rate={100}
  size="120px" color="#1989fa"
  layerColor="#ebedf0" strokeWidth={4}
  clockwise fill="none"
  speed={50} text="70%" />

<CountDown time={30 * 60 * 60 * 1000}
  format="HH:mm:ss"
  autoStart millisecond={false}
  onFinish={() => console.log('结束')}
  onChange={(current) => console.log(current)} />

<Highlight
  source="慕课网是好的学习平台"
  keywords={['学习', '平台']}
  highlightClass="custom-highlight"
  caseSensitive={false}
  unhighlightClass="normal-text" />

<ImagePreview bind:show
  images={['a.jpg', 'b.jpg', 'c.jpg']}
  startPosition={0} closeable
  showIndex closeOnClickOverlay
  closeOnClickImage={false}
  maxZoom={3} minZoom={1/3}
  swipeDuration={300}
  onClose={() => {}} onChange={(index) => {}} />

<!-- 基础用法 -->
<Skeleton title row={3} avatar round
  avatarSize="48px" avatarShape="round"
  rowWidth={['60%', '100%', '80%']}
  loading={isLoading}>
  <p>实际内容在这里显示</p>
</Skeleton>

<!-- 组合用法 -->
<SkeletonTitle />
<SkeletonAvatar />
<SkeletonParagraph row={4} rowWidth="100%" round />
<SkeletonImage />

<Steps active={1} direction="horizontal"
  activeColor="#1989fa" inactiveColor="#969799"
  activeIcon="success" inactiveIcon="">
  <Step title="买家下单" description="描述信息" />
  <Step title="商家接单" />
  <Step title="买家提货" />
</Steps>

<Swipe autoplay={3000} duration={500}
  loop showIndicators
  initialSwipe={0}
  touchable vertical={false}
  width="100%" height="200px"
  indicatorColor="#1989fa"
  onChange={(index) => console.log(index)}>
  <SwipeItem>1</SwipeItem>
  <SwipeItem>2</SwipeItem>
  <SwipeItem>3</SwipeItem>
</Swipe>

<TextEllipsis content={longText}
  rows={3}
  expandText="展开"
  collapseText="收起"
  dots="..."
  onClickAction={(expanded) => console.log(expanded)} />

<Watermark content="机密文档"
  image="" rotate={-22}
  width={100} height={100}
  gapX={100} gapY={100}
  opacity={0.15}
  fullPage zIndex={100}>
  <div>页面内容</div>
</Watermark>

<Barrage bind:modelValue={barrages}
  autoPlay rows={4}
  duration={4000} delay={300}
  top={10} bottom={10}>
  <video src="video.mp4" />
</Barrage>

<RollingText startNum={0}
  targetNum={9999}
  duration={2} autoStart
  direction="down"
  height={40}
  stopOrder={[]}
  textList={[]} />

<List loading={isLoading} finished={isFinished}
  offset={300} direction="down"
  immediateCheck={true}
  loadingText="加载中..."
  finishedText="没有更多了"
  errorText="加载失败"
  onLoad={loadMore}>
  {#each list as item}
    <Cell title={item.title} />
  {/each}
</List>

<Notify bind:show type="success"
  message="操作成功"
  duration={2000}
  color="#fff"
  background="#1989fa"
  lockScroll={false}
  onclick={() => {}} />

<Popover bind:show placement="bottom-start"
  theme="light" trigger="click"
  actions={[
    { text: '选项一', icon: 'add-o' },
    { text: '选项二', icon: 'music-o' },
    { text: '选项三', disabled: true },
  ]}
  closeOnClickAction
  closeOnClickOutside
  onSelect={(action) => console.log(action)} />

<PullRefresh bind:loading
  successText="刷新成功"
  pullingText="下拉即可刷新..."
  loosingText="释放即可刷新..."
  loadingText="加载中..."
  successDuration={500}
  headHeight={50}
  onRefresh={onRefresh}>
  <p>内容区域</p>
</PullRefresh>

<ShareSheet bind:show
  title="立即分享给好友"
  description="描述信息"
  cancelText="取消"
  options={[
    [
      { name: '微信', icon: 'wechat' },
      { name: '朋友圈', icon: 'wechat-moments' },
    ],
    [
      { name: '复制链接', icon: 'link' },
      { name: '二维码', icon: 'qrcode' },
    ],
  ]}
  onSelect={(option, index) => console.log(option)}
  onCancel={() => (show = false)} />

<SwipeCell disabled={false}
  stopPropagation
  beforeClose={onBeforeClose}>
  {#snippet left()}<Button square type="primary" text="选择" />{/snippet}
  <Cell title="单元格" value="内容" />
  {#snippet right()}<Button square type="danger" text="删除" />{/snippet}
</SwipeCell>

<FloatingPanel
  anchors={[100, 300, window.innerHeight * 0.6]}
  height={0} minHeight={100}
  contentDraggable lockScroll={false}
  safeAreaInsetBottom
  onHeightChange={({ height }) => console.log(height)}>
  <p>面板内容</p>
</FloatingPanel>

<FloatingBubble icon="chat"
  offset={{ x: -60, y: -60 }}
  gap={24} magnetic="x"
  axis="xy"
  onclick={() => console.log('click')} />

<Grid columnNum={4} border center
  square={false} gutter={0}
  iconSize="28px" clickable
  direction="vertical" reverse={false}>
  <GridItem icon="photo" text="文字" dot />
  <GridItem icon="photo" text="文字" badge="99+" />
  <GridItem icon="photo" text="文字" url="/detail" />
</Grid>

<IndexBar indexList={['A','B','C','D']}
  sticky stickyOffsetTop={0}
  highlightColor="#1989fa"
  onSelect={(index) => console.log(index)}
  onChange={(index) => console.log(index)}>
  <IndexAnchor index="A" />
  <Cell title="Aaron" />
  <Cell title="Alex" />
  <IndexAnchor index="B" />
  <Cell title="Bob" />
</IndexBar>

<Pagination bind:currentPage
  totalItems={100} itemsPerPage={10}
  showPageSize={5} mode="simple"
  forceEllipses
  prevText="上一页" nextText="下一页"
  onChange={(page) => loadPage(page)} />

<Sidebar bind:activeKey
  onChange={(key) => console.log(key)}>
  <SidebarItem title="标签一" />
  <SidebarItem title="标签二" dot />
  <SidebarItem title="标签三" badge={5} />
  <SidebarItem title="标签四" disabled />
</Sidebar>

<Sticky offsetTop={50} zIndex={99}
  position="top" container={container}
  onChange={(isFixed) => console.log(isFixed)}
  onScroll={({ scrollTop, isFixed }) => {}}>
  <Button type="primary">吸顶按钮</Button>
</Sticky>

<BackTop target=".scroll-container"
  visibilityHeight={200}
  right={30} bottom={60}
  zIndex={100}
  onclick={() => console.log('top')} />

<TreeSelect items={treeItems}
  bind:activeId bind:mainActiveIndex
  height="300px" max={Infinity}
  selectedIcon="success"
  onClickNav={(index) => console.log(index)}
  onClickItem={(item) => console.log(item)} />

<DropdownMenu activeColor="#1989fa"
  direction="down" overlay
  closeOnClickOutside
  closeOnClickOverlay
  duration={0.2} zIndex={10}>
  <DropdownItem title="排序" options={sortOpts}
    bind:value={sort} onchange={(v) => {}} />
  <DropdownItem title="筛选" options={filterOpts}
    bind:value={filter} />
</DropdownMenu>

<ActionBar>
  <ActionBarIcon icon="chat-o" text="客服"
    dot color="" badge="" url="" />
  <ActionBarIcon icon="cart-o" text="购物车"
    badge="5" url="" />
  <ActionBarIcon icon="shop-o" text="店铺" />
  <ActionBarButton type="warning" text="加入购物车"
    color="" loading={false} disabled={false} />
  <ActionBarButton type="danger" text="立即购买" />
</ActionBar>

<Row gutter={20} justify="center" align="top"
  wrap tag="div">
  <Col span={8} offset={0}>span: 8</Col>
  <Col span={8}>span: 8</Col>
  <Col span={8}>span: 8</Col>
</Row>

<Space direction="horizontal" fill={false}
  wrap="nowrap" align="start">
  <Button type="primary">按钮 1</Button>
  <Button type="primary">按钮 2</Button>
  <Button type="primary">按钮 3</Button>
</Space>

<AddressEdit addressInfo={addressInfo}
  areaList={areaData}
  showPostal showSetDefault
  showSearchResult={false}
  isEdit={false}
  showDelete={false}
  showArea saveButtonText="保存"
  deleteButtonText="删除"
  areaColumnsPlaceholder={['请选择', '请选择', '请选择']}
  telValidator={(tel) => /^1[3-9]d{9}$/.test(tel)}
  onSave={(info) => saveAddress(info)}
  onDelete={(info) => deleteAddress(info)}
  onChange={(info) => console.log(info)}
  onChangeDetail={(val) => {}} />

<AddressList list={addresses}
  chosenId={selectedId}
  addButtonText="新增地址"
  defaultTagText="默认"
  disabledText="以下地址超出配送范围"
  disabledList={disabledAddresses}
  switchable
  onAdd={() => addNew()}
  onSelect={(item, index) => select(item)}
  onEdit={(item, index) => edit(item)}
  onClickItem={(item, index) => {}} />

<Area bind:show title="选择地区"
  areaList={areaData}
  value="110101"
  columnsNum={3}
  columnsPlaceholder={['请选择', '请选择', '请选择']}
  onConfirm={(val) => console.log(val)}
  onCancel={() => (show = false)}
  onChange={(val) => console.log(val)} />

<Card title="商品名称"
  price="2.00" originPrice="10.00"
  desc="描述信息" num={2}
  thumb="https://img.example.com/thumb.jpg"
  tag="标签" currency="¥"
  centered lazyLoad
  thumbLink="" />

<ContactCard type="edit"
  name="张三" tel="13000000000"
  addText="添加联系人"
  editable
  onclick={() => editContact()} />

<ContactEdit
  contactInfo={{ name: '张三', tel: '13000000000' }}
  isEditing isSaving={false}
  showSetDefault
  setDefaultLabel="设为默认联系人"
  telValidator={(tel) => /^1[3-9]d{9}$/.test(tel)}
  onSave={(info) => saveContact(info)}
  onDelete={(info) => deleteContact(info)} />

<ContactList list={contacts}
  addText="新建联系人"
  defaultTagText="默认"
  onAdd={() => addNewContact()}
  onEdit={(item, index) => editContact(item)}
  onSelect={(item, index) => selectContact(item)} />

<CouponList
  coupons={availableCoupons}
  disabledCoupons={usedCoupons}
  bind:chosenCoupon
  bind:code
  enabledTitle="可用优惠券"
  disabledTitle="不可用优惠券"
  exchangeButtonText="兑换"
  showExchangeBar showCloseButton
  showCount currency="¥"
  closeButtonText="不使用优惠"
  inputPlaceholder="请输入优惠码"
  onchange={(index) => selectCoupon(index)}
  onexchange={(code) => exchangeCoupon(code)} />