快速开始

<!-- ① 令牌（PC 令牌 + 移动端 --kole-m-* 合成单文件） -->
<link rel="stylesheet" href="kole-ui/mobile/tokens.css">

<!-- ② 组件样式（全量或按需二选一） -->
<link rel="stylesheet" href="kole-ui/mobile/components/index.css">
<!-- <link rel="stylesheet" href="kole-ui/mobile/components/navbar.css"> -->

<!-- ③ 结构照抄任一端的实现（本例 = H5 原生） -->
<header class="kole-m-navbar kole-m-navbar--center" role="banner">
  <button class="kole-m-navbar__back" type="button" aria-label="返回">‹</button>
  <h2 class="kole-m-navbar__title">订单详情</h2>
  <div class="kole-m-navbar__actions">
    <button class="kole-m-navbar__action" type="button">分享</button>
  </div>
</header>

import { KoleMNavBar, KoleMTabBar, KoleMActionSheet } from 'kole-ui/mobile/react';
import 'kole-ui/mobile/components/index.css';

export default function Page() {
  const [visible, setVisible] = React.useState(false);
  const [tab, setTab] = React.useState('home');
  return (
    <>
      <KoleMNavBar title="订单详情" titleAlign="center" onBack={() => history.back()}
        actions={<button className="kole-m-navbar__action" type="button">分享</button>} />
      <main style={{ padding: 16 }}>页面内容</main>
      <KoleMActionSheet visible={visible} title="订单操作"
        actions={[{ key: 'done', label: '标记为已完成' },
                  { key: 'del', label: '删除订单', tone: 'danger' }]}
        onClose={() => setVisible(false)} onSelect={(k) => console.log(k)} />
      <KoleMTabBar value={tab} onChange={setTab}
        items={[{ key: 'home', label: '首页' }, { key: 'order', label: '订单', badge: 12 },
                { key: 'mine', label: '我的' }]} />
    </>
  );
}

<script setup>
import { ref } from 'vue';
import KoleMNavBar from 'kole-ui/mobile/vue3/NavBar.vue';
import KoleMSwipeCell from 'kole-ui/mobile/vue3/SwipeCell.vue';
import 'kole-ui/mobile/components/index.css';

const open = ref(false);
</script>

<template>
  <KoleMNavBar title="消息列表" @back="open = true" />

  <KoleMSwipeCell direction="left"
    :actions="[{ key: 'read', label: '已读' }, { key: 'del', label: '删除', tone: 'danger' }]"
    @action="onAction">
    <span class="kole-m-swipecell__title">订单 20260920-001</span>
    <span class="kole-m-swipecell__desc">2026-09-20 09:12 · 待处理</span>
  </KoleMSwipeCell>
</template>

<script>
import KoleMTabBar from 'kole-ui/mobile/vue2/TabBar.vue';
import KoleMPullRefresh from 'kole-ui/mobile/vue2/PullRefresh.vue';

export default {
  components: { KoleMTabBar, KoleMPullRefresh },
  data: function () {
    return {
      tab: 'home',
      refreshing: false,
      items: [{ key: 'home', label: '首页' }, { key: 'mine', label: '我的' }]
    };
  },
  methods: {
    onRefresh: function () {
      this.refreshing = true;
      setTimeout(function () { this.refreshing = false; }.bind(this), 800);
    }
  }
};
</script>

<script setup>
import { ref } from 'vue';
import KoleMNavBar from 'kole-ui/mobile/uniapp/NavBar.vue';
import KoleMSwipeCell from 'kole-ui/mobile/uniapp/SwipeCell.vue';
</script>

<template>
  <KoleMNavBar title="订单" @back="uni.navigateBack()" />
  <KoleMSwipeCell direction="left" :actions="[{ key: 'del', label: '删除', tone: 'danger' }]">
    <text>订单 20260920-001</text>
  </KoleMSwipeCell>
</template>

<style>
/* 令牌在宿主工程全局引一次：@import "kole-ui/mobile/tokens.css"; */
</style>

<!-- 本端限制：小程序与 App 端没有 DOM、也没有 PointerEvent，
     故组件内部只用 @touchstart/@touchmove/@touchend 与 uni 基础组件（view / text）。 -->