nutui-uniapp

You can control the active tab in nut-tabbar using v-model in two ways:

1. By Name: Assign a unique name prop to each nut-tabbar-item. The v-model should then be a string matching one of those names.
2. By Index: The v-model is a number representing the zero-based index of the active item.

Example: Matching by Name

<template>
  <nut-tabbar v-model="activeName">
    <nut-tabbar-item
      v-for="item in list"
      :key="item.name"
      :name="item.name"
      :tab-title="item.title"
      :icon="item.icon"
    ></nut-tabbar-item>
  </nut-tabbar>
</template>

const activeName = ref("category");
const list = [
  { title: "标签", icon: "home", name: "home" },
  { title: "标签", icon: "category", name: "category" },
  { title: "标签", icon: "find", name: "find" },
  { title: "标签", icon: "cart", name: "cart" },
  { title: "标签", icon: "my", name: "my" }
];

Example: Selecting by Index

<template>
  <nut-tabbar v-model="active">
    <nut-tabbar-item
      v-for="item in list"
      :tab-title="item.title"
      :icon="item.icon"
    ></nut-tabbar-item>
  </nut-tabbar>
</template>

const active = ref(2);
const list = [
  { title: "标签", icon: "home" },
  { title: "标签", icon: "category" },
  { title: "标签", icon: "find" },
  { title: "标签", icon: "cart" },
  { title: "标签", icon: "my" }
];

The nut-tabs component supports several layout and behavior configurations:

• auto-height: When true, the height of nut-tabs and nut-tabs__content adjusts automatically to match the height of the current nut-tab-pane.
• title-scroll: Enables scrolling for the tab bar when there are many tabs.
• title-gutter: Sets the spacing between tabs when scrolling is enabled.
• direction: Changes the orientation of the tab bar. Use vertical for a side-bar layout or horizontal (default) for a top-bar layout.

<template>
  <!-- Auto height -->
  <nut-tabs v-model="value" auto-height>
    <nut-tab-pane title="Tab 1">
      <view>Tall Content</view>
      <view>More Content</view>
    </nut-tab-pane>
    <nut-tab-pane title="Tab 2">Short Content</nut-tab-pane>
  </nut-tabs>

  <!-- Scrolling and Vertical layout -->
  <nut-tabs
    v-model="value"
    direction="vertical"
    title-scroll
    title-gutter="10"
  >
    <nut-tab-pane v-for="item in list" :key="item" :title="`Tab ${item}`">
      Content
    </nut-tab-pane>
  </nut-tabs>
</template>

When you have multiple nut-swipe components in a list and want to ensure only one is open at a time, wrap them in a nut-swipe-group with the lock prop set to true.

Important: When using nut-swipe-group, every nut-swipe child must have a unique name prop.

When lock is enabled, opening one nut-swipe will automatically trigger the close method on all other active nut-swipe components in the group.

Example: Mutual Exclusion

<template>
  <nut-swipe-group lock>
    <nut-swipe name="swipe1">
      <nut-cell title="Swipe 1" round-radius="0"></nut-cell>
      <template #right>
        <nut-button type="danger" shape="square">Delete</nut-button>
      </template>
    </nut-swipe>

    <nut-swipe name="swipe2">
      <nut-cell title="Swipe 2" round-radius="0"></nut-cell>
      <template #right>
        <nut-button type="danger" shape="square">Delete</nut-button>
      </template>
    </nut-swipe>
  </nut-swipe-group>
</template>

<template>
  <nut-swipe-group lock>
    <nut-swipe name="swipe1">
      <nut-cell title="左滑删除" round-radius="0"></nut-cell>

      <template #right>
        <nut-button type="danger" shape="square">删除</utton>
      </template>
    </nut-swipe>

    <nut-swipe name="swipe2">
      <nut-cell title="左滑删除" round-radius="0"></nut-cell>

      <template #right>
        <nut-button type="danger" shape="square">删除</utton>
      </template>
    </nut-swipe>

    <nut-swipe name="swipe3">
      <nut-cell title="左滑删除" round-radius="0"></nut-cell>

      <template #right>
        <nut-button type="danger" shape="square">删除</utton>
      </template>
    </nut-swipe>
  </nut-swipe-group>
</template>

The nut-picker supports two main data structures via the columns prop:

1. Multi-column display: Pass a two-dimensional array (an array of arrays) where each inner array represents a separate column of options.
2. Cascading (Multi-level) selection: Pass a single array of objects where each object can contain a children field. This creates a hierarchical relationship where selecting an item in one column updates the options in the next.

To use custom field names for your data (e.g., if your API returns name instead of text), use the field-names prop.

// Multi-column example
const columns = ref([
  [{ text: 'Monday', value: 'Mon' }, { text: 'Tuesday', value: 'Tue' }],
  [{ text: 'Morning', value: 'AM' }, { text: 'Afternoon', value: 'PM' }]
]);

// Cascading example
const columns = ref([
  {
    text: 'Zhejiang',
    value: 'ZheJiang',
    children: [
      { text: 'Hangzhou', value: 'HangZhou', children: [{ text: 'West Lake', value: 'XiHu' }] }
    ]
  }
]);

// Custom field names
const fieldNames = {
  text: 'name',
  value: 'code',
  children: 'list'
};

You can customize the layout and behavior of the NumberKeyboard using the following patterns:

Right Column Layout

Use type="rightColumn" to add a sidebar for extra keys (e.g., a decimal point) and customize the confirm button text.

Random Key Positions

Use the random-keys prop to shuffle the key positions, which is useful for security in payment scenarios.

Title Bar

Use the title prop to display a header at the top of the keyboard.

ID Card Mode

Use custom-key to add specific characters like 'X' to the keypad.

<!-- Right Column with custom key and confirm text -->
<nut-number-keyboard
  v-model="value"
  v-model:visible="visible"
  type="rightColumn"
  :custom-key="['.']"
  confirm-text="支付"
  @confirm="onConfirm"
></nut-number-keyboard>

<!-- Random keys for security -->
<nut-number-keyboard
  v-model="value"
  v-model:visible="visible"
  random-keys
></nut-number-keyboard>

<!-- With a title bar -->
<nut-number-keyboard
  v-model="value"
  v-model:visible="visible"
  title="默认键盘"
></nut-number-keyboard>

<!-- ID Card style with 'X' key -->
<nut-number-keyboard
  v-model="value"
  v-model:visible="visible"
  :custom-key="['X']"
></nut-number-keyboard>