Image size requirements
Profile updated
Server unavailable
Sorry something has gone wrong
- Parameters
- View
- HTML
- Assets
| Name | Options | Default | Notes |
|---|---|---|---|
| type | info, success, warning and danger | info | Some notes be here... |
| icon | info-circle | ||
| type | info, success, warning and danger | info | Some notes be here... |
| type | info, success, warning and danger | info | Some notes be here... |
| type | info, success, warning and danger | info | Some notes be here... |
@props(['type' => 'info'])
<div data-module="ds-alert" {{ $attributes->merge(['class' => 'ds-alert ds-alert--'.$type]) }}>
<div class="flex">
<div class="flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M8.485 3.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 3.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<h3>{{ $title ?? '' }}</h3>
<div class="ds-alert__message">
<p>{{ $slot ?? '' }}</p>
</div>
</div>
</div>
</div><x-alert />.ds-alert {
@apply p-4 rounded-md;
svg {
@apply w-5 h-5;
}
&__message {
@apply mt-2 text-sm
}
h3, p, svg {
@apply dark:text-white
}
&--info {
@apply bg-blue-50 dark:bg-blue-500;
svg {
@apply text-blue-400
}
h3 {
@apply text-blue-800
}
&__message {
@apply text-blue-700
}
}
&--success {
@apply bg-green-50 dark:bg-green-500;
svg {
@apply text-green-600
}
h3 {
@apply text-green-800
}
}
&--warning {
@apply bg-yellow-50 dark:bg-yellow-500;
svg {
@apply text-yellow-400
}
h3 {
@apply text-yellow-800
}
}
&--danger {
@apply bg-red-50 dark:bg-red-500;
svg {
@apply text-red-400
}
h3 {
@apply text-red-800
}
}
}export default class Alert {
constructor($module) {
this.$module = $module;
this.$module.addEventListener('click', () => {
alert('clicked');
});
}
}