DOCSEARCHbyAlgolia
Submit Docs

Tantalum UI Mobile

website·Indexed 30 days ago

https://arksjs.github.io/tantalum-ui-mobile/

A mobile UI component library featuring a wide range of Vue-based components including form elements, layout systems, navigation tools, and specialized inputs like DatePicker, Cascader, and NumberKeyboard. It provides progressive components for complex selectors and a Flex-based grid system for responsive layouts.

Tokens
53.4K
Snippets
350
Records
401
Agent score
69%

What's inside Tantalum UI Mobile

  1. Overview of TaOrder grid sorting component

    The ta-order component provides a grid-based layout for sorting items, similar to the image upload interface in WeChat Moments. It supports custom item rendering via slots, configurable column counts, and an optional deletion feature.

  2. Overview of Tantalum UI Mobile

    Tantalum UI Mobile is a mobile component library based on Vue 3. It provides over 70 components covering various mobile scenarios and includes support for TypeScript, SSR, internationalization, dark mode, and theme customization. It is designed with unit test coverage and supports on-demand imports.

  3. Use the TaRange component for range selection

    The TaRange component allows users to select a numeric range using two sliders. It supports custom colors, step increments, and range constraints. It is compatible with Form components.
    <template>
  <!-- Basic usage -->
  <ta-range v-model="value" />

  <!-- With value display and custom color -->
  <ta-range 
    v-model="value2" 
    show-value 
    color="#ff7875" 
  />

  <!-- With range constraints and step -->
  <ta-range 
    v-model="value3" 
    :min="50" 
    :max="150" 
    step="5" 
    show-value 
  />

  <!-- Disabled state -->
  <ta-range disabled v-model="value4" />
</template>

<script setup>
import { ref } from 'vue';
const value = ref([10, 60]);
const value2 = ref([20, 70]);
const value3 = ref([0, 100]);
const value4 = ref([0, 100]);
</script>

  4. Use the TaCell component for list items

    The TaCell component is used to display a single item within a list. It supports a left-side label, an optional description, and right-side content or icons. Note that if the default slot is used to provide custom content, the content prop will be ignored.
    <template>
  <!-- Basic usage -->
  <ta-cell label="Cell Label" content="Content Text"></ta-cell>
  
  <!-- With description -->
  <ta-cell label="Cell Label" content="Content Text" description="Additional description info"></ta-cell>
  
  <!-- With icon -->
  <ta-cell label="Cell Label" content="Content Text" icon="EditOutlined"></ta-cell>
  
  <!-- As a link with arrow -->
  <ta-cell label="Cell Label" isLink arrow-direction="down"></ta-cell>
  
  <!-- Required field indicator -->
  <ta-cell label="Required Field" content="Content" required isLink></ta-cell>
</template>

  5. Group components in tantalum-ui-mobile

    The TaGroup component is used to organize a set of related components (such as TaCell) together under a common group title. It supports a main title, an optional right-aligned header slot, and a styling option to emphasize the header.
    <template>
  <ta-group title="基础风格">
    <ta-cell label="单元格" content="内容"></ta-cell>
    <ta-cell label="单元格" content="内容"></ta-cell>
  </ta-group>
</template>

  6. Understand Tantalum UI Mobile Progressive Component patterns

    Tantalum UI Mobile implements a progressive design pattern for selection components. This allows developers to choose the appropriate presentation layer based on the UI context while maintaining consistent data binding using v-model and change events. The three layers are:

    1. View: Directly displays the selection content on the page (e.g., PickerView).
    2. Popup: Wraps the selection panel in a modal popup, controlled via v-model:visible (e.g., PickerPopup).
    3. Selector: Associates a popup with an input field, optimized for form-based scenarios (e.g., Picker).

  7. Use NoticeBar for notifications in tantalum-ui-mobile

    The TaNoticeBar component displays a notification bar. It supports basic text display, a marquee (scrolling) effect for long text, and custom colors. You can add icons to the left or right sides using the left-icon and right-icon props.
    <template>
  <!-- Basic Usage -->
  <ta-notice-bar title="Notification text" />

  <!-- Marquee effect for long text -->
  <ta-notice-bar marquee title="This is a very long text that will scroll" />

  <!-- With left icon and custom color -->
  <ta-notice-bar 
    left-icon="SoundOutlined" 
    color="#000000" 
    title="Customized notification" 
  />
</template>

<script>
import { TaNoticeBar } from 'tantalum-ui-mobile'
</script>

  8. Use the TaImage component

    The TaImage component is used to display images with support for various scaling modes, aspect ratio constraints, and lazy loading.
    <template>
  <ta-image
    :src="imageUrl"
    :aspect-ratio="1"
    @error="onError"
  ></ta-image>
</template>

<script setup>
const imageUrl = 'https://example.com/image.jpg';
function onError(e) {
  console.error(e);
}
</script>

  9. Use the TaTag component

    The TaTag component is used to display labels or tags with different semantic types, visual patterns, and sizes. It supports custom colors and an optional close button.
    <template>
  <!-- Basic usage with different types -->
  <ta-tag type="primary">Primary Tag</ta-tag>
  
  <!-- Dark pattern with a specific size -->
  <ta-tag type="success" pattern="dark" size="large">Success Tag</ta-tag>
  
  <!-- Custom color and closable -->
  <ta-tag color="#6667AB" closable>Custom Color Tag</ta-tag>
</template>

  10. Use the Stepper component for numeric input

    The ta-stepper component provides a numeric input field with increment and decrement buttons. It supports range limits, custom step intervals, and decimal precision. It is compatible with Form components.
    <template>
  <!-- Default usage -->
  <ta-stepper />

  <!-- Custom step of 2 -->
  <ta-stepper :step="2" />

  <!-- Range limited between 5 and 10 -->
  <ta-stepper :min="5" :max="10" />

  <!-- Integer only (decimal-length = 0) -->
  <ta-stepper :decimal-length="0" />

  <!-- Disabled state -->
  <ta-stepper :disabled="true" />

  <!-- Input field disabled, buttons still active -->
  <ta-stepper :disabled-input="true" />

  <!-- Fixed decimal precision (1 decimal place) with step 0.2 -->
  <ta-stepper :decimal-length="1" :step="0.2" />
</template>

  11. Integrate Tantalum UI Mobile via CDN

    For simple applications, you can include the library via CDN. This requires a browser that supports ES6.
    <!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/tantalum-ui-mobile/dist/index.css" />

<!-- JavaScript -->
<script src="https://unpkg.com/tantalum-ui-mobile/dist/index.js"></script>