init

uni_modules/nutui-uni/components/cellgroup/cellgroup.ts

@@ -0,0 +1,16 @@
+import type { ExtractPropTypes } from 'vue'
+import { commonProps } from '../_utils'
+
+export const cellgroupProps = {
+  ...commonProps,
+  /**
+   * @description 标题名称
+   */
+  title: String,
+  /**
+   * @description 右侧描述
+   */
+  desc: String,
+}
+
+export type CellGroupProps = ExtractPropTypes<typeof cellgroupProps>

uni_modules/nutui-uni/components/cellgroup/cellgroup.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { computed, defineComponent, useSlots } from 'vue'
+import { PREFIX } from '../_constants'
+import { getMainClass } from '../_utils'
+import { cellgroupProps } from './cellgroup'
+
+const props = defineProps(cellgroupProps)
+
+const slots = useSlots()
+
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-cell-group`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    // #ifndef H5
+    styleIsolation: 'shared',
+    // #endif
+  },
+})
+</script>
+
+<template>
+  <view :class="classes" :style="props.customStyle">
+    <slot v-if="slots.title" name="title" />
+
+    <template v-else>
+      <view v-if="props.title" class="nut-cell-group__title">
+        {{ props.title }}
+      </view>
+    </template>
+
+    <slot v-if="slots.desc" name="desc" />
+
+    <template v-else>
+      <view v-if="props.desc" class="nut-cell-group__desc">
+        {{ props.desc }}
+      </view>
+    </template>
+
+    <view class="nut-cell-group__wrap">
+      <slot />
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+@import "./index";
+</style>

uni_modules/nutui-uni/components/cellgroup/index.scss

@@ -0,0 +1,54 @@
+.nut-theme-dark {
+  .nut-cell-group {
+    &__wrap {
+      color: $dark-color;
+      background: $dark-background3;
+      box-shadow: none;
+    }
+  }
+}
+
+.nut-cell-group {
+  display: block;
+
+  &__title {
+    display: inherit;
+    padding: $cell-group-title-padding;
+    margin-top: 30px;
+    margin-bottom: 10px;
+    font-size: $cell-group-title-font-size;
+    line-height: $cell-group-title-line-height;
+    color: $cell-group-title-color;
+  }
+
+  &__desc {
+    display: inherit;
+    padding: $cell-group-desc-padding;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    font-size: $cell-group-desc-font-size;
+    line-height: $cell-group-desc-line-height;
+    color: $cell-group-desc-color;
+  }
+
+  &__wrap {
+    display: inherit;
+    margin: 10px 0;
+    overflow: hidden;
+    background-color: $cell-group-background-color;
+    border-radius: $cell-border-radius;
+    box-shadow: $cell-box-shadow;
+
+    :deep(.nut-cell) {
+      margin: 0;
+      border-radius: 0;
+      box-shadow: none;
+    }
+  }
+
+  :deep(.nut-cell) {
+    &::after {
+      border-bottom: $cell-after-border-bottom;
+    }
+  }
+}

uni_modules/nutui-uni/components/cellgroup/index.ts

@@ -0,0 +1 @@
+export * from './cellgroup'