DOCSEARCHbyAlgolia
Submit Docs

iDesign Vue Component Library

website·Indexed 30 days ago

https://idesign-vue.vercel.app/

A comprehensive Vue UI component library featuring a wide array of interface elements including Layout, Table, Form components (Input, Select, DatePicker, TimePicker), Navigation (Menu, Tabs, Breadcrumb), and Feedback components (Dialog, Message, Notification, Alert). It provides a 24-grid system and a variety of pre-styled components like Carousel, Progress, and Steps to streamline web application development.

Tokens
30.9K
Snippets
216
Records
219
Agent score
74%

What's inside iDesign Vue

  1. Display basic notifications using Notification methods

    Use the global $notification object to trigger notifications. You can call specific methods based on the notification type: .info(), .success(), .warning(), and .error(). Notifications can be triggered by passing a simple string as the content.
    <template>
  <i-button @click="() => this.$notification.info('This is an info notification')">Info</i-button>
  <i-button @click="() => this.$notification.success('This is a success notification')">Success</i-button>
  <i-button @click="() => this.$notification.warning('This is a warning notification')">Warning</i-button>
  <i-button @click="() => this.$notification.error('This is an error notification')">Error</i-button>
</template>

  2. Use i-checkbox for single selection

    The i-checkbox component allows users to toggle between checked and unchecked states. It supports three modes of state management: uncontrolled (using defaultChecked), controlled (using modelValue), and two-way binding (using v-model).
    <template>
  <!-- Uncontrolled: initial value only -->
  <i-checkbox :defaultChecked="true">Default Checked</i-checkbox>

  <!-- Controlled: value driven by state -->
  <i-checkbox :modelValue="checked" @change="handleChange">Controlled</i-checkbox>

  <!-- Two-way binding -->
  <i-checkbox v-model="checked">v-model Usage</i-checkbox>
</template>

<script setup>
import { ref } from 'vue'
const checked = ref(true)

const handleChange = (val, e) => {
  console.log('Checked state:', val)
  checked.value = val
}
</script>

  3. Create a group of checkboxes with i-checkbox-group

    Wrap i-checkbox components within an i-checkbox-group to manage multiple selections as a group. Each child i-checkbox must have a value prop to uniquely identify it. The group's value is managed as an array of these identifiers.
    <template>
  <i-checkbox-group v-model="currentValue">
    <i-checkbox value="bj">Beijing</i-checkbox>
    <i-checkbox value="sh">Shanghai</i-checkbox>
    <i-checkbox value="gz">Guangzhou</i-checkbox>
    <i-checkbox value="sz">Shenzhen</i-checkbox>
  </i-checkbox-group>
</template>

<script setup>
import { ref } from 'vue'
// Initial selection: Guangzhou
const currentValue = ref(['gz'])
</script>

  4. Implement basic layout using Grid and Grid.Item

    The Grid system uses a 24-column layout. Use the <i-grid> component to wrap individual <i-grid-item> components. The span attribute on <i-grid-item> defines how many columns the item occupies (from 0 to 24). If the total span of items in a single Grid exceeds 24, the remaining items will wrap to a new line.
    <template>
  <i-grid>
    <i-grid-item :span="8">
      <div>GridItem1</div>
    </i-grid-item>
    <i-grid-item :span="8">
      <div>GridItem2</div>
    </i-grid-item>
    <i-grid-item :span="8">
      <div>GridItem3</div>
    </i-grid-item>
  </i-grid>
</template>

  5. Control Popup visibility manually

    You can manage the visibility of the popup in three ways:

    1. Uncontrolled (Default): No visibility props provided.
    2. Uncontrolled with Initial State: Use defaultVisible to set the initial state.
    3. Controlled: Use the visible prop to programmatically control visibility. Use the @trigger event to update the state when the popup is toggled.
    <template>
  <!-- Controlled Popup -->
  <i-popup 
    placement="right" 
    :visible="visible" 
    @trigger="handleTrigger"
  >
    <i-button>Controlled Tooltip</i-button>
    <template #content>Tooltip content</template>
  </i-popup>
</template>

<script setup>
import { ref } from 'vue'
const visible = ref(true)

const handleTrigger = (val) => {
  visible.value = val
}
</script>

  6. Implement a basic modal dialog with i-dialog

    The i-dialog component is a modal dialog. Use the visible attribute to control its visibility and the @close event to handle the closing logic (e.g., setting the visibility state to false).
    <template>
  <i-button @click="handleShow">Open Dialog</i-button>
  <i-dialog :visible="visible" @close="handleHide">
    <span>Dialog Content</span>
    <template #header>
      Dialog Title
    </template>
  </i-dialog>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

const handleShow = () => {
  visible.value = true
}

const handleHide = () => {
  visible.value = false
}
</script>

  7. Use the Avatar component for user profiles

    The i-avatar component is used to display user avatars. You can provide an image URL via the image prop. If the URL is invalid or omitted, a default user icon is displayed.
    <template>
  <div className="idesign-demo-block-row">
    <!-- With valid image -->
    <i-avatar image="https://picsum.photos/180/120" />
    <!-- With invalid image (shows default) -->
    <i-avatar image="https://picsum123.photos/180/120" />
    <!-- No image provided (shows default) -->
    <i-avatar />
  </div>
</template>

  8. Use the standalone ColorPanel

    The <i-color-panel /> component allows you to use the color selection interface without the trigger block. It supports v-model (or modelValue), defaultValue, colorList, and a disabled attribute. It emits a @change event when the color is modified.
    <template>
  <!-- Basic standalone panel -->
  <i-color-panel />

  <!-- Disabled standalone panel -->
  <i-color-panel disabled />
</template>

  9. Add a title to a Notification

    Notification titles can only be added by passing a configuration object with the title property. Titles cannot be added using the simple string shorthand.
    <template>
  <i-button
    @click="() => this.$notification.info({
      title: 'Notification Title',
      content: 'This is the notification content'
    })"
  >
    Notification with Title
  </i-button>
</template>

  10. Create grouped avatars with AvatarGroup

    Wrap multiple i-avatar components in i-avatar-group to create a grouped avatar effect. You can control the stacking/folding direction using the cascading prop (left or right).
    <template>
  <div className="idesign-demo-block-column">
    <!-- Fold to the right -->
    <i-avatar-group cascading="right">
      <i-avatar>L</i-avatar>
      <i-avatar>P</i-avatar>
      <i-avatar>L</i-avatar>
    </i-avatar-group>
    <!-- Fold to the left -->
    <i-avatar-group cascading="left">
      <i-avatar>L</i-avatar>
      <i-avatar>P</i-avatar>
      <i-avatar>L</i-avatar>
    </i-avatar-group>
  </div>
</template>

  11. Use the Divider component for basic layout separation

    The Divider component is a lightweight linear component used to separate, organize, and refine page structures and content logically. By default, it renders as a solid line.
    <template>
  <p>Content above</p>
  <i-divider />
  <p>Content below</p>
</template>

  12. Create combined input groups with i-input-group

    Use i-input-group to wrap multiple inputs, buttons, or custom content into a single line. Use #prefixContent and #suffixContent slots for adding labels or icons to the group. It can be combined with i-grid for layout control.
    <template>
  <i-input-group>
    <i-input />
    <template #prefixContent>http://</template>
    <template #suffixContent>.com</template>
  </i-input-group>

  <i-input-group>
    <i-input />
    <i-button>Search</i-button>
  </i-input-group>
</template>